JqGrid сохраняет данные строки в БД по клику вне сетки

Question

У меня есть JQGrid с 3 столбцами.На данный момент я реализую его так, чтобы он был полностью редактируемой сеткой (где при нажатии на строку она становится редактируемой).Прямо сейчас, чтобы выйти из режима редактирования и сохранить, мне нужно нажать Enter, но мне нужно иметь возможность:

Когда я щелкаю вне сетки в режиме редактирования, чтобы автоматически сохранять выбранные данные строки в БД, нопо-прежнему хотите сохранить сохранить при нажатии кнопки функции все.

Я не знаю, возможно ли это сделать, поэтому у меня есть обе функциональности на 1 сетке.

вот код для jqgrid

  var lastsel;
  jQuery(document).ready(function() {
      jQuery("#list").jqGrid({
              url: '@Url.Action("SellerList")',
              datatype: 'json',
              mtype: 'GET',
              loadonce: true, // to enable sorting on client side
              sortable: true, //to enable sorting
              colNames: ['SellerKey', 'SellerId', 'Navn', 'Email', 'Slet'],
              colModel: [
                  { name: 'id ', index: 'id ', width: 50, key: true, editable: true, editrules: { edithidden: false }, hidden: true },
                  { name: 'SellerId', index: 'SellerId', align: 'center', width: 50, editable: true, editrules: { edithidden: false }, hidden: true },
                  { name: 'Navn', index: 'Navn', width: 200, edittype: 'text', align: 'left', editable: true, sortable: true },
                  { name: 'Email', index: 'Email', width: 300, edittype: 'text', align: 'left', editable: true, sortable: true },
                  { name: 'act', index: 'act', width: 80, align: 'center', sortable: false }],
              loadComplete: function() {
                  jQuery("#list").trigger("reloadGrid"); // Call to fix client-side sorting
              },
              gridComplete: function() {

                  var ids = jQuery("#list").jqGrid('getDataIDs');
                  var gr = jQuery('#list'); gr.setGridHeight('auto', true);
                  for (var i = 0; i < ids.length; i++) {
                      var cl = ids[i];
                     var be = "<a href='#' value='Slet' onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',{reloadAfterSubmit:false, url:'@Url.Action("deleteRow")'}); return false;\">Slet </>";
                      jQuery("#list").jqGrid('setRowData', ids[i], { act: be });
                  }
              },

              onSelectRow: function(id) {
                  if (id && id !== lastsel) {
                      jQuery('#list').jqGrid('restoreRow', lastsel);
                      jQuery('#list').jqGrid('editRow', id, true);
                      lastsel = id;
                  }
              },


              editurl: '@Url.Action("GridSave")',
              rowNum: 100,
              rowList: [5, 10, 20, 50],
              viewrecords: true


          });
      var grid = jQuery("#list"); 
        jQuery("#list").jqGrid('navGrid', "#page", { edit: false, add: false, del: false }, { beforeShowForm: function(form) {
              // "editmodlist"
              var dlgDiv = grid.jqGrid("#delmodlist" + grid[0].id);
              var parentDiv = dlgDiv.parent(); // div#gbox_list
              var dlgWidth = dlgDiv.width();
              var parentWidth = parentDiv.width();
              var dlgHeight = dlgDiv.height();
              var parentHeight = parentDiv.height();
              // TODO: change parentWidth and parentHeight in case of the grid
              //       is larger as the browser window
              dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
              dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
          }});
  }); 

Answer 1

Для сохранения текущей строки редактирования, если вы щелкнете по другой строке сетки, вам нужно просто использовать saveRow вместо restoreRow внутри onSelectRow обработчика событий:

onSelectRow: function (rowid) {
    if (rowid !== lastSel) {
        grid.jqGrid('saveRow', lastSel);
        lastSel = rowid;
    }
    grid.jqGrid('editRow', rowid, true);
    return true;
}

Чтобы сохранить строку, если вы щелкнете куда-нибудь за пределами сетки Я не нашел хорошего решения. Например, в IE9 хорошо работает следующий код:

grid.focusout(function (e) {
    if (e.relatedTarget) {
        var $related = grid.find(e.relatedTarget);
        if ($related.length <= 0 && lastSel) {
            grid.jqGrid('saveRow', lastSel);
        }
    }
});

, где var grid = jQuery("#list"); Смотрите демоверсию здесь . Тот же код не работает в других веб-браузерах. Для IE8 / IE7 e.pageX и e.pageY будут установлены в focusout (но не в IE9), поэтому свойства можно использовать для вычисления положения мыши и определения того, находится ли положение за пределами сетки.

Поэтому я не могу предложить вам хороший способ сохранить строку редактирования при нажатии за пределами сетки.

Answer 2

Я нашел ответ icats полезным, но он работает не во всех ситуациях.

Я бы предложил привязать к $('html'), а не к $('body').Тело может занимать не все видимое пространство в вашем браузере.