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

Question

我想要实现的目标的场景:

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

我如何尝试实现它:

我用 loadonce:true、editurl:'clientArray' 和内联编辑制作了一个 jqGrid。在 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'
      });
    }
}

问题:当用户更改网格页面或进行搜索时，将触发 loadComplete 事件。这会导致覆盖他编辑的任何数据。我尝试使用 beforeProcessing 事件来代替，但它永远不会触发(编辑:在使用本地数据进行测试时它不起作用，但可以使用 loadonce)。我在 documentation 中找不到任何其他合适的事件.

我在 this 中重现了该场景演示。

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

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

Answer 1

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

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

再补充一点。我建议您使用 JSFiddle 的 Echo 服务(参见 here )来模拟从服务器加载数据。相应的代码可能如下:

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/ 。我在第一列中添加了 template: "integer" 只是为了演示数据到数字的转换。免费 jqGrid 支持 convertOnSave 回调(请参阅 the wiki article )，这有助于在保存本地数据期间进行某种转换。例如定义以下回调(请参阅代码的 the lines)

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

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