単一のテキストボックスでjqGridのクライアント側のフィルタリングを実行する方法

Question

投稿前にこのQA jqGrid filtering on the client-side using "filterToolbar"とこの1件を読んだことがあります。triggering client-side filtering at load time in a jqGrid 1つのテキストボックスを使用してクライアント側のデータをフィルタリングする方法はありますか？

データは、jsonを使用するためにmechanizmで構築されたグリッドを介してロードされ、loadonce：trueを設定しました。問題は実装する方法です。ここで

は別のグリッド・プラグインhttp://datatables.net/release-datatables/examples/basic_init/zero_config.html

よろしく、 スティーブン

Answer 1

私は自分の質問に答えるんだけど、彼はで私に呼ばれるようクレジットがオレグ（医師、に行くから一例ですjqGridの指導と深い知識を持っていたので、私はこれを完成できました。

これのキーは2倍です。グリッドにmultipleSearch：trueを設定し、要件に基づいて適切なフィルタを構築する必要があります。フィルタ作成の最後のボタンコードを参照してください。 1つの注意点は、少なくとも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}]); 
}); 

});