由于 editRow，jqGrid 如何在编辑列后处理事件输入键？

Question

我开始使用 jqGrid 中的 jQuery 插件来呈现漂亮的 tables，我只想制作一列 editable。

我设法呈现一个 table 当我点击我的 editable 列时会出现一个文本框，但是我无法捕捉到单元格何时被编辑（输入后已按下）。当我阅读文档时，我想我必须使用 aftersavefunc 但我不知道在哪里以及如何使用它。

你能帮帮我吗？

下面是我想完成的例子。

 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 属性将被保存为每行 (<tr>) 元素的 id 属性的值，用于回调并在编辑时发送到服务器。我建议您也从 jqGrid 中删除所有 index 属性，并将选项 autoencode: true 添加到 jqGrid。如果您使用旧的 4.6 版本，那么您应该添加 gridview: true 选项以提高网格的性能并添加 height: "auto" 选项。

下一个问题：建议save/discard之前编辑过的行在onSelectRow里面。您需要致电 saveRow 或 restoreRow。您当前的代码可以生成许多同时编辑的行。用户可能会忘记按 Enter 并认为行已被修改。我建议您通过 inlineNav 另外至少添加带有 edit/save/cancel 按钮的导航栏到您当前的代码。它可以帮助一些用户保存行。

再多说一句。 jqGrid 4.6 已经很旧了。目前有两个主要的 jqGrid 分支：free jqGrid in the current version 4.13.0 and commercial version Guriddo jqGrid JS. Both versions contains many new features, but there will be more and more different. I develop free jqGrid after the post about renaming jqGrid to Guriddo jqGrid JS and changing the license agreement. I provided free jqGrid under the same licenses (MIT and GPLv2) like old versions of jqGrid (4.6 for example). You can use it from CDNs too (see the wiki article)。 jqGrid 4.6 已经死了。不会开发错误修复或新功能。你写道你开始使用 jqGrid。在这种情况下使用一些旧版本尤其糟糕。

由于 editRow，jqGrid 如何在编辑列后处理事件输入键？

jqGrid how handle event enter key after edit column thanks to editRow?

javascript

jquery

jqgrid