Question

我一直试图解决这个问题。似乎很多人都提出了类似的问题，但我还没有找到具体的解决方案。无论如何，我有一个jqgrid，我正在大型数据集上使用。我只是在几千条记录中一次分页100条记录。我想要做的是添加一条新记录。将其发送到返回新记录ID的服务器，然后能够获取新添加的记录所在的已排序数据部分，并定位到网格中的该行。

这是我的网格定义：

$("#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”（我需要使用我的新记录），检查网格添加的工作原理，它实际上会对服务器进行两次调用。第一个调用使用网格中的“editurl：”，它告诉服务器所有新字段，并让我创建并发回新ID。然后它再次调用服务器来获取新的记录集，这次使用“url：”从网格中获取第一页。

如果我只能将第一次调用时获得的新ID作为参数传递给第二次调用，我认为我可以做我想要的。也许有一个真正简单的方法来做到这一点，但我是jquery和jqgrid的新手，所以没有想到这一点。

Answer 1

好的，我想我想出来了，并会在这里发布我的发现。也许有人会发现它有用。（或者可能有更好的方式）

首先，我在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"];
},

当add首先调用服务器并发送要添加的记录数据时，我创建记录并返回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，要显示的页面以及要在该页面上显示的所有网格数据。同样，我在userdata中的JSON响应中包含这些附加数据，如下所示：

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

这个例程适用于添加新记录或编辑排序顺序可能发生变化的现有记录。

* 注意：我发现除非您使用标准分页模型（因此您不能使用jqgrid的scroll：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
  {}
);

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

1 个答案: