jqGrid加载本地数据实现搜索功能

• html代码

<div class="row" style="margin-left: 25px;">
    <input type="text" id="data_query"  style="width: 300px;" class="query-input-fixed" placeholder="价税合计">
 	是否勾选:
    <select id="ischecked_query"  style="width: 110px;">
         <option value="">==请选择==</option>
         <option value="1">已勾选</option>
         <option value="0">未勾选</option>
     </select>	
	<button type="button" class="btn btn-xs btn-info" onclick="querySearch()">查询</button>
</div>
<div class="row" style="margin-left: 25px;margin-top: 10px;">
     <table id="gridtable_result"></table>
      <div id="gridpager_result"></div>
</div>

var data=
[
	{id：“1”,fpdm：“9521”,fphm：“951”,jshj：“100.00”,ischecked：“0”},
	{id：“2”,fpdm：“9522”,fphm：“952”,jshj：“100.00”,ischecked：“1”},
	{id：“3”,fpdm：“9523”,fphm：“953”,jshj：“100.00”,ischecked：“0”},
	{id：“4”,fpdm：“9524”,fphm：“954”,jshj：“100.00”,ischecked：“1”},
	{id：“5”,fpdm：“9525”,fphm：“955”,jshj：“100.00”,ischecked：“0”}
]
jQuery("#gridtable_result").jqGrid('clearGridData');//清空表格
//数据加载
jQuery("#gridtable_result").jqGrid('setGridParam', {
    datatype: 'local',
    data: data,//newData是符合格式要求的重新加载的数据
    rowNum: data.length,
    // rowList:[15,30,data.length],
    page: 1//哪一页的值
}).trigger("reloadGrid");

var gridSearch = new GridSearch("#gridtable_result",data);//创建实例

jQuery("#gridtable_result").jqGrid({
            data: [],
            datatype: "local",
            postData:{refresh:true},
            mtype: "POST",
            height:"600",
            width:"1293",
            colNames:["编号","发票代码","发票号码","价税合计","是否勾选"],
            colModel:[
                {name:"id",index:"ID",hidden:true,sortable:false},
                {name:"fpdm",index:"fpdm", width: 60,align:"center",sortable:true},
                {name:"fphm",index:"fphm", width: 60,align:"center",sortable:true},
                {name:"jshj",index:"jshj", width: 60,align:"center",sortable:true},
                {name:"ischecked",index:"ischecked", width: 60,align:"center",sortable:true,
                    formatter:function(cellvalue,options,rowobject){
                        if(cellvalue == -1 ){
                            return '<font style="color:green;">已勾选</font>';
                        }else {
                            return '<font >未勾选</font>';
                        }
                    }
                }
            ],
            subGridOptions:{
                plusicon:"ace-icon fa fa-plus center bigger-110 blue",
                minusicon:"ace-icon fa fa-minus center bigger-110 blue",
                openicon:"ace-icon fa fa-chevron-right center orange",
                reloadOnExpand:false
            },
            subGrid : false,
            scroll:false,
            viewrecords:true,
            rowNum:15,
            rowList:[15,30,45],
            pager:"#gridpager_result",
            recordtext: "{0} - {1}条 / 共{2}条",
            emptyrecords: "没有满足条件的数据",
            loadtext: "正在加载...",
            pgtext : "第 {0}页 /共{1}页",
            multiselect:true,
            multiboxonly:true,
            loadComplete : function() {
                fixJqGridUI(this);
            }
});
fixJqGridUI("#gridtable_result");

• 搜索

function querySearch() {
    var query=jQuery("#data_query").val();
     var search_param = new Array(); //用于保存筛选规则
    // 筛选规则需要根据规则函数进行属性设置 rule_name:规则名称，每个规则名称对应一个方法，可以通过select方法查看; 后面的属性选项均为规则对应函数的参数
     search_param.push({rule_name:'vague',str:query,column:'jshj'});//价税合计  查询
     gridSearch.set_search_param(search_param);//提交设置规则
     gridSearch.search();//执行搜索
}

jQuery("#ischecked_query").change(function(){
      var ischecked = jQuery("#ischecked_query").val();
      var search_param = new Array(); //用于保存筛选规则
      // 筛选规则需要根据规则函数进行属性设置 rule_name:规则名称，每个规则名称对应一个方法，可以通过select方法查看; 后面的属性选项均为规则对应函数的参数
      search_param.push({rule_name:'vague',str:ischecked,column:'ischecked'});
      gridSearch.set_search_param(search_param);//提交设置规则
      gridSearch.search();//执行搜索

 });

• 搜索插件

 var GridSearch = function (grid,data) {
     this.grid = jQuery(grid);
     this.search_param = null;
     // this.data = this.grid.jqGrid('getRowData');

     this.data = data;  //此时获取表格所有匹配的
     this.newData=[];
     /**
      * 显示全部行
      */
     this.showAllRow = function() {
         for (var i = 0; i < this.data.length; i++) {
             var result=this.newData.indexOf(this.data[i]);
             if ( result== -1){
                 this.newData.push(this.data[i]);
             }
         }
     };
     //设置筛选参数
     this.set_search_param = function (search_param) {
         this.search_param = search_param;
     };

     //筛选规则
     /*模糊筛选*/
     this.vagueSearch = function (str, column) {
         var re = new RegExp(str, "i");
         for (var i = 0; i < this.data.length; i++) {
             if (re.test(this.data[i][column])) {
                 var result=this.newData.indexOf(this.data[i]);
                 if ( result== -1){
                     this.newData.push(this.data[i]);
                 }
             }
         }
     };
     /*区间查找*/
     this.betweenSearch = function (start, end, column) {
         for (var i = 0; i < this.data.length; i++) {
             if (this.data[i][column] >= start && this.data[i][column] <= end) {
                 var result=this.newData.indexOf(this.data[i]);
                 if ( result== -1){
                     this.newData.push(this.data[i]);
                 }
             }
         }
     };
     /*根据参数选择规则筛选*/
     this.select = function (params) {
         switch (params.rule_name) {
             case 'between':
                 this.betweenSearch(params.start, params.end, params.column);
                 break;
             case 'vague':
                 this.vagueSearch(params.str, params.column);
                 break;
         }
     };
     //执行筛选
     this.search = function () {
         this.newData = [];
         if (this.search_param) {
             if ($.type(this.search_param) == 'array') {
                 for (var i = 0; i < this.search_param.length; i++) {
                     if (this.search_param[i]) {
                         this.select(this.search_param[i]);
                     }else{
                         this.showAllRow();
                     }
                 }
             } else {
                 this.select(this.search_param);
             }
         }else{
             this.showAllRow();
         }
         this.grid.jqGrid('clearGridData');//清空表格
         this.grid.jqGrid('setGridParam',{
             datatype:'local',
             data:this.newData,//newData是符合格式要求的重新加载的数据
             rowNum:15,
             rowList:[15,30,45],
             page:1//哪一页的值
         }).trigger("reloadGrid");
     }
};