如何使用reloadAfterSubmit定位到jqgrid中新添加的行：true

我一直在試圖弄清楚這段時間。似乎很多其他人也問過類似的問題，但我還沒有找到具體的解決方案。無論如何，我有一個jqgrid，我正在使用大型數據集。我只在幾千條記錄中每次分頁100條記錄。我想要做的是添加一條新紀錄。將它發送到返回新記錄ID的服務器，然後能夠獲取我新添加的記錄所在的排序數據部分，並將其定位到網格中的那一行。如何使用reloadAfterSubmit定位到jqgrid中新添加的行：true

這裏是我的網格定義：

$("#list1").jqGrid({ 
     url: 'jqgrid.php?cmd=getrecs', 
     editurl: 'jqgrid.php?cmd=editrec', 
     datatype: 'json', 
     colNames:['Branch', 'Description', 'Type', 'Active' ], 
     colModel :[ 
     {name:'rbranch', 
       index:'rbranch', 
       sortable:true, 
       editable:true 
     }, 
     {name:'des', 
       index:'des', 
       sortable:true, 
       editable:true 
     }, 
     {name:'type', 
       index:'type', 
       sortable:true, 
       editable:true 
     }, 
     {name:'status', 
       index:'status', 
       sortable:false, 
       editable:true 
     } 
     ], 
     pager: '#pager1', 
     sortname: 'rbranch', 
     sortorder: 'asc', 
     rowNum: 100, // Only fetch 100 at a time 
     viewrecords: true, 
     scroll: 1, 
     sortable: true, 
     caption: 'Scheduling Resources' 
}); 

$("#list1).navGrid("#pager1", 
     // Turn on the icons 
     {edit:true, 
       add:true, 
       del:true, 
       search:true, 
       refresh:true, 
       refreshstate:'current', 
       view:true 
     }, 
     // Edit dialog parameters 
     {reloadAfterSubmit: false, 
       closeAfterEdit: true 
     }, 
     // Add dialog parameters 
     {reloadAfterSubmit: true, 
       afterSubmit: function (response) { 
        var x = $.parseJSON(response.responseText).userdata.newID; 
        alert(x); 
        return [true, '', "Saved"]; 
       }, 
       closeAfterAdd: true 
     }, 
     // Delete dialog parameters 
     {reloadAfterSubmit: false}, 
     // Search dialog parameters 
     {}, 
     // View dialog parameters 
     {} 
);

使用afterSubmit我可以通過JSON返回它獲得新創建的ID值。

我已經找到正確的記錄集並可以返回它的服務器上的例程。但是，我對如何將這個新的ID加回到服務器上感到茫然。

如果使用「reloadAfterSubmit：true」（我需要使用新記錄）檢查Grid Add的工作方式，它實際上會對服務器進行兩次調用。第一次調用使用網格中的「editurl：」，它告訴服務器所有新的字段，並讓我創建併發送新的ID。然後它再次調用服務器，以便使用來自剛剛獲取第一頁的網格中的「url：」獲取新的記錄集。

我想我可以做我想做的事，如果我只能將第一次調用的新ID作爲參數傳遞給第二次調用。也許有一個真正簡單的方法來做到這一點，但我是jquery和jqgrid的新手，所以沒有想到這一點。

來源

2012-03-19 Todd R

好吧，我想我已經想通了，並會在這裏發表我的發現。也許有人會發現它有幫助。（或許還有更好的辦法）

首先，我在DOM中添加了一個新的隱藏區域來存儲新添加的行的返回ID。

<div id="extraData" style="display:none;"> 
    <input type="text" id="gotoID"/> 
</div>

然後在下面的附加部分navGrid定義我添加了這些設置：

reloadAfterSubmit: true, 
afterSubmit: function (response) { 
    var id = $.parseJSON(response.responseText).userdata.newID; 
    $("#gotoID").val(id); 
    return [true, '', "Saved"]; 
},

當添加第一個呼叫服務器併發送添加我創建記錄並返回該記錄數據newID作爲JSON響應的一部分。看起來像這樣：

{ 
    "userdata": { 
     "type": "success", 
     "newID": "36137" 
    } 
}

上面定義的afterSubmit函數將把它存儲在DOM中。因爲我有reloadAfterSubmit：true，那麼add會使用標準觸發器（「reloadGrid」）對服務器進行第二次調用。

在這裏，我不得不修改我的jqGrid有以下幾點：

// This will send the stored gotoID if set to the server 
postData: {gotoID: function() {return $('#gotoID').val();}}, 
// This allows the grid to scroll selected row into view 
scrollrows: true, 
loadComplete: function(){ 
    var userdata = jQuery("#list1").getGridParam('userData'); 

    // Blank out the gotoID holder 
    $("#gotoID").val(''); 

    // This is the returned ID to position to 
    if (userdata.selId) { 
     // You need to unselect any selected rows 
     jQuery("#list1").resetSelection(); 
     // Here I reset the page to be the newly determined page 
     $("#list1").jqGrid('setGridParam',{ page: userdata.page }); 
     jQuery("#list1").setSelection(userdata.selId, true); 
    } 
    }

所以到服務器的後續調用發生的事情是它發出的gotoID作爲POST數據的一部分。然後，我可以根據我的所有設置（如當前的排序/篩選條件，每頁的項目數量等）查找哪個頁面，並將其作爲我的JSON響應的一部分與網格數據一起發回。因此，我找回要放置的ID，要顯示的頁面以及要在該頁面上顯示的所有網格數據。同樣，我包括在用戶數據是這樣的JSON響應這些額外的數據：兩個添加新記錄或編輯現有記錄中，其中排序順序可能改變

{ 
    "userdata": { 
     "type": "success", 
     "page": "76", 
     "selId": "36137", 
     "records": "12618" 
    }, 
    "rows": [ 
     <this is your grid data>.... 
    ] 
}

同樣的日常工作。

* 注：我發現，除非你使用的是標準的翻頁模式，這將無法正常工作（所以你不能使用滾動：在jqGrid的1個功能）*

所以，作爲一個回顧這裏是最終的網格和navGrid設置：

$("#list1").jqGrid({ 
    url: 'jqgrid.php?cmd=getrecs', 
    editurl: 'jqgrid.php?cmd=editrec', 
    datatype: 'json', 
    colNames:['Branch', 'Description', 'Type', 'Active' ], 
    colModel :[ 
    {name:'rbranch', 
      index:'rbranch', 
      sortable:true, 
      editable:true 
    }, 
    {name:'des', 
      index:'des', 
      sortable:true, 
      editable:true 
    }, 
    {name:'type', 
      index:'type', 
      sortable:true, 
      editable:true 
    }, 
    {name:'status', 
      index:'status', 
      sortable:false, 
      editable:true 
    } 
    ], 
    pager: '#pager1', 
    sortname: 'rbranch', 
    sortorder: 'asc', 
    rowNum: 100, // Only fetch 100 at a time 
    viewrecords: true, 
    // This will send the stored gotoID if set to the server 
    postData: {gotoID: function() {return $('#gotoID').val();}}, 
    // This allows the grid to scroll selected row into view 
    scrollrows: true, 
    loadComplete: function(){ 
     var userdata = jQuery("#list1").getGridParam('userData'); 

     // Blank out the gotoID holder 
     $("#gotoID").val(''); 

     // This is the returned ID to position to 
     if (userdata.selId) { 
      // You need to unselect any selected rows 
      jQuery("#list1").resetSelection(); 
      // Here I reset the page to be the newly determined page 
      $("#list1").jqGrid('setGridParam',{ page: userdata.page }); 
      jQuery("#list1").setSelection(userdata.selId, true); 
     } 
    }, 
    sortable: true, 
    caption: 'Scheduling Resources' 
}); 

$("#list1).navGrid("#pager1", 
    // Turn on the icons 
    {edit:true, 
      add:true, 
      del:true, 
      search:true, 
      refresh:true, 
      refreshstate:'current', 
      view:true 
    }, 
    // Edit dialog parameters 
    {reloadAfterSubmit: true, 
      afterSubmit: function (response) { 
       var id = $("list1").getGridParam('selrow'); 
       $("#gotoID").val(id); 
       return [true, '', "Saved"]; 
      }, 
      closeAfterEdit: true 
    }, 
    // Add dialog parameters 
    {reloadAfterSubmit: true, 
      afterSubmit: function (response) { 
       var id = $.parseJSON(response.responseText).userdata.newID; 
       $("#gotoID").val(id); 
       return [true, '', "Saved"]; 
      }, 
      closeAfterAdd: true 
    }, 
    // Delete dialog parameters 
    {reloadAfterSubmit: false}, 
    // Search dialog parameters 
    {}, 
    // View dialog parameters 
    {} 
);

來源

2012-04-02 21:10:23

如何使用reloadAfterSubmit定位到jqgrid中新添加的行：true

回答

相關問題