jqGrid 實現純前端篩選（及一次載入全部資料，在前端篩選）

/*jqGrid 前端篩選功能*/function GridSearch(grid){//複製對象this.clone_obj = function(data){var d;if($.type(data) == 'array' ){d = [];            for(i in data){                d[i] = data[i];            }        }else if($.type(data) == 'object'){d = {};            for(i in data){                d[i] = data[i];            }}else{            d = data;        }return d;}//根據索引值刪除指定的元素this.delete_val_by_key = function(keys, arr){for(var j=0,i=0; i<keys.length; i++){arr.splice(keys[i-j], 1);j++;}return arr;}    this.grid = grid;    this.result = [];    this.search_param = null;this.r  = [];    this.data = [];    if(this.data.length == 0){        var data = $(grid).getGridParam('readonlydata');this.data = this.clone_obj(data);    }//console.log(this.data.length);    //初始化result    this.init_result = function(){this.result = this.clone_obj(this.data);    }//初始化 rthis.init_r = function(){this.r = [];}    //設定篩選參數    this.set_search_param = function(search_param){        this.search_param = search_param;    }        //篩選規則    /*模糊篩選*/    this.vagueSearch = function(str, column){this.init_r();        var re = new RegExp(str, "i");// var is = [];        for(var i=0; i<this.result.length; i++){            if(re.test(this.result[i][column])){this.r.push(this.clone_obj(this.result[i]));// is[is.length] = i;            }        }// this.result = this.delete_val_by_key(is, this.result);this.result = this.clone_obj(this.r);    }    /*區間尋找*/    this.betweenSearch = function(start, end, column){this.init_r();// var is = [];        for(var i=0; i<this.result.length; i++){            if(this.result[i][column] >= start && this.result[i][column] <= end){                this.r.push(this.clone_obj(this.result[i]));// is[is.length] = i;            }        }// this.result = this.delete_val_by_key(is, this.result);this.result = this.clone_obj(this.r);    }    /*根據參數選擇規則篩選*/    this.select = function(params){        //var rule_name = params.rule_name;        switch(params.rule_name){            case 'between'://console.log(this.result);                this.betweenSearch(params.start, params.end, params.column);                break;            case 'vague':                this.vagueSearch(params.str, params.column);                break;        }    }    /*清空 result */    this.clearResult = function(){        this.result = [];    }    //執行篩選    this.search = function(){        this.init_result();        this.init_r();        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.select(this.search_param);            }        }        //重新載入資料$('#table_list_1').jqGrid('clearGridData');        $(this.grid).jqGrid('setGridParam',{data:this.result}).trigger('reloadGrid');this.clearResult();this.init_r();    }}

使用說明：

需要在初始化的時候添加一個 readonlydata屬性，值為空白即可，用於儲存載入過來的資料。所有的篩選對該屬性值資料篩選。

使用代碼如下

var search_param = new Array(); //用於儲存篩選規則search_param.push({rule_name:'between',start:start_date,end:end_date,column:'datatime'});//篩選規則需要根據規則函數進行屬性設定 rule_name:規則名稱，每個規則名稱對應一個方法，可以通過select方法查看; 後面的屬性選項均為規則對應函數的參數var a = new GridSearch('#table_list_1');//建立執行個體a.set_search_param(search_param);//提交設定規則a.search();//執行搜尋