Как позиционировать новую добавленную строку в jqgrid при использовании reloadAfterSubmit: true - PullRequest
1 голос
/ 20 марта 2012

Я пытался понять это в течение некоторого времени.Кажется, многие другие задавали подобные вопросы, но я пока не смог найти конкретного решения.В любом случае, у меня есть jqgrid, который я использую для большого набора данных.Я выкладываю только 100 записей одновременно из нескольких тысяч записей.Что я хочу сделать, это добавить новую запись.Отправьте его на сервер, который возвращает новый идентификатор записи, а затем сможете извлечь раздел отсортированных данных, в котором находится моя новая добавленная запись, и поместить ее в эту строку в сетке.

Вот мое определение сетки:

$("#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.

У меня уже есть подпрограмма на сервере, которая находит правильный набор записей и может вернуть его.Однако я не знаю, как передать этот новый идентификатор, который я получаю при добавлении, обратно на сервер.

Изучение того, как работает Grid Add, при использовании «reloadAfterSubmit: true» (что мне нужно дляновая запись) кажется, что он фактически делает два вызова на сервер.Первый вызов использует "editurl:" из сетки, который сообщает серверу все новые поля и позволяет мне создать и отправить новый идентификатор.Затем он вызывает сервер во второй раз для получения нового набора записей на этот раз, используя "url:" из сетки, которая просто выбирает первую страницу.

Я думаю, что могу делать то, что хочу, если бы мог толькопередать новый идентификатор, который я получаю от первого вызова, в качестве параметра для второго вызова.Может быть, есть действительно простой способ сделать это, но я новичок в jquery и jqgrid, так что я не понял этого.

1 Ответ

1 голос
/ 03 апреля 2012

ОК, думаю, я понял это и опубликую свои выводы здесь. Может быть, кто-то найдет это полезным. (или, может быть, есть еще лучший способ)

Прежде всего, я добавил новую скрытую область в DOM для хранения возвращенного идентификатора новой добавленной строки.

<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, добавление затем выполняет второй вызов на сервер, используя стандартный триггер ("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 как часть почтовых данных. Затем я могу найти какую страницу, основываясь на всех моих настройках (например, текущих критериях сортировки / фильтрации, количестве элементов на странице и т. Д.), И отправить ее обратно как часть моего ответа JSON вместе с данными сетки. Таким образом, я возвращаю идентификатор для позиционирования, страницу, которая должна отображаться, и все данные сетки, которые должны отображаться на этой странице. Опять же, я включаю эти дополнительные данные в ответ JSON в пользовательских данных примерно так:

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

Эта та же самая процедура работает и для добавления новых записей или для редактирования существующих записей, где порядок сортировки может измениться.

* Примечание: я обнаружил, что это не будет работать, если вы не используете стандартную модель подкачки (поэтому вы не можете использовать функцию прокрутки: 1 в jqgrid) *

Итак, резюмируем окончательные настройки grid и 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
  {}
);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...