Free JQGrid - 添加第二行时，inlineNav 中的保存按钮不起作用答案

【问题标题】：Free JQGrid - save-button in inlineNav not working when adding a second rowFree JQGrid - 添加第二行时，inlineNav 中的保存按钮不起作用
【发布时间】：2017-01-30 12:44:12
【问题描述】：

我们有几个免费的 JQGrid，但在添加新行时遇到了问题。单击 inlineNav (ADD) 中的图标将显示一个新行，第一次单击 SAVE-Icon 可以正常工作。但是当添加第二行时，inlineNav 中的保存按钮将不起作用。行中的 Enter 键有效。重新加载整个网格后，它只会再次工作。

以下是网格的代码

一些默认值：

jQuery.extend($.jgrid.defaults,{
    autowidth: true, pager:true, pgbuttons:false, pginput:false,  
    pgtext:false, datatype: "json", mtype: "POST",    
    rownumbers:true,  rowNum:9999,      
    postData: {"savestate_encrypted" : function() {return $("input[name='savestate_encrypted']").val();}},

    ondblClickRow: function (rowid, status, e) {
           var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow");
           if (savedRow.length > 0 && savedRow[0].id !== rowid) {
               $self.jqGrid("restoreRow", savedRow[0].id);
           }
           $self.jqGrid("editRow", rowid, { focusField: e.target });
       },
});

网格本身：

jQuery("#grid").jqGrid({
        url:"....",
        jsonReader: {root: "resourceList"},
        height: 500,
        cmTemplate: { editable: true},
        inlineEditing: {keys: true},
        editurl: "....",
        colModel:[ //Define Table Columns
                {name: "name", label:"Name", key:true, hidden:false},
                {name: "activeJobs",  label:"aktive Jobs", width:250}
        ],
    }).jqGrid("navGrid",   {refresh:true, edit:false, del:true, search:false, add:false}) 
      .jqGrid("inlineNav", {save:true, edit:true, add:true})                             
</script>

我发现网格源中的第 15300 行（抱歉不知道如何找到分支版本 - 2017 年 1 月 30 日）将在单击按钮时将“var ind”设置为 false，按回车键效果很好

    var tmp = {}, tmp2 = {}, postData = {}, editable, k, fr, resp, cv, savedRow, ind = $self.jqGrid("getInd", rowid, true), $tr = $(ind),
        opers = p.prmNames, errcap = getRes("errors.errcap"), bClose = getRes("edit.bClose"), isRemoteSave, isError,
        displayErrorMessage = function (text, relativeElem)....

作为一种快速解决方案，我想订阅一个事件并重新加载整个网格。但是 subscribe() 似乎消失了（我们正在从旧的 struts-tag 网格切换到 javascript。我认为 bind 现在是正确的方式，但是哪个事件呢？

添加---------------

我创建了一个工作代码，它会在没有 Ajax 和 Json 的情况下显示类似的问题。单击添加时，输入值，然后在内联导航栏中选择保存，一切正常，但再次按添加，输入值，然后选择保存，编辑模式将保持打开状态。如果您使用 Enter-Key 而不是 SAVE-btn，它将起作用。

<!DOCTYPE html>
<html lang="de"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.jqgrid.src.js"></script>
    <link rel="stylesheet" href="js/jquery-ui.min.css">
    <link rel="stylesheet" href="js/ui.jqgrid.min.css">
</head>



<script type="text/javascript">
/* DEFAULTS */
jQuery.extend($.jgrid.defaults,{
    autowidth: true,    // nutzt die ganze verfügbare Breite
    pager:true,         // Fusszeile -
    pgbuttons:false,    // - ohne Seitenkontrollbuttons
    pginput:false,      // - ohne Eingabefeld
    pgtext:false,       // - ohne Text
    rownumbers:true,    // immer Zeilennummern
    rowNum:9999,        // bis zu 9999 Zeilen

    ondblClickRow: function (rowid, status, e) {
           var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow");
           if (savedRow.length > 0 && savedRow[0].id !== rowid) {
               $self.jqGrid("restoreRow", savedRow[0].id);
           }
           $self.jqGrid("editRow", rowid, { focusField: e.target });
       },
});



// For JSON Response
/* jQuery.extend($.jgrid.inlineEdit,{
    restoreAfterError:false,
    errorfunc: function( response ) 
    { 
        var resp = response;
        alert("error7"); 
        return false; 
    },
   successfunc: function( response ) 
   {
        var resp = response;
        var hasNoError = true;
//      var hasNoError = (resp.responseJSON.actionErrors.length == 0); 
        return hasNoError;
    }
});
 */

function dataset() {
    "use strict";
    var mydata2 = [
            { id: "10",  name: "test"  , value: "5"},
            { id: "20",  name: "test20", value: "5"},
            { id: "30",  name: "test30", value: "5"},
            { id: "40",  name: "test40", value: "5"},
            { id: "50",  name: "test50", value: "5"},
        ];
   return mydata2;
};
</script>



<body>
    <table id="grid"></table>
    <script type="text/javascript">
        jQuery("#grid").jqGrid({
                data: dataset(),
                colModel: [
                    { name: "id", label:"ID"},
                    { name: "name", label:"NAME", align: "center" },
                    { name: "value", label:"VALUE", align: "center" }
                ],
                cmTemplate: { editable: true, autoResizable: true },
            }).jqGrid("navGrid",   {refresh:true, edit:false, del:true, search:false, add:false}) 
              .jqGrid("inlineNav", {save:true, edit:true, add:true})                             
    </script>
</body></html>

【问题讨论】：

Gruß nach 汉诺威安德烈亚斯！请发布确切的代码，如果您在免费的 jqGrid 中发现错误，我可以使用它来重现问题。 var ind = false; 的设置可能不是一个解决方案，因为ind 应初始化为编辑<tr> 的DOM 元素。对于inlineNav，我无法重现添加多行的任何问题。如果确实存在某些错误，至少在某些情况下，那么修复它会很好。
Danke -Gruss zurück :-) 我将修改一个免费的 JQGrid 示例并尝试重现该错误。一个想法：我们使用 JQuery 3.3.1 - 所有示例都有 2.x 或 1.x 版本，但等到明天 - 我必须修复一个生产错误:-(
免费 jqGrid 支持 jQuery 3.3.1 的 case。例如尝试the demo。它使用inlineNav 和formatter: "actions" 通过navGrid 进行内联编辑和表单编辑。它使用版本 4.13.6。你能重现演示中的任何问题吗？
嗨 Oleg，我在上面添加了一个小型工作示例 - 它显示了一个类似的问题...
我仍然无法重现任何问题。 The demo 将您的代码与免费的 jqGrid 4.13.6 一起使用，another one 使用来自 GitHub 的免费 jqGrid 的最新代码。我可以插入多行并毫无问题地保存数据。我可以验证来自id 列的数据将另外用作rowid。您能否描述重现问题的确切测试用例，包括您在测试中使用的 Web 浏览器？我在 Chrome 和 IE11 中尝试了两个演示，都没有发现任何问题。

标签： javascript jquery free-jqgrid

【解决方案1】：

如果我正确理解您的问题，那么您希望在保存后重新加载网格。你可以使用jqGridInlineAfterSaveRow事件来达到目的：

jQuery("#grid").on("jqGridInlineAfterSaveRow", function () {
    setTimeout(function () {
        jQuery("#grid").trigger("reloadGrid");
    }, 0);
});

【讨论】：