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

Question

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

数据通过内置在mechanizm中的网格加载以消耗json，并且我设置了loadonce：true，现在问题是如何实现。

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

问候为例， 斯蒂芬

Answer 1

我回答我的问题，但归功于奥列格（医生，因为他在叫我办公室），因为这是他对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}]); 
}); 

});