easyUi 动态数据下拉复选框的初使用

情景：想做三个下拉框，其中有的可以进行复选，也就是一个下拉框可以选择多个值

先看效果图：

 多选效果：

 

单选效果：

实现代码：

（1）库文件

<link href="${ctxStatic}/new/easyui/css/easyui.css" rel="stylesheet"/><link href="${ctxStatic}/new/easyui/css/icon.css" rel="stylesheet"/><script src="${ctxStatic}/new/easyui/js/jquery.easyui.min.js"type="text/javascript"></script>

（2）jsp 代码

<label class="label-item single-overflow pull-left"title=唯一标识：可多选"><font color="red">*</font>唯一标识: </label><input id="onlyId" class="form-control easyui-combobox col-xs-12 col-sm-6 col-md-9" data-options="valueField: 'name',textField: 'code',multiple:true"/><label class="label-item single-overflow pull-left" title="范围标识：">范围标识：</label> <input id="scopeId" class="form-control easyui-combobox col-xs-12 col-sm-6 col-md-9" data-options="valueField: 'name',textField: 'code'"/><label class="label-item single-overflow pull-left" title="回写标识：">回写标识：</label> <input id="backId" class="form-control easyui-combobox col-xs-12 col-sm-6 col-md-9" data-options="valueField: 'name',textField: 'code'"/>

核心代码：data-options="valueField: 'name',textField: 'code',multiple:true"      

textField: 'code'   :这是下拉框 显示的内容，也就是前面图里面的 那些字段名

multiple:true ：标识下拉框 带有复选的属性

由于数据得动态加载，所以需要 js 函数

（3）js代码    这是简略的 ajax 反馈函数

success : function(data){ $("#onlyId").combobox( "loadData", onlyIdValue ); $("#scopeId").combobox( "loadData", scopeIdValue); $("#backId").combobox( "loadData", backIdValue ); }

（4）data 的数据格式   selected 为 true 的就是初始化加载后，就已经选中的，想要用好 这个动态下拉框，就得按着这个数据的格式传给 指定的下拉框，这样才会显示正常

{"onlyIdValue": [{"code": "ADMIN_ILLNESS_CODE","name": "ADMIN_ILLNESS_CODE"}, {"code": "ADMIN_ILLNESS_NAME","name": "ADMIN_ILLNESS_NAME"}, {"code": "DEPT_NAME","name": "DEPT_NAME"}, {"code": "ID$","name": "ID$","selected": true}],"scopeIdValue": [{"code": "CREATED_AT","name": "CREATED_AT","selected": true} , {"code": "FALG_FIRST_VISIT","name": "FALG_FIRST_VISIT"}

（5）如果要清空已选的数据

$("#onlyId").combobox('clear'); //清空三个标识的已选数据$("#scopeId").combobox('clear'); $("#backId").combobox('clear');