效果如下:
代码如下:
$("#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); } });