Frappe Framework中Web Form子表数据更新客户端脚本适配问题

原Doctype表单的客户端脚本在Web Form环境下可正常获取API数据，但无法更新子表内容，以下是调整后的可用脚本及关键修改说明：

原脚本 #

function updateCateringLimits(frm, responseMessage) {
frappe.call({
    method: 'frappe.wis.doctype.script.get_catering_limits',
    args: {
        buid: frm.doc.buid,
        office_guid: responseMessage[frm.doc.officename]
    },
    callback: function (response) {
        const cateringLimitsObj = response.message;
        const cateringLimits = Object.values(cateringLimitsObj)[0];
        const childTable = frm.doc.catering_limits || [];

        // Clear the child table first
        while (childTable.length) {
            frm.get_field('cateringlimits').grid.remove_row(0);
        }

        // Add the new rows to the child table
        const childTableField = frm.fields_dict['cateringlimits'];
        if (childTableField && childTableField.grid) {
            cateringLimits.forEach(cateringLimit => {
                const newRow = frm.add_child('cateringlimits');
                newRow.minpeople = cateringLimit.minPeople;
                newRow.maxpeople = cateringLimit.maxPeople;
                newRow.cutoff = cateringLimit.cutoffHrs;
            });
        }

        // Refresh the form to show the updated child table
        frm.refresh_field('cateringlimits');
    }
});
}

调整后的脚本 #

function updateCateringLimits(frm, responseMessage) {
frappe.call({
    method: 'frappe.wis.doctype.script.get_catering_limits',
    args: {
        buid: frm.doc.buid,
        office_guid: responseMessage[frm.doc.officename]
    },
    callback: function (response) {
        const cateringLimitsObj = response.message;
        const cateringLimits = Object.values(cateringLimitsObj)[0];
        const childTableField = frm.get_field('cateringlimits');

        // 清空子表：Web Form需直接操作grid的rows而非frm.doc中的数据
        if (childTableField && childTableField.grid) {
            while (childTableField.grid.rows.length > 0) {
                childTableField.grid.remove_row(0);
            }
        }

        // 添加新行：Web Form中add_child后需手动触发行渲染
        if (childTableField && childTableField.grid) {
            cateringLimits.forEach(cateringLimit => {
                const newRow = frm.add_child('cateringlimits');
                newRow.minpeople = cateringLimit.minPeople;
                newRow.maxpeople = cateringLimit.maxPeople;
                newRow.cutoff = cateringLimit.cutoffHrs;
                // 触发行的渲染更新
                childTableField.grid.refresh();
            });
        }

        // 刷新字段并同步到Web Form的UI
        frm.refresh_field('cateringlimits');
        // Web Form需额外触发表单UI的整体更新
        frm.refresh();
    }
});
}

关键调整点 #

• 清空子表逻辑修正：原脚本依赖frm.doc.catering_limits的长度判断，但Web Form中frm.doc的子表数据与UI层的grid rows并非实时同步，改为直接读取childTableField.grid.rows.length来控制删除操作。
• 新增行后触发grid刷新：Web Form中调用add_child后，需要手动调用grid.refresh()来渲染新增的行，否则UI不会显示新添加的数据。
• 添加表单整体刷新：仅刷新字段可能无法让Web Form的UI完全同步，最后调用frm.refresh()确保整个表单的UI更新到位。

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