Question

我开始使用jqGrid中的jQuery插件来渲染漂亮的表，我想只编辑一个列。

当我点击我的可编辑列时，我设法渲染一个文本框出现的表格，但是当编辑单元格时（按下输入后）我无法捕捉到。当我阅读doc时，我想我必须使用 aftersavefunc ，但我不知道它在何处以及如何使用。

你能帮我吗？

Bellow我的例子我想完成。

 var mydata = [{
            name: "Toronto",
            country: "Canada",
            continent: "North America"
        }, {
            name: "New York City",
            country: "USA",
            continent: "North America"
        }, {
            name: "Silicon Valley",
            country: "USA",
            continent: "North America"
        }, {
            name: "Paris",
            country: "France",
            continent: "Europe"
        }]
        
        function edit(id) {
                var table = jQuery(this);
                table.jqGrid('editRow', id,
        {
            keys: true,  
        });
        }
    
    
    $("#grid").jqGrid({
        data: mydata,
        datatype: "local",
        colNames: ["Name", "Country", "Continent"],
        colModel: [{
            name: 'name',
            index: 'name'  
        }, {
            name: 'country',
            index: 'country',
            editable: true,
        }, {
            name: 'continent',
            index: 'continent'    
        }],
        onSelectRow: edit
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.js"></script>
<table id="grid"></table>

Answer 1

例如，您可以指定aftersavefunc以及editRow的其他选项：

table.jqGrid('editRow', id, {
    keys: true,
    url: "myServerUrl", // it's optional
    aftersavefunc: function (rowid) { // can add jqXHR, sentData, options 
        alert(rowid + " is saved");
    }
});

下一个问题：我会严格建议您在用于填充网格的输入数据中添加id属性。 id属性将保存为每行（id）元素的<tr>属性的值，用于回调，并将在编辑时发送到服务器。我建议您也从jqGrid中删除所有index属性，并将选项autoencode: true添加到jqGrid。如果您使用旧的4.6版本，则应添加gridview: true选项以提高网格性能并添加height: "auto"选项。

下一个问题：建议在onSelectRow内保存/放弃以前编辑过的行。您需要致电saveRow或restoreRow。您当前的代码可以生成许多同时编辑的行。用户可能忘记按 Enter 并认为已经修改了行。我建议您至少在inlineNav 添加编辑/保存/取消按钮的导航栏添加到当前代码中。它可以帮助一些用户保存行。

还有一句话。 jqGrid 4.6已经老了。 jqGrid目前有两个主要分支：当前版本4.13.0中的free jqGrid和商业版Guriddo jqGrid JS。两个版本都包含许多新功能，但会有越来越多的不同。我在the post之后开发了关于将jqGrid重命名为Guriddo jqGrid JS并更改许可协议的免费jqGrid。我在相同的许可证（MIT和GPLv2）下提供了免费的jqGrid，就像旧版本的jqGrid（例如4.6）一样。您也可以在CDN中使用它（请参阅the wiki article）。 jqGrid 4.6已经死了。不会修复错误或新功能。你写道，你开始使用jqGrid。在这种情况下，使用旧版本会特别糟糕。

jqGrid如何处理事件在编辑列之后输入密钥感谢editRow？

1 个答案: