jqgrid在搜索上的動態搜索選項

Question

下面我複製了我的jqGrid並修剪了很多不相關的屬性等，但是下面的基本代碼足以封裝我的問題。

我有一個動態過濾器，在成功返回ajax調用時進行填充。返回的json保存下拉列表（uniqueRunDates）的字符串值和其他值。字符串（uniqueRunDates）使用'setColProp'動態添加到列中。 jgGrid完成後，函數中的下一行代碼將調用網格的重新加載，並且新過濾器將到位。

該過濾器很好，就像靜態（如'JobStatus'）過濾器有一個例外。搜索。

網格有三個搜索（文本框和兩個下拉菜單[one is uniqueRunDates]），可以互換使用。當用戶在文本框中輸入內容時，網格被正確更新，返回的json具有新的唯一日期，並通過'setColProp'添加它們。最後一塊是'reloadGrid'必須被調用。問題是我該怎麼做？

在第一次出現時，執行網格創建後的代碼。當執行搜索時，只執行這個jgGrid代碼。當然，我不能把'reloadGrid'放在成功調用中，因爲這會形成一個循環。我試圖使用工具欄的'afterSearch'屬性，但是當我需要它時似乎並沒有觸發。

我是否正確地處理這個問題？有沒有更簡單的方法來處理這個看似普遍的概念？動態搜索過濾器？非常感謝您提供的任何幫助和/或指導。

$("#gridTable").jqGrid({ 
    async: false, 
    datatype: function (jqGridModel) { 
     $.ajax({ 
      async: false, 
      url: 'Application.aspx/getJqGridData', 
      data: JSON.stringify({ 'rptPath': rptPath, 'jqGridModel': jqGridModel, 'userId': userId }), 
      success: function (data, textStatus, jqXHR) { 
       populateGrid(data); 
       var uniqueRunDates = (JSON.parse(data)).uniqueDates; 

       $("#gridTable").jqGrid('setColProp', 'Run_Date', { 
        stype: 'select', 
        searchoptions: { value: uniqueRunDates, sopt: ['dateEq'] } 
       }); 
      }     
     }); 
    }, 
    colNames: ['', 'Report Name', 'Run Status', 'Run Date', 'Expiring On', 'Category', 'Actions'], 
    colModel: [ 
     { name: 'Run_Date', index: 'RunDate', align: 'center', title: false, sortable: true, width: 40 } 
     { name: 'Report_Name', index: 'ReportNameDisplay', align: 'left', title: false, sortable: true, formatter: reportLinkFormatter }, 
     { name: 'Run_Status', index: 'JobStatus', align: 'left', title: false, sortable: true, width: 50, 
      stype: 'select', 
      searchoptions: { value: ':All Status;Completed:Completed;Failed:Failed;Pending:Pending;No Data Returned:No Data Returned;:Returned' } 
     }, 
    ], 
    pager: jQuery('#gridPager'), 
    rowNum: 15, 
    rowList: [15, 25, 35, 50], 
    sortname: 'RunDate', 
    sortorder: "desc", 
    height: '100%', 
    multiselect: true 
    } 
}); 

//Refresh necessary for the dynamically added 'run date' filter. 
$("#gridTable").trigger("reloadGrid"); 

$('#gridTable').jqGrid('filterToolbar', { 
    stringResult: true 
}); 

。 。 。 。 。

更新 我已更新網格，以遵循以下建議。

我能夠查詢服務器，並返回字符串版本的JSON對象。我也能夠看到'beforeProcessing'方法中的返回值，它看起來不錯。但是網格不再填充。我不確定使用我的返回格式正確設置jsonReader。 data.d = {「total」：2，「page」：1，「records」：25，「rows」：[{「id」：「23」，「cell」：[「0」，「xxx」， 「xxx」，...]} ....]

我在想這是什麼類型沒有排隊......想法？

$("#gridTable").jqGrid({ 
    async: false, 
    url: 'Application.aspx/getJqGridData', 
    ajaxGridOptions: { contentType: "application/json" }, 
    serializeGridData: function (postData) { 
     if (postData.filters == undefined) postData.filters = null; 
     postData.jqGridModel = { page: postData.page, _search: postData._search, rows: postData.rows, 
      sidx: postData.sidx, sord: postData.sord, filters: postData.filters 
     }; 
     postData.rptPath = rptPath; 
     postData.userId = userId; 
     return JSON.stringify(postData); 
    }, 
    contentType: 'application/json; charset=utf-8', 
    datatype: "json", 
    mtype: 'POST', 
    beforeProcessing: function (data) {  
    }, 
    colNames: ['', 'Report Name', 'Run Status', 'Run Date', 'Expiring On', 'Category', 'Actions'], 
    colModel: [ 
     { name: 'Is_Fav', index: 'Favorites', align: 'center', title: false, sortable: false, search: false, width: 5, formatter: favImageFormatter }, 
     { name: 'Report_Name', index: 'ReportNameDisplay', align: 'left', title: false, sortable: true, formatter: reportLinkFormatter }, 
     { name: 'Run_Status', index: 'JobStatus', align: 'left', title: false, sortable: true, width: 50, 
      stype: 'select', 
      searchoptions: { value: ':All Status;Completed:Completed;Failed:Failed;Pending:Pending;No Data Returned:No Data Returned;:Returned' } 
     }, 
     { name: 'Run_Date', index: 'RunDate', align: 'center', title: false, sortable: true, width: 40, 
      selectOptions: { 
       dataUrl: 'Application.aspx/getJqGridData', 
       buildSelect: function (data) { 
        var gData; 
        if (data.hasOwnProperty('d')) gData = data.d; 
        else gData = data; 

        var uniqueRunDates = (JSON.parse(gData)).uniqueDates; 

        var html = '<select>', length = gData.length, i = 0, item; 
        for (; i < length; i++) { 
         item = d[i]; 
         html += '<option value=' + item + '>' + item + '</option>'; 
        } 
        html += '</select>'; 
        return html 
       } 
      } 
     }, 
     { name: 'Expiring_On', index: 'ExpirationDate', align: 'center', title: false, sortable: true, width: 40, search: false }, 
     { name: 'Category', index: 'Category', align: 'left', title: false, sortable: true, width: 80 }, 
     { name: 'Actions', index: '', align: 'left', title: false, sortable: false, width: 25, search: false, formatter: actionsFormatter } 
    ], 
    pager: jQuery('#gridPager'), 
    rowNum: 15, 
    rowList: [15, 25, 35, 50], 
    sortname: 'RunDate', 
    sortorder: "desc", 
    height: '100%', 
    viewrecords: true, 
    sortable: true, 
    jsonReader: { 
     root: "d.rows", 
     page: "d.page", 
     total: "d.total", 
     records: "d.records"    
    }, 
    forceFit: true, 
    multiselect: true, 
    loadError: function (jqXHR, textStatus, errorThrown) { 
     alert(jqXHR.responseText); 
    }, 
    gridComplete: function() { 
     doGridComplete(rptPath); 
    }, 
    beforeSelectRow: function (rowid, event) { 
     // Only allow row selection if the chekbox in the row is clicked 
     var index = $.jgrid.getCellIndex(event.target); 
     if (index == 0) { 
      return true; 
     } 
     return false; 
    }, 
    subGrid: true, 
    subGridRowExpanded: function (subgrid_id, row_id) { 
     getReportDetails(subgrid_id, row_id, rptPath); 
    } 
}); 

$('#gridTable').jqGrid('filterToolbar', { 
    stringResult: true 
}); 

Answer 1

我不知道，我正確理解你需要什麼。

而不是設置value屬性searchoptions您可以使用dataUrl屬性，它使Ajax請求填充選擇選項。 Here和here你可以找到一些代碼示例coudld幫助實現dataUrl。

另外，你應該永遠使用作爲datatype功能只是爲了讓一個jQuery.ajax自稱。 jqGrid有很多選項，如ajaxGridOptions,jsonReader選項，serializeRowData回調等。我建議您閱讀the answer和this one，其中包含您可以下載和測試的圓頂項目。

如果您使用標準的jqGrid機制，並且仍然需要對網格上的數據進行一些修改（如設置一些jqGrid選項），則可以使用beforeProcessing回調。回調beforeProcessing允許更改colModel或任何jqGrid選項之前 jqGrid處理從服務器返回的數據。