如何在 jqGrid 处理之前更改从服务器接收的数据

我想要实现的场景：

• 我从服务器检索一些数据
• 我循环数据并添加/更改某些字段的值
• 数据显示在网格中
• 用户在本地编辑数据
• 完成后，用户将整个网格数据提交到服务器

我如何尝试实现它：

我做了一个 jqGridloadonce:true, editurl:'clientArray'和内联编辑。在loadComplete我循环遍历从服务器接收的数据并添加一些值。外部按钮用于获取网格数据.jqGrid('getGridParam','data')并将其发送到服务器。

loadComplete: function(data){
    for(var i=0; i<data.rows.length; i++){
      var row = data.rows[i];
      grid.jqGrid('setRowData', row.id, {
        missingData: 'someDefaultValue'
      });
    }
}

Problem: The loadComplete当用户更改网格页面或进行搜索时触发事件。这会导致覆盖他编辑的任何数据。我尝试使用beforeProcessing事件代替，但它永远不会触发（编辑：使用本地数据测试时不起作用，但使用 loadonce 时可以）。我在其中找不到任何其他合适的活动文档 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events.

我在中重现了该场景this https://jsfiddle.net/zohalexix/c09fnaca/9/ demo.

问题：我应该如何在从服务器接收到数据后正确修改数据并让用户在本地编辑，而不会在更改页面或搜索时覆盖他的编辑？

注意：我使用的是 free-jqGrid 4.14

一个应该使用beforeProcessing代替loadComplete对从服务器加载的数据进行一些修改。回调非常实用loadonce: true场景，因为从服务器加载数据后只会调用一次。

理解这一点非常重要，即应该尝试减少更改的数量在 HTML 页面的 DOM 上。如果您在 HTML 解析器处理之前更改数据，那么它的工作速度非常快：您更改一个属性，并且只有该属性会被更改。另一方面，在重新计算之后更改 HTML 页面上的一个元素，并且可能会更改all页面上存在的其他元素。例如，您在网格上插入一个元素。然后网格的位置（以及网格的所有其他元素）将发生变化。至少网络浏览器必须验证是否进行了某些更改all所需的现有元素。它是浏览器回流 https://developers.google.com/speed/articles/reflow。如果您在循环中更改 HTML 元素（例如调用setRowData代替loadComplete）那么它实质上降低了 HTML 页面的速度。

再说一点。我建议您使用 JSFiddle 的 Echo 服务（请参阅here http://doc.jsfiddle.net/use/echo.html）来模拟从服务器加载数据。相应的代码可能如下：

var i, data = [], grid = $('#grid');

for(i=0; i<4; i++) {
    data.push({id:i, select1: i%3});
}

grid.jqGrid({
    datatype: "json",
    mtype: "POST",
    url: "/echo/json/",
    postData: {
        json: JSON.stringify(data)
    },
    loadonce: true,
    forceClientSorting: true,
    caption: 'Testing',
    editurl: 'clientArray',
    rowNum: 2,
    rowList: [2, 4],
    pager: true,
    colModel: [
        {name:'select1', label: 'Server status', editable:true, edittype:'select', formatter:'select', template: "integer", editoptions:{
            value:'0:AAA;1:BBB;2:CCC'
        }},
        {name:'select2', label: 'Local status', editable: true, edittype: 'select', formatter:'select', editoptions:{
            value:'0:AAA;1:BBB;2:CCC'
        }},
        {name:'act', template:'actions'}
    ],
    inlineEditing: {
        keys: true
    },
    beforeProcessing: function(data){
        var i;
        for(i=0; i<data.length; i++){
            data[i].select2 = 0;
        }
    }
});

$('#b1').click(function(){
    $('#out').empty()
    var i, gridData = grid.jqGrid('getGridParam','data');
    for(i=0; i<gridData.length; i++){
       out(JSON.stringify(gridData[i]));
    }
});

function out(message){
    $('#out').append('<p>' + message +'</p>');
}

查看修改后的演示https://jsfiddle.net/OlegKi/c09fnaca/8/ https://jsfiddle.net/OlegKi/c09fnaca/8/。我添加了template: "integer"第一列中仅用于演示数据到数字的转换。免费 jqGrid 支持convertOnSave回调（参见维基文章 https://github.com/free-jqgrid/jqGrid/wiki/Editing-of-local-data#the-main-idea-of-the-implementation），这有助于进行某种转换保存期间本地数据。例如定义以下回调（参见线条 https://github.com/free-jqgrid/jqGrid/blob/v4.14.1/js/jquery.fmatter.js#L169-L172的代码）

convertOnSave: function (options) {
    var nData = options.newValue;
    return isNaN(nData) ? nData : parseInt(nData, 10);
}

结果，第一列中使用的数据将转换为数字，而不是将数据保存为字符串。