首先声明，所谓的数据控件这一个概念，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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="easyui/jquery.min.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦