jqGrid - 内联编辑 - 检测脏/更改的单元格

Question

有没有使用 jqgrid 的 getChangedCells 的示例 判断数据是否改变的方法？

我在可下载的演示中 grep getChangedCells jqgrid，只能找到函数定义，找不到 getChangedCells 的示例用法。

我想要做的是保存用户的编辑 如果用户单击另一行则生成。但是，我只 如果该行是脏的，则想要提交保存。

提前致谢， ——内特

Answer 1

该行上没有安全脏标志。您可以使用以下事实：在行编辑开始时（在 内联编辑模式）方法editRow 将 editable="1" 属性添加到网格行（ 元素）。后来的方法 saveRow 和 restoreRow 更改属性值为 editable="0"。因此，当前页面中至少处于内联编辑模式一次的行将具有 editable 属性。如果表元素的 id 是“list”，您可以使用 查找编辑的行

$("#list tr[editable]")

。集合元素的 id 是行的 rowid。

如果您在网格中使用分页，则应小心并在更改页面之前保存当前页面上已编辑行的 id。 onPaging 事件可以帮助您。

在我看来，最好、最安全的方法是使用 editRow 或 saveRow 方法（可能您只直接使用 editRow）。在 aftersavefunc 函数内部，您可以将修改行的 id 保存在数组/映射中。这将解决您的问题并保证安全工作。

Answer 2

最后，我设法带来了一段代码来检测我们想要的内容；）

希望那里有jqgrid大师（例如Oleg） ，有足够的时间来审查这段代码并改进它。

示例代码将用于检测具有名为“name”的可编辑字段的网格中更改的数据。如果您想检查更多列中的更改数据，则必须添加与该列关联的变量 after_edit 和 before_edit。

为了获取 onSelectRow 函数中的先前单元格数据，我没有使用 getCell 方法，因为文档中用红色表示：

当您编辑行或
细胞。这将返回单元格内容而不是
输入元素的实际值

通过耻辱，我可以检查文档是否正确:(。
但是，getCell 函数可以正常处理当前单元格数据。

这是代码：

 // Declare variables used for inline edit functionality.
 var last_selected;
 var before_edit_value;
 var after_edit_value;
 $('#grid-id').jqGrid({
...

onSelectRow: function(row_id){
    if(row_id && row_id !== last_selected) {
        /*
         * Determine if the value was changed, if not there is no need to save to server.
         */
         if (typeof(last_selected) != 'undefined') {
            after_edit_value = $('#grid-id tr#' + last_selected + ' .name_column input').val();
         }

        if (before_edit_value != after_edit_value) {
            /*
             * Save row.
             */
            $('#grid-id').jqGrid(
                'saveRow', 
                last_selected, 
                function(response){
                    /* SuccessFunction: Do something with the server response */

                    return true;    
                }, 
                'http://url.to.server-side.script.com/server-side-script.php', 
                {
                    additional_data: 'example: additional string',
                });
            }
            else {
                /*
                 * Restore the row.
                 */
                $('#grid-id').jqGrid('restoreRow', last_selected);
            }

        before_edit_value   = $('#grid-id').jqGrid('getCell', row_id, 'name');
    }   

    last_selected       = row_id;

    /*
     * Edit row.
     */
    $('#grid-id').jqGrid(
        'editRow', 
        row_id, 
        true, 
        function() {/* OnEditFunction */}, 
        function(response) {
        /* SuccessFunction: Do something with the server response */

        return true;

    }, 
    'http://url.to.server-side.script.com/server-side-script.php', 
    {
        additional_data: 'example: additional string',
    }); 
   },
...
});

Answer 3

在我的一个项目中，我执行了以下操作：在编辑行之前，我记住全局变量中的行数据，编辑完成后，只需检查行数据是否已更改。像这样的东西（双击激活编辑模式）：


var beforeEditData;

function onGridDblClickRow(id) {
  if (isRowEditable(id)) {
    beforeEditData = grid.getRowData(id);
    grid.editRow(id, true, null, null, 'clientArray', null, onRowAfterEdit);
    ...
  }
}
function onRowAfterEdit(row) {
  var data = grid.getRowData(row);
  if (!isDataChanged(beforeEditData, data)) {        
    return; // No changes
  }
  ... // Save data here
}
function isDataChanged(before, after){
  ... // Allows tricky logic for dirty data, e.g. one may trim spaces etc.
}

Answer 4

所做的。

视图中

<script type="text/javascript">

var $grid = $("#Grid");
var lastSelection;
var datachanged = false;

function gridInitialised() {
    var headers = $('th>div>:input');
    for (var h = 0; h < headers.length; headers[h++].onclick = (function () { if (datachanged) { $grid.saveRow(lastSelection); datachanged = false; } }));
}

function editRow(id) {
    if (id && id !== lastSelection) {
        if (datachanged) { $grid.saveRow(lastSelection); datachanged = false; }
        $grid.restoreRow(lastSelection);
        $grid.editRow(id, true);
        var inputs = $('#'+id+'>td>:input[class="editable"]');
        for (var i = 0; i < inputs.length; inputs[i++].onchange = (function () { datachanged = true; }));
        lastSelection = id;
    }
}
</script>

@Html.Trirand().JQGrid(Model.Grid, "Grid")

使用 MVC4 和 JQuery，这就是我在模型中的

            Grid.ClientSideEvents.RowSelect = "editRow";
            Grid.ClientSideEvents.GridInitialized = "gridInitialised";

gridInitialized 代码用于处理搜索过滤器的更改。

戴夫

Answer 5

正如 Oleg 在 5（哇）年前提到的 - 我使用了 saveRow 函数并将标志作为 extraparam 传递。

像这样，假设你的“模型”或隐藏列IsDirty在我的情况下：

onSelectRow: function(id) {
                if (id && id !== lastgridsel) {
                    $("#myGrid").saveRow(lastgridsel, false, "clientArray", { IsDirty: "True" });
                    $("#myGrid").editRow(id, true, null, null, "clientArray");
                    lastgridsel = id;
                }
            },

然后循环浏览“保存”单击的行（在我的情况下为外部按钮），大致如下：

$("#gridSaveBtn").on("click", function() {
            var batch = new Array();
            var dataIds = $("#myGrid").jqGrid("getDataIDs");
            for (var i = 0; i < dataIds.length; i++) {
                try {
                    $("#myGrid").jqGrid("saveRow", dataIds[i], false, "clientArray");
                    //get row data
                    var data = $("#myGrid").jqGrid("getRowData", dataIds[i]);
                    if (data["IsDirty"] === "True") {
                        batch.push(data);
                    }
                } catch (ex) {
                    alert(ex.Message);
                    $("#myGrid").jqGrid("restoreRow", dataIds[i]);
                }
            }
        });