JqGrid前端筛选JqGrid通过隐藏行来实现筛选功能

 前言：

    本帖引用与https://blog.csdn.net/qq122453418/article/details/79157613  叫songfuwang的一个博主，

    因为我的业务是需要在原有的数据上统一做修改，在统一提交到后台接口。所以他的筛选克隆数据的方式并不适用于我，我在他的基础上修改了一下，可以实现在原有的基础上筛选数据，进行修改，提交数据。

    使用JqGrid具体需要导入的包这里我就不贴出了，已经到了搜索功能了想比已经导好了。

正文：

    这个是我使用时候的筛选函数，包含筛选的整个功能，每个方法具体用处有简单的注释，具体可能需要调整一下。

/*
        jqGrid 前端筛选功能
    */
    var GridSearch = function (grid) {

        this.grid = grid;
        this.search_param = null;
        this.r = [];
        this.data = this.grid.jqGrid('getRowData');

        //根据键值删除指定的元素
        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.hideRow = function(rowId) {
            this.grid.setRowData(rowId, null, {
                display : 'none'
            });
        }
        /**
         * 显示行
         */
        this.showRow = function(rowId) {
            this.grid.setRowData(rowId, null, {
                display : ''
            });
        }
        /**
         * 显示全部行
         */
        this.showAllRow = function() {
            for (var i = 0; i < this.data.length; i++) {
                this.showRow(i+1)
            }
        }

        //设置筛选参数
        this.set_search_param = function (search_param) {
            this.search_param = search_param;
        }

        //筛选规则
        /*模糊筛选*/
        this.vagueSearch = function (str, column) {
            var re = new RegExp(str, "i");
            // var is = [];
            for (var i = 0; i < this.data.length; i++) {
                if (re.test(this.data[i][column])) {
                    this.showRow(i+1)
                }else{
                    this.hideRow(i+1);
                }
            }
        }

        /*区间查找*/
        this.betweenSearch = function (start, end, column) {
            // var is = [];
            for (var i = 0; i < this.data.length; i++) {
                if (this.data[i][column] >= start && this.data[i][column] <= end) {
                    this.showRow(i+1)
                }else{
                    this.hideRow(i+1);
                }
            }
        }

        /*根据参数选择规则筛选*/
        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.clearData = function () {
            this.data = [];
        }

        //执行筛选
        this.search = function () {
            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();
            }
        }
    }
           

 整个方法函数使用：

var search_param = new Array(); //用于保存筛选规则
var a = new GridSearch($("#table_project")); //创建实例-传入JqGrid的对象
search_param.push({
                rule_name: 'vague', //筛选方式
                str: rowData[i].value, //筛选值
                column: rowData[i].filed //列名
            });
a.set_search_param(search_param); //提交设置规则
a.search(); //执行搜索