如何使用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

回答

相关问题