将数据从数据网格发布到服务器 (JSON)

Question

我想使用 jqgrid / 内联编辑并希望：

• 内联编辑数据
• 完成后，用户点击保存并将（更改的）数据行发送到服务器

我试过了，但没有结果。请在此处查看 jsiddle：

<script type="text/javascript">
        function postAllGridData() {
        // TODO : JSON request to server + reload grid
        alert('code here');
    }
</script>

http://jsfiddle.net/2Gc7K/

Answer 1

我将您的代码修改为：http://jsfiddle.net/OlegKi/2Gc7K/2/。

在代码中，我将选定的行设置为内联编辑模式并保存以前的编辑行（如果存在）

onSelectRow: function (rowid) {
    if (rowid && rowid !== lastSel) { 
        $(this).jqGrid("saveRow", lastSel); 
        lastSel = rowid; 
    }
    $(this).jqGrid("editRow", rowid, true); 
}

用户点击“将当前网格数据保存到服务器”后，当前编辑行（如果存在）将被保存，然后网格中的当前数据将保存在变量@987654327中@。之后，可以通过单独的 jQuery.ajax 调用将数据发送到服务器。以最简单的方式，我使用 JSON.stringify 将对象序列化为 JSON 字符串，并显示了与 alert 相关的结果：

$("#postAllGridData").click(function () {
    var gridData;
    $grid.jqGrid("saveRow", lastSel)
    gridData = $grid.jqGrid("getGridParam", "data");
    alert("data:\n" + JSON.stringify(gridData));
});

我使用了rowNum: 10000。这样就不会使用数据的本地分页。即使使用本地分页，代码也将以相同的方式工作。在这种情况下，只需将 rowNum 的值指定为行数并添加顶部寻呼机（通过添加 toppager: true 选项）或将空 <div>（如 <div id="mypager"></div>）添加到页面并使用 @987654336 @ 选项。

已更新：可以将上面的代码修改为以下

$("#postAllGridData").click(function () {
    var gridData,
        // get ids of edited rows
        editedRows = $.map($grid.find(">tbody>tr[editable]"),
                           function(elem){
                               return $(elem).attr("id");
                           });
    $grid.jqGrid("saveRow", lastSel);
    alert("data:\n" + JSON.stringify(editedRows));
    // get data of edited rows
    gridData = $.grep($grid.jqGrid("getGridParam", "data"), function(row) {
        return $.inArray(row.id, editedRows) >= 0;
    });
    alert("data:\n" + JSON.stringify(gridData));
});

（请参阅http://jsfiddle.net/OlegKi/2Gc7K/5/）。我使用jQuery.map 获取已编辑（甚至未更改）的行的ID，并使用jQuery.grep 将data 过滤到已编辑的行。

最常见的代码是

$("#postAllGridData").click(function () {
    var gridData, indexes = $grid.jqGrid("getGridParam", "_index"),
        idPrefix = $grid.jqGrid("getGridParam", "idPrefix"),
        // get ids of edited rows
        indexesOfEditedRows = $.map($grid.find(">tbody>tr[editable]"),
                                    function(elem) {
                                        return indexes[$.jgrid.stripPref(idPrefix, $(elem).attr("id"))];
                                    });
    // get data of edited rows
    gridData = $.grep($grid.jqGrid("getGridParam", "data"), function(row, i) {
        return $.inArray(i, indexesOfEditedRows) >= 0;
    });
    alert("data:\n" + JSON.stringify(gridData));
});

（请参阅http://jsfiddle.net/OlegKi/2Gc7K/10/）。因为我们仍然使用editable 属性的存在来过滤数据，所以该方法仅在在一页上显示所有行的情况下才有效，这一点很重要。在分页的情况下，必须先在当前页面上保存已编辑行的 ID 或索引，然后才能转到另一页面。在这种情况下可以使用onPaging 回调。结果我们得到了演示http://jsfiddle.net/OlegKi/2Gc7K/13/，代码如下

var lastSel, indexesOfOldEditedRows = [], $grid = $("#list4");

$grid.jqGrid({
    ...
    onPaging: function () {
        var $self = $(this),
            indexes = $grid.jqGrid("getGridParam", "_index"),
            idPrefix = $grid.jqGrid("getGridParam", "idPrefix"),
            indexesOfEditedRows;
        $self.jqGrid("saveRow", lastSel); 
        indexesOfEditedRows = $.map($self.find(">tbody>tr[editable]"),
                                    function(elem) {
                                        return indexes[$.jgrid.stripPref(idPrefix,
                                                                         $(elem).attr("id"))];
                                    });
        $.merge(indexesOfOldEditedRows, indexesOfEditedRows);
    }
});


$("#postAllGridData").click(function () {
    var gridData, indexes = $grid.jqGrid("getGridParam", "_index"),
        idPrefix = $grid.jqGrid("getGridParam", "idPrefix"),
        indexesOfEditedRows;
        // get ids of edited rows
    $grid.jqGrid("saveRow", lastSel);
    indexesOfEditedRows = $.map($grid.find(">tbody>tr[editable]"),
                                function(elem) {
                                    return indexes[$.jgrid.stripPref(idPrefix, $(elem).attr("id"))];
                                });
    $.merge(indexesOfOldEditedRows, indexesOfEditedRows);
    // get data of edited rows
    gridData = $.grep($grid.jqGrid("getGridParam", "data"), function(row, i) {
        return $.inArray(i, indexesOfOldEditedRows) >= 0;
    });
    alert("data:\n" + JSON.stringify(gridData));
});