Easyui comboxgrid弹出窗增加搜索功能

最新推荐文章于 2023-04-25 08:43:58 发布

转载最新推荐文章于 2023-04-25 08:43:58 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaogaojian/p/8051413.html

文章标签：

#javascript #ViewUI

本文介绍如何使用 EasyUI 的 combogrid 组件实现项目名称的模糊搜索功能，并展示了具体的 JavaScript 代码实现细节。

效果如上图所示

<input id="q_item" name="q_item" style="width:200px"  toolbar='#tb1'  class="easyui-combogrid" >
<div id="tb1" style="width:100%" >    
<input class="easyui-searchbox" data-options="prompt:'项目名称模糊搜索',searcher:doSearchqitem" style="width: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:'项目名称',width:100},
                    {field:'unit',title:'所属单位',width:100},
                    {field:'year',title:'项目年代',width:100}
                ]],  
                keyHandler: {  
                    up: function() {},  
                    down: function() {},  
                    enter: function() {},  
                    query: function(q) {  alert(q);
                        //动态搜索  
                    	qitemobj.combogrid("grid").datagrid("reload", { 'keyword': q });  
                    	qitemobj.combogrid("setValue", q);  
                    }  
                }  
            });  
}

转载于:https://www.cnblogs.com/zhaogaojian/p/8051413.html