easyui combobox 多选及全选 功能
效果如下:
代码如下:
$("#DepartmentCode").comboex({ data: [{ "value": "", "text": "全部" }, { "value": "001", "text": "部门1" }, { "value": "002", "text": "部门2" }, { "value": "003", "text": "部门3" }], valueField: 'value', textField: 'text', panelHeight: 200, editable: false, multiple: true, formatter: function (row) { //formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法 var opts = $(this).combobox('options'); return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField] }, onLoadSuccess: function (record) { if (comboboxParams == null) { comboboxParams = PTLocalStorage.get(window.document.URL, false); } if (comboboxParams) { var tmpPara = comboboxParams.state; if (tmpPara && tmpPara != "") { $(this).combobox('setValue', tmpPara); } } }, onClick: function (record) { var valueField = $(this).combobox("options").valueField; if (!record[valueField]) { var data = $(this).combobox("getData"); var values = $(this).combobox("getValues"); var selectVaues = []; if ((data.length - 1) != values.length) { data.reduce(function (prev, current, index, array) { selectVaues.push(current[valueField]); }, selectVaues); } else { selectVaues.push(record[valueField]); } $(this).combobox('setValues', selectVaues); } }, onSelect: function (row) { //选中一个选项时调用 var opts = $(this).combobox('options'); //设置选中值所对应的复选框为选中状态 var el = opts.finder.getEl(this, row[opts.valueField]); el.find('input.combobox-checkbox')._propAttr('checked', true); }, onUnselect: function (row) {//不选中一个选项时调用 var opts = $(this).combobox('options'); var el = opts.finder.getEl(this, row[opts.valueField]); el.find('input.combobox-checkbox')._propAttr('checked', false); } });