jqgrid

Question

我有一个 jqGrid，我想在其中检查单元格数据，并且只检查 post 数据已更改的列。

考虑一下这是我的 colModel

colModel: [{
    name: 'I_PK',
    index: 'u.I_PK',
    align: 'right',
    editable: false,
    sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'ew', 'nc']
}, {
    name: 'W3LabelSelected',
    index: 'u.W3LabelSelected',
    align: 'center',
    width: 170,
    editable: false,
    edittype: 'checkbox',
    formatter: "checkbox",
    search: false,
    formatoptions: {
        disabled: false
    },
    editoptions: {
        value: "1:0"
    }
}, {
    name: 'I_ItemNumID',
    index: 'u.I_ItemNumID',
    align: 'right',
    editable: true,
    editoptions: {
        dataEvents: [{
            type: 'focusin',
            fn: function (e) {
                var elem = e.target;
                setTimeout(function () {
                    elem.select();
                }, 50);
            }
        }]
    }
}, {
    name: 'Quantity',
    index: 'u.Quantity',
    align: 'right',
    editable: true,
    editoptions: {
        dataEvents: [{
            type: 'focusin',
            fn: function (e) {
                var elem = e.target;
                setTimeout(function () {
                    elem.select();
                }, 50);
            }
        }]
    }
}],

在此网格中，我的两个列是可编辑的。现在假设如果我在内联编辑中对任何行的其中一列进行更改，则只有该单元格的值应该被 posted。当前功能 posts 该特定行的所有单元格。这可能吗？

我发现了一些关于此的问题 here and there，但 none 似乎在解决这个特定问题。

基本上我能想到的想法是，在保存之前，如果我能以某种方式将该行所有可编辑单元格的原始数据与posted之前的新值进行比较，我就可以消除数据未更改的单元格，只有 post 已更改的单元格。

示例网格：http://jsfiddle.net/dipenshah8/HJema/203/

Answer 1

我建议您使用内联编辑的 serializeSaveData 回调或旧版本 jqGrid 的 serializeRowData 回调。回调允许您自定义将发送到服务器的数据。修改后的演示http://jsfiddle.net/OlegKi/HJema/206/使用以下选项：

inlineEditing: {
    keys: true,
    serializeSaveData: function (postData) {
        var changedData = {}, prop, p = $(this).jqGrid("getGridParam"),
            idname = p.keyName || p.prmNames.id;

        for (prop in postData) {
            if (postData.hasOwnProperty(prop) &&
                (postData[prop] !== p.savedRow[0][prop] || prop === idname)) {
                changedData[prop] = postData[prop];
            }
        }
        alert(JSON.stringify(changedData));
        return changedData;
    }
}

serializeSaveData回调的代码枚举了默认发送到服务器的所有属性并生成新对象changedData而不是postData。该代码将 postData 的所有属性值与 savedRow[0] 参数的相应值进行比较，其中包含开始编辑之前的行。

UPDATED：如果数据可以有formatter: "date"，上面的代码应该稍微复杂一点。 jqGrid 在 savedRow[0] 中保存 格式化的 值。可以将上面的代码修改为：

inlineEditing: {
    keys: true,
    serializeSaveData: function (postData) {
        var changedData = {}, prop, p = $(this).jqGrid("getGridParam"),
            idname = p.keyName || p.prmNames.id,
            oldValue, cm, formatoptions;

        for (prop in postData) {
            oldValue = p.savedRow[0][prop];
            if (p.iColByName[prop] != null) {
                cm = p.colModel[p.iColByName[prop]];
                formatoptions = cm.formatoptions || {};
                if (cm.formatter === "date" && formatoptions.sendFormatted !== true) {
                    oldValue = $.unformat.date.call(this, oldValue, cm);
                }
            }
            if (postData.hasOwnProperty(prop) &&
                    (postData[prop] !== oldValue || prop === idname)) {
                changedData[prop] = postData[prop];
            }
        }
        alert(JSON.stringify(changedData));
        return changedData;
    }
}

查看修改后的演示http://jsfiddle.net/OlegKi/HJema/209/

jqgrid - 内联编辑，post 仅更改数据

jqgrid - inline editing, post only changed data

javascript

jquery

free-jqgrid