JqG​​rid sava 行数据在单击网格时发送到 DB

Question

我有一个 3 列的 JQGrid。目前我已经实现了它，以便它是一个完全可编辑的网格（当你点击一行时，它会变得可编辑）。现在要离开编辑模式并保存我必须按回车，但我需要的是有可能：

当我在编辑模式下单击网格外以将我选择的行数据自动保存到数据库时，但我仍然希望在输入单击按钮功能时保持保存。

我不知道是否有可能实现，所以我在 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

如果您单击网格的另一行，要保存当前编辑行，您只需在 onSelectRow 事件处理程序中使用 saveRow 而不是 restoreRow：

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"); 请参阅演示 here。相同的代码在其他网络浏览器中不起作用。对于IE8/IE7，e.pageX和e.pageY会在focusout中设置（但在IE9中没有），所以可以通过属性来计算鼠标的位置，判断鼠标位置是否在网格之外。

所以我无法建议您在单击网格外部时保存编辑行的任何好方法。

Answer 2

我发现 icats 的答案很有用，但并非在所有情况下都有效。

我建议绑定到$('html') 而不是$('body')。正文可能不会占用浏览器中的所有可见空间。