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




你可能感兴趣的:(jqGrid,开发笔记)