Как реализовать живой поиск в плагине jqgrid?

Question

Каков истинный способ реализации фильтрации «keypress» в плагине jqgrid? У меня есть поле ввода текста, и мне нужны результаты фильтрации при нажатии клавиши в этом вводе пользовательскими столбцами jqgrid-table.

Метод filterToolbar добавил поле поиска для каждого столбца, но мне нужно одно глобальное поле поиска для фильтрации тремя настраиваемыми столбцами.

Например:

grid.jqGrid({ 
    url: '/url/to/json', 
    datatype: 'json', 
    loadonce: true, 
    colModel: [ 
     { label: 'Last Modified', name: 'lastModified', width: 15, sorttype: 'date' }, 
     { label: 'Campaign Name', name: 'name', width: 35, sorttype: 'text' }, 
     { label: 'Camp ID', name: 'id', align: 'left', width: 10, sorttype: 'integer' }, 
     { label: 'Advertiser', name: 'advertiser', width: 15, sorttype: 'text' }, 
     { label: 'Status', name: 'status', width: 10, sorttype: 'text' }, 
     { label: 'Flight Dates', name: 'startDate', width: 15, sorttype: 'date' } 
    ], 
    autowidth: true, 
    ... 
}); 

мне нужно жить сортировать таблицу по «имени» и «рекламодатель» атрибуты.

UPD. Я нашел answer, но он не работает в моей таблице jqGrid. Мой код:

var grid = $("#jqGrid"); 

      grid.jqGrid({ 
       url: '/reportingservice/api/cmp/tagCampaignList', 
       datatype: 'json', 
       loadonce: true, 
       colModel: [ 
        { label: 'Last Modified', name: 'lastModified', width: 15, sorttype: 'date', search: false }, 
        { label: 'Campaign Name', name: 'name', width: 35, sorttype: 'text', formatter: urlFormat }, 
        { label: 'Camp ID', name: 'id', align: 'left', width: 10, sorttype: 'integer', search: false }, 
        { label: 'Advertiser', name: 'advertiser', width: 15, sorttype: 'text' }, 
        { label: 'Status', name: 'status', width: 10, sorttype: 'text' }, 
        { label: 'Flight Dates', name: 'flightDates', width: 15, sorttype: 'date', search: false } 
       ], 
       autowidth: true, 
       height: 500, 
       resizable: false, 
       rowNum: 50, 
       groupColumnShow: false, 
       pager: '#jqGridPager', 
       pgtext: '{0}', 
       toolbar: [true, "top"], 
       loadComplete: function() { 
       } 
      }); 

      // live search 
      $('#t_' + $.jgrid.jqID(grid[0].id)) 
       .append($("<div><label for=\"globalSearchText\">Global search in grid for:&nbsp;" + 
        "</label><input id=\"globalSearchText\" type=\"text\"></input>&nbsp;" + 
        "<button id=\"globalSearch\" type=\"button\">Search</button></div>")); 


      $("#globalSearchText").keypress(function (e) { 
       var key = e.charCode || e.keyCode || 0; 
       if (key === $.ui.keyCode.ENTER) { // 13 
        $("#globalSearch").click(); 
       } 
      }); 

      $("#globalSearch").button({ 
       icons: { primary: "ui-icon-search" }, 
       text: false 
      }).click(function() { 
       var rules = [], i, cm, 
        postData = grid.jqGrid("getGridParam", "postData"), 
        colModel = grid.jqGrid("getGridParam", "colModel"), 
        searchText = $("#globalSearchText").val(), 
        l = colModel.length; 

       console.log(searchText); 

       for (i = 0; i < l; i++) { 
        cm = colModel[i]; 
        if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) { 
         rules.push({ 
          field: cm.name, 
          op: "cn", 
          data: searchText 
         }); 
        } 
       } 
       postData.filters = JSON.stringify({ 
        groupOp: "OR", 
        rules: rules 
       }); 
       grid.jqGrid("setGridParam", { search: true }); 
       grid.trigger("reloadGrid", [ 
        {page: 1, current: true} 
       ]); 
       return false; 
      }); 

Answer 1

a. Добавить вход для шаблона:

<input id="globalSearchText" class="x-campaigns-filter" type="text" placeholder="Filter by Name, Status or Advertiser"> 

b. Настройте свои правила фильтрации. search: false для отключения поиска в этом поле.

var grid = $("#jqGrid"); 

grid.jqGrid({ 
    url: '/reportingservice/api/cmp/tagCampaignList', 
    datatype: 'json', 
    loadonce: true, 
    colModel: [ 
     { label: 'Last Modified', name: 'lastModified', width: 15, sorttype: 'date', search: false }, 
     { label: 'Campaign Name', name: 'name', width: 35, sorttype: 'text', formatter: urlFormat }, 
     { label: 'Camp ID', name: 'id', align: 'left', width: 10, sorttype: 'integer', search: false }, 
     { label: 'Advertiser', name: 'advertiser', width: 15, sorttype: 'text' }, 
     { label: 'Status', name: 'status', width: 10, sorttype: 'text' }, 
     { label: 'Flight Dates', name: 'flightDates', width: 15, sorttype: 'date', search: false } 
    ], 
    autowidth: true, 
    height: '100%', 
    resizable: false, 
    rowNum: 50, 
    groupColumnShow: false 
}); 

$("#globalSearchText").keyup(function() { 
    var rules = [], i, cm, 
     postData = grid.jqGrid("getGridParam", "postData"), 
     colModel = grid.jqGrid("getGridParam", "colModel"), 
     searchText = $("#globalSearchText").val(), 
     l = colModel.length; 

    for (i = 0; i < l; i++) { 
     cm = colModel[i]; 
     if (cm.search !== false && (typeof cm.stype === "undefined" || cm.stype === "text")) { 
      rules.push({ 
       field: cm.name, 
       op: "cn", 
       data: searchText 
      }); 
     } 
    } 

    $.extend (postData, { 
     filters: { 
      groupOp: "OR", 
      rules: rules 
     } 
    }); 

    grid.jqGrid("setGridParam", { search: true, postData: postData }); 
    grid.trigger("reloadGrid", [{page: 1, current: true}]); 
    return false; 
});