效果如上图所示
<input id="q_item" name="q_item" style="200px" toolbar='#tb1' class="easyui-combogrid" > <div id="tb1" style="100%" > <input class="easyui-searchbox" data-options="prompt:'项目名称模糊搜索',searcher:doSearchqitem" style="100%"> </div>
function doSearchqitem(value){ getQData(value); } var getQData = function (itemname) { var options = $("#q_item" ).combogrid("grid").datagrid("getPager" ).data("pagination" ).options var page = options.pageNumber; var rows = options.pageSize; $.ajax({ type: "POST", url: "<%=basePath%>mgr/item/getitempagejsonbypcode", data: 'pcode=' + $("#q_unit").combobox('getValue')+'&year='+$("#q_yearsel").combobox('getValue')+'&itemname='+itemname, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); $.messager.progress('close'); }, success: function (data) { var result = eval( '(' + data + ')' ); $('#q_item').combogrid('grid').datagrid('loadData', result);//{ 'total':'30','rows':[{"id":1,"unit":"研发部","name":"郑州电网","year":"2017"}]});//{'id':1,'unit':2323,'name':1212,'year':'2017'}] }); } }); }; //q_Item加载项目 function fillqItemCombogrid(qitemobj,unit,year,itemname) { qitemobj.combogrid({ panelWidth:350, panelHeight:400, idField:'id', //ID字段 textField:'name', //显示的字段 url:'<%=basePath%>mgr/item/getitempagejsonbypcode?pcode=' + unit+'&year='+year+'&itemname='+itemname, fitColumns: true, striped: true, editable:true, pagination : true,//是否分页 rownumbers:true,//序号 collapsible:false,//是否可折叠的 //fit: true,//自动大小 pageSize: 10,//每页显示的记录条数,默认为10 pageList: [10,20,30],//可以设置每页记录条数的列表 method:'post', toolbar:'#tb1', columns:[[ {field:'name',title:'项目名称',100}, {field:'unit',title:'所属单位',100}, {field:'year',title:'项目年代',100} ]], keyHandler: { up: function() {}, down: function() {}, enter: function() {}, query: function(q) { alert(q); //动态搜索 qitemobj.combogrid("grid").datagrid("reload", { 'keyword': q }); qitemobj.combogrid("setValue", q); } } }); }