JqG​​rid在点击网格时将行数据保存到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。相同的代码在其他Web浏览器中不起作用。对于IE8 / IE7 e.pageX和e.pageY将在focusout中设置（但不在IE9中），因此属性可用于计算鼠标位置并确定是否位于网格。

所以我无法建议您在网格的外上保存编辑行。

Answer 2

我发现icats的答案很有用，但它并不适用于所有情况。

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