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