使用EasyUI开发银行业绩统计系统[9]-EasyUI数据控件之下拉框combobox-原创手记-慕课网

首先声明，所谓的数据控件这一个概念，EasyUI官方应该也没这个说法。猫哥是感觉网页上经常使用的、经常需要从后台获取数据后显示到控件内部的，有这么四个：下拉框、下拉列表、树、表格。

之前猫哥已经分别演示了如何从json文件、如何从后端（比如Servlet）返回的json数据中加载数据到EasyUI控件。所以对于这四个数据控件，猫哥仅演示从json文件中获取数据后绑定即可，这样非常简洁明了，到了项目开发演示的阶段，根据需求一些地方就会使用后端过来的数据。

因为数据控件的使用频率高、需要说明的地方也多，尤其是表格（涉及很多内容比如分页、带复选框），所以本篇单独讲下拉框的实现及其数据的绑定。

先看示意图：
图片描述
其中用到了一个users_data.json文件，在webroot下的json文件夹下，具体内容为：

[
    {
        "userId":"1",
        "userName":"test",
        "userEmail":"maoge@maoge.com",
        "userSex":"1"
    },
    {
        "userId":"2",
        "userName":"haha",
        "userEmail":"haha@maoge.com",
        "userSex":"0"
    }
]

具体实现如下，注意文字描述：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>下拉框combobox示例</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </head>
  <body>
    <div class="easyui-panel" title="示例 简单下拉框" style="width:400px;padding:10px 10px;">
        <div>使用easyui-combobox样式即可</div>
        <select id="hobby" class="easyui-combobox" label="兴趣爱好:" labelPosition="left" style="width:100%;">
                <option value="football">足球</option>
                <option value="basketball">篮球</option>
        </select>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getSelectedHobby()">获取选中值</a>
    </div>
    <div class="easyui-panel" title="示例 静态绑定数据" style="width:400px;padding:10px 10px;">
        <div>静态绑定users_data.json文件中的数据，注意可以将url换成servlet的url，就可以直接获取后端的数据，当然，后端的数据需要以json格式返回</div>
        <div>注意valueField和textField分别对应json数据中的‘键’，还有一点就是select标签换成input也是可行的</div>
        <select id="name" class="easyui-combobox" style="width:100%;" data-options="
            url:'json/users_data.json',
            valueField: 'userId',
            textField: 'userName',
            label: '选择用户',
            labelPosition: 'top'">
        </select>
    </div>
    <div class="easyui-panel" title="示例 动态绑定数据" style="width:400px;padding:10px 10px;">
        <div>通过js动态绑定数据</div>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="bindUsersInfo()">绑定</a>
        <select id="usersSelect" class="easyui-combobox" style="width:100%;" data-options="
            valueField: 'userId',
            textField: 'userName',
            label: '选择用户',
            labelPosition: 'top'">
        </select>
    </div>

    <script type="text/javascript">
        function getSelectedHobby(){
            var value=$("#hobby").combobox("getValue");
            alert(value);
        }
        function bindUsersInfo(){
            $('#usersSelect').combobox('reload', 'json/users_data.json');
        }
    </script>
  </body>
</html>

使用EasyUI开发银行业绩统计系统[9]-EasyUI数据控件之下拉框combobox原创