EasyUI中combogrid多选下拉框实现和回写赋值

EasyUI中combogrid多选下拉框实现和回写赋值

今天写代码用到一个combogrid回写多选的问题，搜了几个网页发现屁都搜不到，所以就自己想了一下写出来了，给大家参考一下。

来源单别：<select id="lydb" class="easyui-combogrid" style="height: 21px;width:100px" data-options="multiple:true"></select>

页面在加载时给这个多选下拉框赋值

$(function(){
	loadLydb();
	//这里为了方便测试，375和376暂时是直接写死了，实际中是根据查询得到的
	$('#lydb').combogrid('setValues',['375','376']);
});

下面是复选下拉框的方法

function loadLydb(){
  	$('#lydb').combogrid({
  		panelWidth: 500,
  		idField: 'lydb',
  		textField: 'lydbName',
  		url: appPath + 'IQCLookBoard/getLydbList',
  		mode:'remote',
  		pagination: true,           //是否分页
        rownumbers: true,           //序号
        collapsible: false,         //是否可折叠的
        singleSelect : false,
        checkOnSelect :true,
  		method: 'post',
  		columns: [[
			{field: 'ck' ,checkbox:true},   
	  		{field:'lydb',title:'来源单别编号',width:80},
	  		{field:'lydbName',title:'来源单别名称',width:80},
  		]],
  		queryParams : {
  	  		q : $('#lydb').combogrid('getValue'),
  	  	},
  		 fitColumns: true,
  		 onHidePanel: function () {
             var tempSelectRow = $(this).combogrid("grid").datagrid('getSelected');
             var combgridSelectValue = $(this).combogrid('getValue');
             if (!tempSelectRow || combgridSelectValue != tempSelectRow.lydb) {
                 $(this).combogrid('setValue', '');
             }
         },onShowPanel: function () {
        	 var val = $(this).combogrid('getValues') == "" ? "" : $(this).combogrid('getValues').join();
             $(this).combogrid("grid").datagrid("reload", {q: $(this).combogrid('getValue').join()});
         }, onLoadSuccess: function(){
             var rows = $('#lydb').combogrid('grid').datagrid('getRows');
             var val =  $(this).combogrid('getValues', '');
    		 if(rows.length > 0 && (val == null || val == "" || val == undefined) ){
    			 var v = rows[0].lydb;
    			 $('#lydb').combogrid('setValue',v);
    		 }
          }
	});
}

这样的话页面就会在加载完之后，自动多选刚才赋值的375和376