jqgrid：如何在組合框中定義過濾器預設/模板？

Question

我有一個包含一些數據過濾的jqgrid。我想用一些預定義的過濾器集合/模板來定義組合框。 如果用戶選擇組合框的一個項目，網格應該自動應用組合過濾器。優選地，組合框應該被集成到工具欄或jqGrid的尋呼機中，但是在html頁面中也是可以的。

例如：

  COMBO BOX 
     Item templates  filter parameters 
     ___________ 
     |Expired |  << Timeout = true 
     |Last Week |  << OpenDate between 02/13/2012 and 02/16/2012 
     |Last Month |  << OpenDate between 01/01/2012 and 02/16/2012 
     |......... |  ...... 

在此先感謝您的幫助

Answer 1

jqGrid的支持Searching Templates在Advance Searching（請參閱 「搜索」 在the official jqGrid demo/「搜索模板」），但目前還沒有搜索模板支持Toolbar Filtering。

我覺得你的問題很有意思。我在the old question中描述瞭如何使用通用外部過濾器向服務器發送附加信息。在遠程數據的情況下，這種方式可能很好，但不能直接在本地網格中使用，也不能在loadonce: true選項的網格中使用。

所以我創建了the demo，它顯示瞭如何在Toolbar Filtering中實現過濾器模板以及如何將模板集成到jqGrid中。我以前toolbar: [true, "top"]有更多的空的工具欄列標題以上：

在我使用的refreshSerchingToolbar功能，我原先here建議的執行情況。理解這一點非常重要，refreshSerchingToolbar函數只在過濾器工具欄中填充過濾器可以精確表示的信息。例如，可以在過濾器工具欄中顯示「已關閉」行的過濾器（請參見上圖），但日期「上週」和「上個月」的時間間隔相對應。在這種情況下，網格中的數據將被過濾，但過濾器工具欄的相應字段保持空白。

演示的代碼中最重要的一部分，你可以在下面找到

var $grid = $("#list"), 
    initDate = function (elem) { 
     $(elem).datepicker({ 
      dateFormat: 'dd-M-yy', 
      autoSize: true, 
      changeYear: true, 
      changeMonth: true, 
      showButtonPanel: true, 
      showWeek: true 
     }); 
    }, 
    numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number', editable: true/*, 
     searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }*/}, 
    dateTemplate = {width: 80, align: 'center', sorttype: 'date', 
      formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, editable: true, datefmt: 'd-M-Y', 
      editoptions: { dataInit: initDate }, 
      searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDate }}, 
    yesNoTemplate = {align: 'center', editable: true, formatter: 'checkbox', 
      edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'No'}, 
      stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;true:Yes;false:No' }}, 
    myDefaultSearch = 'cn', 
    getColumnIndex = function (columnIndex) { 
     var cm = this.jqGrid('getGridParam', 'colModel'), i, l = cm.length; 
     for (i = 0; i < l; i++) { 
      if ((cm[i].index || cm[i].name) === columnIndex) { 
       return i; // return the colModel index 
      } 
     } 
     return -1; 
    }, 
    refreshSerchingToolbar = function (myDefaultSearch) { 
     var filters, i, l, rules, rule, iCol, cmi, control, tagName, 
      $this = $(this), 
      postData = $this.jqGrid('getGridParam', 'postData'), 
      cm = $this.jqGrid('getGridParam', 'colModel'); 

     for (i = 0, l = cm.length; i < l; i++) { 
      control = $("#gs_" + $.jgrid.jqID(cm[i].name)); 
      if (control.length > 0) { 
       tagName = control[0].tagName.toUpperCase(); 
       if (tagName === "SELECT") { // && cmi.stype === "select" 
        control.find("option[value='']") 
         .attr('selected', 'selected'); 
       } else if (tagName === "INPUT") { 
        control.val(''); 
       } 
      } 
     } 

     if (typeof (postData.filters) === "string" && 
       typeof (this.ftoolbar) === "boolean" && this.ftoolbar) { 

      filters = $.parseJSON(postData.filters); 
      if (filters && filters.groupOp === "AND" && typeof (filters.groups) === "undefined") { 
       // only in case of advance searching without grouping we import filters in the 
       // searching toolbar 
       rules = filters.rules; 
       for (i = 0, l = rules.length; i < l; i++) { 
        rule = rules[i]; 
        iCol = getColumnIndex.call($this, rule.field); 
        if (iCol >= 0) { 
         cmi = cm[iCol]; 
         control = $("#gs_" + $.jgrid.jqID(cmi.name)); 
         if (control.length > 0 && 
           (((typeof (cmi.searchoptions) === "undefined" || 
           typeof (cmi.searchoptions.sopt) === "undefined") 
           && rule.op === myDefaultSearch) || 
            (typeof (cmi.searchoptions) === "object" && 
             $.isArray(cmi.searchoptions.sopt) && 
             cmi.searchoptions.sopt.length > 0 && 
             cmi.searchoptions.sopt[0] === rule.op))) { 
          tagName = control[0].tagName.toUpperCase(); 
          if (tagName === "SELECT") { // && cmi.stype === "select" 
           control.find("option[value='" + $.jgrid.jqID(rule.data) + "']") 
            .attr('selected', 'selected'); 
          } else if (tagName === "INPUT") { 
           control.val(rule.data); 
          } 
         } 
        } 
       } 
      } 
     } 
    }, 
    templateClosed = { 
     groupOp: "AND", 
     rules: [ 
      { field: "closed", op: "eq", data: "true" } 
     ] 
    }, 
    templateLastWeek = { 
     groupOp: "AND", 
     rules: [ 
      { field: "invdate", op: "ge", "data": "13-Feb-2012" }, 
      { field: "invdate", op: "le", "data": "16-Feb-2012"} 
     ] 
    }, 
    templateLastMonth = { 
     groupOp: "AND", 
     rules: [ 
      { field: "invdate", op: "ge", "data": "16-Jan-2012" }, 
      { field: "invdate", op: "le", "data": "16-Feb-2012"} 
     ] 
    }, 
    myFilterTemplateLabel = 'Filter by Template:&nbsp;', 
    myFilterTemplateNames = ['Closed', 'Last Week', 'Last Month'], 
    myFilterTemplates = [templateClosed, templateLastWeek, templateLastMonth], 
    iTemplate, 
    cTemplates = myFilterTemplateNames.length, 
    templateOptions = '', 
    reloadWithNewFilterTemplate = function() { 
     var iTemplate = parseInt($('#filterTemplates').val(), 10), 
      postData = $grid.jqGrid('getGridParam', 'postData'); 
     if (isNaN(iTemplate)) { 
      $grid.jqGrid('setGridParam', {search: false}); 
     } else if (iTemplate >= 0) { 
      $.extend(postData, { 
       filters: JSON.stringify(myFilterTemplates[iTemplate]) 
      }); 
      $grid.jqGrid('setGridParam', {search: true}); 
     } 
     $grid.trigger('reloadGrid', [{current: true, page: 1}]); 
    }; 

$grid.jqGrid({ 
    ... 
    toolbar: [true, "top"], 
    loadComplete: function() { 
     var $this = $(this); 

     if (typeof (this.ftoolbar) !== "boolean") { 
      // create toolbar if needed 
      $this.jqGrid('filterToolbar', 
       {stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch}); 
     } 
     refreshSerchingToolbar.call(this, myDefaultSearch); 
    } 
}); 
$.extend($.jgrid.search, { 
    multipleSearch: true, 
    multipleGroup: true, 
    recreateFilter: true, 
    closeOnEscape: true, 
    closeAfterSearch: true, 
    overlay: 0, 
    tmplLabel: myFilterTemplateLabel, 
    tmplNames: myFilterTemplateNames, 
    tmplFilters: myFilterTemplates 
}); 
$grid.jqGrid('navGrid', '#pager', {edit: false, add: false, del: false}); 
for (iTemplate = 0; iTemplate < cTemplates; iTemplate++) { 
    templateOptions += '<option value="' + iTemplate + '">' + 
     myFilterTemplateNames[iTemplate] + '</option>'; 
} 
$('#t_' + $.jgrid.jqID($grid[0].id)).append('<label for="filterTemplates">'+ 
    myFilterTemplateLabel + '</label>' + 
    '<select id="filterTemplates"><option value="">Not filtered</option>' + 
    templateOptions + '</select>'); 
$('#filterTemplates').change(reloadWithNewFilterTemplate).keyup(function (e) { 
    // some web browsers like Google Chrome don't fire "change" event 
    // if the select will be "scrolled" by keybord. Moreover some browsers 
    // like Internet Explorer don't change the select option on pressing 
    // of LEFT or RIGHT key. Another web browsers like Google Chrome do this. 
    // We make refrech of the grid in any from the cases. If needed one 
    // could modify the code to reduce unnneded reloading of the grid, 
    // but for the demo with a few local rows it's such optimization 
    // isn't really needed 
    var keyCode = e.keyCode || e.which; 

    if (keyCode === $.ui.keyCode.PAGE_UP || keyCode === $.ui.keyCode.PAGE_DOWN || 
      keyCode === $.ui.keyCode.END || keyCode === $.ui.keyCode.HOME || 
      keyCode === $.ui.keyCode.UP || keyCode === $.ui.keyCode.DOWN || 
      keyCode === $.ui.keyCode.LEFT || keyCode === $.ui.keyCode.RIGHT) { 

     reloadWithNewFilterTemplate(); 
    } 
});