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は（the official jqGrid demoに/ "検索テンプレート" "検索" を参照）Advance SearchingでSearching Templatesをサポートしていますが、何の検索はまだありませんテンプレートはToolbar Filteringでサポートされています。

あなたの質問は非常に興味深いです。 the old questionでは、汎用の外部フィルタを使用してサーバーに追加情報を送信する方法について説明しました。この方法はリモートデータの場合には有効ですが、ローカルグリッドまたはloadonce: trueオプションのグリッドで直接使用することはできません。

the demoを作成しました。これは、Toolbar Filteringにフィルタテンプレートを実装する方法と、jqGridにテンプレートを統合する方法を示しています。私はもともとhere提案refreshSerchingToolbar機能を使用実装で

：私は、追加の空の列ヘッダーの上のツールバーを持っているtoolbar: [true, "top"]を使用しました。 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(); 
    } 
});