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