easyUI 构建combox 多选框

后台下拉数据获取，可以参考下面文章

EasyUI combox 添加空白选项

JSP

            <td nowrap="nowrap" width="130px" align="left">Multiple choice:</td>
            <td>
                <input id="Multiple_choice" name="Multiple_choice" class="easyui-combobox" editable="false" data-options="valueField: 'ID',textField: 'TEXT',url: ''" style="width:150px;"/>
            </td>

JS

var url="";// 获取下拉值的url请求
createCheckboxSelectToJson("Multiple_choice", url, "ID", "TEXT");

1、不带全选按钮的多选框

/**
 * 功能：构建下拉多选框
 * 参数：
 * 		tabId  select标签的id
 * 		url  传到后台的URL，这个返回的数据一定要是json数据格式
 * 		optionValue 后台数据库视图或表的字段名（这里字段名要全部大写），这个对应的是select标签中保存到数据库的值
 *		optionText 后台数据库视图或表的字段名（这里字段名要全部大写），这个对应的是select标签中页面展现的值
 * create ：fengzj
 * createDate : 2020/10/21
 */
function createCheckboxSelectToJson(tabId,url,optionValue,optionTex){
	$('#'+tabId).combobox({
		url: url,
		valueField: optionValue,
		textField: optionTex,
		multiple: true,
        //这里loadFilter的方法主要是去除（后台返回的空白选项数据）空白选项，若返回的数据没有空白选项，可不要loadFilter方法
		loadFilter: function (data) {
			var selectData = [];
			for (var i in data) {
				if (data[i].TEXT.trim() != "" && data[i].TEXT != null) {
					selectData.push(data[i]);
				}
			}
			return selectData;
		},
		formatter: function (row) {
			var opts = $(this).combobox('options');
			return '<input type="checkbox" class="combobox-checkbox" id="' + row[opts.valueField] + '"  value="' + row[opts.valueField] + '">' + row[opts.textField]
		},

	});
}

2、带全选按钮的多选框

/**
 * 功能：构建下拉多选框(包含全选按钮)
 * 参数：
 * 		tabId  select标签的id
 * 		url  传到后台的URL，这个返回的数据一定要是json数据格式
 * 		optionValue 后台数据库视图或表的字段名（这里字段名要全部大写），这个对应的是select标签中保存到数据库的值
 *		optionText 后台数据库视图或表的字段名（这里字段名要全部大写），这个对应的是select标签中页面展现的值
 * create ：fengzj
 * createDate : 2020/10/21
 */
function createCheckboxSelectToJson(tabId,url,optionValue,optionTex){
	$('#'+tabId).combobox({
		url: url,
		valueField: optionValue,
		textField: optionTex,
		multiple: true,
		loadFilter: function (data) {
            // 重新创建下拉框选项
			var selectData = [];
			var allButton = {ATTR_ID: "all", ID: "all", TEXT: "全选"};
			selectData.push(allButton);
			for (var i in data) {
                // 后台查询的下拉值带有空白选项，这里需要非空判断去除空白选项
				if (data[i].TEXT.trim() != "" && data[i].TEXT != null) {
					selectData.push(data[i]);
				}
			}
			return selectData;
		},
		formatter: function (row) {
			var opts = $(this).combobox('options');
			if (row[opts.valueField] == "all") {
				return '<input type="checkbox" class="combobox-checkbox" id="allButton" value="allButton">' + row[opts.textField]
			} else {
				return '<input type="checkbox" class="combobox-checkbox" id="' + row[opts.valueField] + '"  value="' + row[opts.valueField] + '">' + row[opts.textField]
			}
		},
		onSelect: function (row) {
			var opts = $(this).combobox('options');
			var id = "#" + row[opts.valueField];
			// 获取所有下拉值
			var rows = $('#'+tabId).combobox("getData");

			// 先判断是否已经全选，除了全选按钮
			var type = "selectNoAll";
			for (var i in rows) {
				var data = rows[i];
				var data_id = "#" + data[opts.valueField];
				if (data[opts.valueField] != "all" && $(data_id).attr('checked') != "checked") {
					type = "selectAll";
				}
			}

			// 判断是否点击全选按钮
			if (row[opts.valueField] == "all") {
				// 全选或者取消全选
				for (var i in rows) {
					var temp = rows[i];
					var temp_id = "#" + temp[opts.valueField];
					if (type == "selectAll") {
						// 全选
						$(temp_id).attr('checked', true);
						$(this).combobox('select', temp[opts.valueField]);

						$("#allButton").attr('checked', true);
					} else {
						// 取消全选
						$(temp_id).attr('checked', false);
						$(this).combobox('unselect', temp[opts.valueField]);

						$("#allButton").attr('checked', false);
					}
					// 将全选置为不选择
					$(this).combobox('unselect', 'all');
				}
			} else {
				// 选择某一项
				$(id).attr('checked', true);
			}

		},
		onUnselect: function (row) {
			var opts = $(this).combobox('options');
			var id = "#" + row[opts.valueField];

			if (row[opts.valueField] != "all") {
				// 取消选择某一项
				$("#allButton").attr('checked', false);
				$(id).attr('checked', false);
			}
		}
	});
}