easyui 下拉多选框

来源:互联网 发布:软件测试培训课程 编辑:程序博客网 时间:2024/06/16 13:10

1、将代码添加到common.js

//多选下拉框加上全选 只支持valueField = 'value', textField = 'label',window.commboboxAddSelectedAllValue = function(_data){if(!_data || _data.toString().length < 1){return _data;}var o = [{'value' : '' , 'label' : '--全部--'}];return o.concat(_data);}//多选下拉框选择的数据样式window.commboboxFornatter = function(_this, _row){    var opts = $(_this).combobox('options');    return '<input type="checkbox" class="combobox-checkbox" style="width:15px;">' + _row[opts.textField];}//获取下拉框中所有的值window.getcomboboxValues = function(_this){var data = $(_this).combobox('getData');var datas = new Array(data.length);for(var a in data) {    datas[a] = data[a].value;}return datas;}//根据状态选中/取消选中来获取该调用什么方法window.getCommboboxActionByStatus = function(_status){if(_status == true){return "select";}return "unselect";}//根据传入的值,控制下拉框的checkbox是否选中window.setComboboxCheckedStatus = function(_this, _value, _status, _opts){var el = _opts.finder.getEl(_this, $.trim(_value));el.find('input.combobox-checkbox')._propAttr('checked', _status);try {// 如果combobox中没有值会报错$(_this).combobox(getCommboboxActionByStatus(_status),$.trim(_value));} catch (_error) {//alert("|"+_valueArr[i]+"|"+_error)}}//设置多选下拉框中数据是否选中的状态window.setComboboxAllCheckboxStatus = function(_this, _status, _values){//获取下拉中的数据var children = $(_this).combobox("panel").children();$.each(children, function(index, obj){obj.firstChild.checked = _status;});$(_this).combobox('setValues',_values);}//多选下拉框选择数据事件window.commboboxSelectEvent = function(_this, _row, _status, _values){var _opts = $(_this).combobox('options');if (_row[_opts.valueField] == "" || _row[_opts.valueField] == "--全部--") {if(!window.commboboxSelectedAllFlag){window.commboboxSelectedAllFlag = true;return;}setComboboxAllCheckboxStatus(_this, _status, _values);} else {    var el = _opts.finder.getEl(_this, _row[_opts.valueField]);    el.find('input.combobox-checkbox')._propAttr('checked', _status);         var _data = $(_this).combobox('getData');    var _selectedValues = $(_this).combobox('getValues');    if(_status && _selectedValues.length >= (_data.length-1)){    setComboboxAllCheckboxStatus(_this, _status, _values);    } else {// 如果当前的操作有全选是选中的,就取消全选    var _flag = false;    for(var _val in _selectedValues){    if(_selectedValues[_val] == ""){    _flag = true;    break;    }    }    // _flag 判断当前全选按钮是否选中,如果选中就取消,否则就跳过    if(!_flag){    return;    }    window.commboboxSelectedAllFlag = false;setComboboxCheckedStatus(_this, "", false, _opts);    }}}//标识下拉框中全选是人工点击触发还是设置全选/取消全选时触发window.commboboxSelectedAllFlag = true;

2、使用方式 引入common.js

<div><label>路由代码</label><input class="easyui-combobox textbox" id="queryRouteCode" name="queryRouteCode" > </div><div style="display: none;"><input class="easyui-textbox" id="query_routeCode" name="routeCode" style="width: 130px" />   </div>var routeCodeArr =  [{"value" : "t1","label" : "T1"},{"value" : "t4","label" : "T4"},{"value" : "t6","label" : "T6"},{"value" : "t8","label" : "T8"},{"value" : "sp4","label" : "SP4"}];window.query_routecode = null;$("#queryRouteCode").combobox({data : routeCodeArr,valueField : 'value',textField : 'label',editable : false,multiple : true,loadFilter:function(data){return commboboxAddSelectedAllValue(data);},formatter: function (row) {return commboboxFornatter(this,row);},onLoadSuccess: function() {window.query_routecode =(getcomboboxValues(this)).join();$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));},onSelect: function (row) {commboboxSelectEvent(this,row,true,window.query_routecode.split(','));$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));},onUnselect: function (row) {commboboxSelectEvent(this,row,false,[]);$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));}});注意:最后获取值时是获取id为query_routeCode 隐藏域的值远程获取window.query_routecode = null;$("#queryRouteCode").combobox({//data : routeCodeArr,url : contextPath + '/omcs/naga/siteTransportCapacityView/findAllRouteCode.pvt',mode : 'remote',rowsProperty : 'rows',valueField : 'value',textField : 'label',editable : false,multiple : true,loadFilter:function(data){return commboboxAddSelectedAllValue(data);},formatter: function (row) {return commboboxFornatter(this,row);},onLoadSuccess: function() {window.query_routecode =(getcomboboxValues(this)).join();$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));},onSelect: function (row) {commboboxSelectEvent(this,row,true,window.query_routecode.split(','));$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));},onUnselect: function (row) {commboboxSelectEvent(this,row,false,[]);$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));}});

3、加载时选中

onLoadSuccess: function() {window.query_routeCode=(getcomboboxValues(this)).join();// 默认设置选中所有setComboboxAllCheckboxStatus(this,true,window.query_routeCode.split(','));$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));},onLoadSuccess : function() {window.query_routeCode= (getcomboboxValues(this)).join();var arr=window.query_routeCode.split(',');var temp=new Array();var children = $(this).combobox("panel").children();$.each(children, function(index, obj) {if (0 < index && index < 4) {obj.firstChild.checked = true;temp.push(arr[index]);}});//将需要选择的temp设置成当前复选框的值$(this).combobox('setValues',temp);$("#query_operType").textbox("setValue",$(this).combobox('getValues'));},onLoadSuccess: function() {//复选框所有能选中的值window.query =(getcomboboxValues(this)).join();var arr=query.split(",");//需要选中的值 如表格选中行修改时获取var selectedRow = $('#mainGrid').datagrid('getChecked')[0];window.querycode=selectedRow.route_code;var children = $(this).combobox("panel").children();$.each(children, function(index, obj) {//遍历所有复选框值 如果在需要选中的范围内将其选中if(window.querycode.indexOf(arr[index])>-1 && arr[index]!=""){obj.firstChild.checked = true;}});$(this).combobox('setValues',window.querycode.split(','));$("#query_roteCode").textbox("setValue",$(this).combobox('getValues'));}