jqgrid - 如何使用单个文本框执行 jqGrid 的客户端过滤

Question

我已阅读此 QA jqGrid filtering on the client-side using "filterToolbar"还有这个triggering client-side filtering at load time in a jqGrid在我发布之前。有没有办法只用一个文本框来过滤客户端的数据？

数据是通过mechanizm内置的grids加载来消费json的，我设置了loadonce:true，现在的问题是如何实现。

这是另一个网格插件的示例 http://datatables.net/release-datatables/examples/basic_init/zero_config.html

问候，斯蒂芬

Answer 1

我正在回答我自己的问题，但要归功于 Oleg(医生，他在我的办公室打电话)，因为是他的指导和对 jqGrid 的深入了解，我才能够完成这个。

这有两个关键，您必须在网格中设置 multipleSearch: true，然后根据您的要求构建适当的过滤器。请参阅末尾的按钮代码以创建过滤器。需要注意的一件事是，在文本框中输入至少 2 个字符之前，我不会执行搜索。

旁注是我将删除按钮并处理文本框的按键事件以执行搜索。

$(document).ready(function () {

var grid = $('#favoriteGrid'),
            decodeErrorMessage = function (jqXHR, textStatus, errorThrown) {
                var html, errorInfo, i, errorText = textStatus + '\n' + errorThrown;
                if (jqXHR.responseText.charAt(0) === '[') {
                    try {
                        errorInfo = $.parseJSON(jqXHR.responseText);
                        errorText = "";
                        for (i = 0; i < errorInfo.length; i++) {
                            if (errorText.length !== 0) {
                                errorText += "<hr/>";
                            }
                            errorText += errorInfo[i].Source + ": " + errorInfo[i].Message;
                        }
                    }
                    catch (e) { }
                } else {
                    html = /<body.*?>([\s\S]*)<\/body>/.exec(jqXHR.responseText);
                    if (html !== null && html.length > 1) {
                        errorText = html[1];
                    }
                }
                return errorText;
            };

grid.jqGrid({
    url: myAjaxUrl,
    datatype: 'json',
    ajaxGridOptions: { contentType: "application/json" },
    jsonReader: { repeatitems: false },
    colNames: ['Qty', 'Features', 'Item Nbr', 'Brand', 'Product', 'Supplier', 'Price', 'UOM', 'Case Pack', 'Remarks', 'Ave Weight', 'Par', 'Sort', 'Last Purchase', 'GLCode', 'ProductId', 'OldProductId', 'CategoryName'],
    colModel: [
            { name: 'Quantity', index: 'Quantity', width: 20, sorttype: "number", editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 15} },
            { name: 'ProductAttributes', index: 'ProductAttributes', width: 50 },
            { name: 'ItemNum', index: 'ItemNum', width: 60, align: "right" },
            { name: 'BrandName', index: 'BrandName', width: 100 },
            { name: 'ProducName', index: 'ProducName', width: 150 },
            { name: 'SupplierName', index: 'SupplierName', width: 100 },
            { name: 'Price', index: 'Price', width: 80, sorttype: "number", align: "right" },
            { name: 'UOM', index: 'UOM', width: 80 },
            { name: 'CasePack', index: 'CasePack', width: 80 },
            { name: 'PackageRemarks', index: 'PackageRemarks', width: 80 },
            { name: 'AveWeight', index: 'AveWeight', width: 80, align: "right" },
            { name: 'Par', index: 'Par', width: 80, align: "right" },
            { name: 'SortPriority', index: 'SortPriority', hidden: true },
            { name: 'LastPurchaseDate', index: 'LastPurchaseDate', width: 80, align: "right" },
            { name: 'GLCode', index: 'GLCode', hidden: true },
            { name: 'ProductId', index: 'ProductId', hidden: true },
            { name: 'OldProductId', index: 'OldProductId', hidden: true },
            { name: 'CategoryName', index: 'CategoryName', hidden: true }
        ],
    pager: $('#favoritePager'),
    pginput: false,
    rowNum: 1000,
    viewrecords: true,
    multiselect: true, // enable multiselct
    gridview: true,
    loadonce: true, // one ajax call per 
    caption: "Products List",
    loadError: function (jqXHR, textStatus, errorThrown) {
        // remove error div if exist
        $('#' + this.id + '_err').remove();
        // insert div with the error description before the grid
        grid.closest('div.ui-jqgrid').before(
                '<div id="' + this.id + '_err" style="max-width:' + this.style.width +
                ';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;"><span class="ui-icon ui-icon-alert" style="float:left; margin-right: .3em;"></span><span style="clear:left">' +
                decodeErrorMessage(jqXHR, textStatus, errorThrown) + '</span></div><div style="clear:left"/></div>')
    },
    loadComplete: function () {
        // remove error div if exist
        $('#' + this.id + '_err').remove();
        // resize the grid both Heigh and Width
        //$("#grid").jqGrid('setGridHeight', Math.min(400, parseInt(jQuery(".ui-jqgrid-btable").css('height')))); // works
        //$(".ui-jqgrid-bdiv").css('height', jQuery("#favoriteGrid").css('height'));
        var gr = jQuery('#favoriteGrid');
        fixGridHeight(gr);
    },
    ondblClickRow: function (rowid, ri, ci) {
        // Popup modal dialog for details view 
    }
}).jqGrid('navGrid', '#favoritePager',
    { add: false, edit: false, del: false, search: true, refresh: false },
    {},
    {},
    {},
    { multipleSearch: true },
    {});


// Add Search
$("#mySearch").button().click(function () {
    var text = $("#searchText").val();
    var postdata = grid.jqGrid('getGridParam', 'postData');
    // build up the filter
    // ['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain']
    // ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
    var myfilter = { groupOp: "OR", rules: [] };        
    myfilter.rules.push({ field: "ItemNum", op: "cn", data: text });
    myfilter.rules.push({ field: "BrandName", op: "cn", data: text });
    myfilter.rules.push({ field: "ProducName", op: "cn", data: text });

    $.extend(postdata, { filters: JSON.stringify(myfilter) });
    grid.jqGrid('setGridParam', { search: text.length > 2, postData: postdata });        
    grid.trigger("reloadGrid", [{ page: 1}]);
});

});