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);
    }
	
	//初始化 r
	this.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属性,值为空即可,用于保存加载过来的数据。所有的筛选对该属性值数据筛选。

使用代码如下

$("#table_list_1").jqGrid({
	datatype: "local",
	readonlydata: [], //这个属性必须
	height: 'auto',
	autowidth: true,
	shrinkToFit: true
	/** 其他配置省略 **/
)}

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();//执行搜索




  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值