如何修改AJAX調用在jqGrid中呈現之前返回的數據？

Question

背景

我從另一位開發人員那裏找到了一些不完整的工作，涉及顯示搜索結果。他的方法是使用內聯Javascript和jQuery將結果呈現在HTML表格中，如下所示。

我想幹掉的工作，但我寧願寫更少的代碼，並使用jqGrid的，因爲它包括排序功能，並獲得代碼整潔。讓jqGrid顯示結果很容易，但讓空白列中的單選按鈕比我想象的更難。

應用程序中的jqGrid版本是3.7.2。網格需要在左邊有單選按鈕進行選擇，以保持與應用程序的其他部分保持一致。

當我被困

似乎有沒有一種方法來在jqGrid的未綁定列。也就是說，每一列似乎都需要基礎數據中的一個字段。如果您沒有虛擬字段，那麼行數據和列標題會變得不對齊。

我碰到過一個example（請參閱行編輯 - >自定義編輯），它返回JSON與數據中的虛擬字段，然後修改網格數據以插入按鈕。

我的首選是沒有虛擬數據在那裏，因爲它感覺髒 :)我想我的JSON只包括它需要的數據來表示搜索結果。所以我認爲最好在腳本代碼中添加dummy字段，以便將服務器端的代碼保持乾淨。

我想修改jqGrid呈現之前從AJAX調用返回的數據。我已經嘗試連接到loadComplete事件，但是當我修改數據時，它似乎在它已經呈現之後。

我也試着掛在options的ajaxGridOptions字段上的success事件，但似乎完全覆蓋事件和jqGrid不呈現數據。

如何在jqGrid呈現之前修改從Web服務調用返回的數據？

Answer 1

在我以前的答案的解決方案打破了排序，所以我想出了另一種解決方案。

因爲jqGrid沒有提供方便修改數據的鉤子，所以有必要退回一個關卡並掛載到jQuery中。我用我自己的方法替換了$.ajax()方法。首先檢查操作是否由jqGrid啓動，如果是，則填充數據，調用原始jqGrid處理程序，然後將單選按鈕添加到網格。排序仍然有效，數據類型仍然是json，並且沒有手動調用addJSONData，我仍然能夠實現我以前的解決方案所需的。從本質上講，使這個小jQuery黑客讓我可以通過沒有任何jqGrid黑客更加混亂。

// Set up $.ajax() hook for modifying the data before jqGrid receives it 
if (!this._ajaxOverridden) { 
    var oldAjax = $.ajax; 
    $.ajax = function (options) { 
     // Check whether this call is from jqGrid to our web service 
     if (options.url == config.eventSearchUrl && options.success) { 
      // Wrap the success event handler with our own handler that pads the data and creates the radio buttons 
      var oldSuccess = options.success; 
      options.success = function() { 
       thisEventSearchDialog._padData(arguments[0]); 
       oldSuccess.apply(this, arguments); 
       thisEventSearchDialog._createRadioButtons(); 
      } 
     } 
     oldAjax(options); 
    }; 
    this._ajaxOverridden = true; 
} 

Answer 2

我設法弄清楚如何去做。而不是讓jqGrid自動加載數據，需要手動執行請求，然後通過調用addJSONData加載它。

我的jqGrid在標記定義瞭如下：

<fieldset>    
    <div style="display:none" class="searchResults"> 
     <table id="eventSearchDialog-results"> 
     </table> 
     <div id="eventSearchDialog-pager"> 
     </div> 
    </div> 
</fieldset> 

我初始化用下面的代碼網格：

// Initialize the grid 
this._searchResults = this._dialog.find("#eventSearchDialog-results"); 
this._searchResults.jqGrid(
{ 
    datatype: "local", 
    colNames: ['', 'Event Name', 'Event Type', 'Start Date', 'End Date', 'Location', 'Event Country', 'Sports'], 
    colModel: [ 
       { name: 'selector', index: 'selector', width: 30 }, 
        { name: 'EventName', index: 'EventName', formatter: jqgridCellFormatter, width: 150 }, 
       { name: 'EventType', index: 'EventType', formatter: jqgridCellFormatter, width: 120 }, 
       { name: 'StartDate', index: 'StartDate', formatter: jqgridCellFormatter, width: 100 }, 
       { name: 'EndDate', index: 'EndDate', formatter: jqgridCellFormatter, width: 100 }, 
       { name: 'Location', index: 'Location', formatter: jqgridCellFormatter, width: 100 }, 
       { name: 'EventCountry', index: 'EventCountry', formatter: jqgridCellFormatter, width: 100 }, 
       { name: 'Sports', index: 'Sports', formatter: jqgridCellFormatter } 
        ], 
    rowNum: 10, 
    rowList: [10, 20, 30], 
    pager: this._dialog.find("#eventSearchDialog-pager"), 
    pginput: true, 
    sortname: 'EventName', 
    viewrecords: true, 
    sortorder: "asc", 
    hidegrid: false, 
    height: "auto", 
    shrinkToFit: true, 
    width: 630, 
    jsonReader: 
        { 
         page: "pageIndex", 
         total: "pageCount", 
         records: "recordCount", 
         root: "rows", 
         repeatitems: true 
        }, 
    prmNames: 
    { 
     page: "pageIndex", 
     rows: "pageSize", 
     sort: "sortField", 
     order: "sortOrder" 
    } 
} 
); 
// Set the data type to JSON, we don't do this in the options because it will cause a request to occur, 
// but we do need it to be set to JSON so that the calls to addJSONData work later. 
this._searchResults.jqGrid("setGridParam", { datatype: "json" }); 

我從一個jQuery $.ajax()呼叫負載與數據的網格，和在success事件處理程序中，我填充數據，然後使用addJSONData將其加載到jqGrid中。

我的JSON是這樣的：

{ 
    "pageCount":1, 
    "pageIndex":1, 
    "recordCount":2, 
    "rows": 
    [ 
     {"id":3, "cell":["Stevens Event 2", "Commonwealth Games", "03/05/2011", "16/05/2011", "sersdfweqr", "New Zealand", ["Archery"]]}, 
     {"id":4, "cell":["Test - multiple sports", "Other", "01/05/2011", "30/06/2011", "Kobe", "Japan", ["Judo", "Karate", "Motor Sport", "Motorcycling", "Taekwondo"]]} 
    ] 
} 

這是我success處理程序：

success: function (data, textStatus, xhr) { 
    // Pad data for our radio button column that has no corresponding field in the data 
    for (var counter = 0; counter < data.rows.length; counter++) { 
     data.rows[counter].cell.splice(0, 0, null); 
    } 

    thisEventSearchDialog._searchResults[0].addJSONData(data); 
    thisEventSearchDialog._createRadioButtons(); 
}, 

包含需要將假數據用於其單選按鈕的列中的jqGrid的。沒有虛擬數據，行數據與標題不匹配。

Answer 3

這是一個老問題，它可能並不適用於jqGrid的版本中提到（3.7.2），但它似乎與此有關：How to "pre-process" an ajax response before displaying in jqGrid，如果我是正確的（約正確的答案是ajaxGridOption參數的dataFilter參數/函數。它爲我工作。