Sencha ExtJS 6.2：网格单元格对象值编辑实现求助

我之前也碰到过类似的情况，jqGrid默认对嵌套对象的单元格编辑支持不太友好，得手动配置显示和编辑的逻辑才行。结合你的需求，给你梳理一套可行的解决方案：

1. 先配置列的显示格式 #

因为你的Chourly和Cdaily列每个单元格都是对象，jqGrid不知道该显示什么内容，所以要通过formatter指定显示对象里的val值：

colModel: [
    // 其他列配置...
    {
        name: "Chourly",
        formatter: function(cellValue) {
            // 显示对象中的val属性
            return cellValue.val;
        },
        edittype: "text", // 指定编辑器为文本输入框
        editoptions: { size: 10 }
    },
    {
        name: "Cdaily",
        formatter: function(cellValue) {
            return cellValue.val;
        },
        edittype: "text",
        editoptions: { size: 10 }
    }
]

2. 编辑前填充初始值 #

进入编辑模式时，需要把对象里的val值放到输入框中，用beforeEditCell事件来处理：

beforeEditCell: function(rowId, cellName, value, iRow, iCol) {
    // 只处理目标列
    if (cellName === "Chourly" || cellName === "Cdaily") {
        // 获取当前单元格的对象数据
        const cellData = $(this).jqGrid("getCell", rowId, cellName);
        // 把val值填充到编辑框
        $(`#jqGrid_${iRow}_${iCol} input`).val(cellData.val);
    }
}

3. 保存编辑后更新对象数据 #

编辑完成后，要把用户输入的新值更新到对象的val属性里，还可以根据新值重新计算status和color（如果需要的话），用afterSaveCell事件：

afterSaveCell: function(rowId, cellName, newValue, iRow, iCol) {
    if (cellName === "Chourly" || cellName === "Cdaily") {
        // 获取当前行的完整数据
        let rowData = $(this).jqGrid("getRowData", rowId);
        // 更新对象的val值
        rowData[cellName].val = newValue;
        
        // 可选：根据新val值更新status和color
        const numVal = parseInt(newValue);
        if (numVal < 3) {
            rowData[cellName].status = "Low";
            rowData[cellName].color = "#ffff00";
        } else if (numVal >= 3 && numVal < 7) {
            rowData[cellName].status = "Medium";
            rowData[cellName].color = "#ffa500";
        } else {
            rowData[cellName].status = "High";
            rowData[cellName].color = "#ff0000";
        }
        
        // 把更新后的行数据放回表格
        $(this).jqGrid("setRowData", rowId, rowData);
        // 重新渲染单元格，确保显示最新的val值
        $(this).jqGrid("setCell", rowId, cellName, rowData[cellName]);
    }
}

4. 可选：添加输入验证 #

如果需要验证输入的合法性（比如必须是数字），可以用validateedit事件：

validateedit: function(options) {
    if (options.colName === "Chourly" || options.colName === "Cdaily") {
        // 验证输入是否为有效数字
        if (isNaN(parseInt(options.newValue))) {
            alert("请输入有效的数字");
            return false; // 阻止保存
        }
        return true; // 允许保存
    }
    return true;
}

这样配置之后，你就能正常编辑Chourly和Cdaily列的对象数据，并且表格会显示更新后的val值啦。

内容的提问来源于stack exchange，提问作者mpe