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

本文关键字：数据 服务器 JSON 数据网 网格 | 更新日期: 2024-10-19 14:30:00

我想利用jqgrid/inline编辑，并想：

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

我试过了，但没有结果。请参阅此处的jsiddle：

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

http://jsfiddle.net/2Gc7K/

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

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

在代码中，我将所选行设置为内联编辑模式，并保存上一个编辑行（如果存在）

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

用户单击"将当前网格数据保存到服务器"后，将保存当前编辑行（如果存在），然后将网格中的当前数据保存在变量gridData中。之后，可以通过单独的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>）添加到页面并使用pager: "#mypager"选项。

更新：可以将上述代码修改为以下

$("#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));
});
相关文章：