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

Question

我已经在客户端使用"filterToolbar"在我发布之前，这个在jqGrid中加载时触发客户端过滤。是否有办法只使用一个文本框来过滤客户端的数据?

数据通过内置的网格机制来加载以消耗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.*?>([sS]*)</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}]);
});
});