easyUI datagrid 模糊查询关键字,不需要和服务器交互.

 
在搜索框中输入查询关键字,datagrid会将不匹配的行以藏掉,下面是主要实现代码.

 

主要是思路就是依次查询各个单元格是否匹配关键字,

然后将不匹配的行索引保存起来,然后对行进行刷新,应用新的css样式即可.

搜索框相关的代码

 //要隐藏的行的索引集合.
    var hideIndexs = new Array();
    $('#ss').searchbox({
        width: 200,
        searcher: function (value) {
            hideIndexs.length = 0;
            if (value == '请输入查询内容') {
                value = '';
            }
            //结束datagrid的编辑.
            endEdit();
            var rows = $('#dg').datagrid('getRows');

            var cols = $('#dg').datagrid('options').columns[0];

            for (var i = rows.length - 1; i >= 0; i--) {
                var row = rows[i];
                var isMatch = false;
                for (var j = 0; j < cols.length; j++) {

                    var pValue = row[cols[j].field];
                    if (pValue == undefined) {
                        continue;
                    }
                    if (pValue.toString().indexOf(value) >= 0) {
                        isMatch = true;
                        break;
                    }
                }
                if (!isMatch)
                    hideIndexs.push(i);
　　　　　　　　　//刷新行,否则不能看到效果.
                $('#dg').datagrid('refreshRow', i);
            }


        },
        prompt: '请输入查询内容'
    });
    function endEdit() {
        var rows = $('#dg').datagrid('getRows');
        for (var i = 0; i < rows.length; i++) {
            $('#dg').datagrid('endEdit', i);
        }
    }

 然后datagrid中需要添加是rowStyler属性,将该行的css属性display设置为none 即可实现.

  rowStyler: function (index, row) {
                if (hideIndexs.indexOf(index)>=0) { return 'background:red; display:none'; }
            },