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');