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'; }
            },