子表值动态表格生成与保存详解：Frappe框架实现指南

javascript

2024-03-13 08:57:22

动态表格的魅力：基于子表值创建和保存

简介

在 Frappe 框架中，子表是组织和管理复杂数据的有力工具。本文将指导你掌握一项重要技术，即根据子表中的值创建动态表格。

需求分析

我们的目标是：

创建一个名为「Size」的子表，其中包含「Size」字段。
从子表中提取值，并基于这些值动态生成表格。
保存表格数据，以便在需要时进行检索。

实现步骤

创建子表和字段：

在 Frappe 框架中创建子表「Size」，并在其中添加一个名为「Size」的字段。

获取子表值：

在自定义脚本中，使用 frappe.ui.form.on('Order Sheet', {refresh: function(frm) {}}) 事件来获取子表中的值。此事件会在表单刷新时触发。

创建动态表格：

使用 HTML 和 JavaScript 创建一个动态表格，其中列名取自子表中的值。

保存数据：

创建一个自定义字段来存储表格数据。在保存表单时，使用 frappe.ui.form.on('Order Sheet', {save: function(frm) {}}) 事件获取动态表格中的数据并更新自定义字段。

案例解析

代码示例：

// 获取子表中的值
frappe.ui.form.on('Order Sheet', {
    refresh: function(frm) {
        var sizeValues = frm.doc.size.map(row => row.size).filter(Boolean);
    }
})

// 创建动态表格
var htmlTable = document.createElement('table');
sizeValues.forEach(function(columnName) {
    var headerCell = document.createElement('th');
    headerCell.textContent = columnName;
    headerRow.appendChild(headerCell);
});

// 保存数据
frappe.ui.form.on('Order Sheet', {
    save: function(frm) {
        var tableData = frm.doc.table_data;
        for (var i = 0; i < tableData.length; i++) {
            for (var key in tableData[i]) {
                frm.doc[key] = tableData[i][key];
            }
        }
    }
})