开发者社区> 问答> 正文

子表单在操作列新增一行的回调函数应该怎么写

子表单自带的新增一行是在末尾新增一行。如果在已经填写的表单在中间行新增一行,需要在操作列新增一个按钮,假设命名”新增“,然后需要写个回调函数绑定动作。 请教一下大师们,这个回调函数怎么写? image.png image.png

展开
收起
游客as6kdbzxuw7hy 2023-06-11 13:56:34 132 0
来自:钉钉宜搭
3 条回答
写回答
取消 提交回答
  • 面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全展示给别人看。

    如果需要在已经填写的表单中间行新增一行,并在操作列新增一个“新增”按钮,则可以按照以下步骤进行:

    1. 在表单的操作列中,新增一个按钮并命名为“新增”或其他名称。

    2. 为“新增”按钮绑定回调函数,在回调函数中实现表格中间行的新增操作。具体的代码实现可能会因语言和框架而异,下面以 JavaScript 和 jQuery 为例,示范如何实现回调函数:

    // 定义回调函数
    function addTableRow() {
      // 获取表格元素对象
      var table = $('#table-id');
      // 创建新行并插入到指定位置(例如第二行)
      var newRow = $('<tr><td></td><td></td><td></td><td></td></tr>');
      table.find('tbody > tr:eq(1)').before(newRow);
    }
    
    // 为按钮绑定回调函数
    $('#add-btn').on('click', function() {
      addTableRow();
    });
    

    上述代码中,回调函数 addTableRow 实现了表格中间行的新增操作,首先获取表格元素对象,然后创建一个新行并插入到指定位置(例如第二行)。同时,通过 jQuery 的事件处理机制,将回调函数绑定到“新增”按钮的点击事件上。

    2023-06-11 19:29:01
    赞同 展开评论 打赏
  • 值得去的地方都没有捷径

    回调函数应该包含以下步骤:

    获取子表单当前行的数据

    在当前行下方插入一个新行

    将当前行数据复制到新行中

    清空当前行数据

    更新子表单数据

    重新渲染子表单

    下面是一个可能的代码实现示例(假设子表单的 ID 为“child-form”):

    function addRow() { const $table = $("#child-form"); const $currentRow = $(this).closest(".dt-row");

    // 1. 获取子表单当前行的数据 const currentData = $table.DataTable().row($currentRow).data();

    // 2. 在当前行下方插入一个新行 const $newRow = $table.DataTable().row.add({}).draw().node();

    // 3. 将当前行数据复制到新行中 $table.DataTable().row($newRow).data(currentData);

    // 4. 清空当前行数据 $table.DataTable().row($currentRow).data({}).draw();

    // 5. 更新子表单数据 const newData = $table.DataTable().data().toArray(); $("#my-input").val(JSON.stringify(newData));

    // 6. 重新渲染子表单 $table.DataTable().rows().nodes().to$().removeClass("selected"); $(this).closest(".dt-row").next().find(".dt-row-selector").click(); } 请注意,这只是一个示例代码,实际上还要根据您的具体需求和代码实现进行适当修改。

    2023-06-11 14:41:45
    赞同 展开评论 打赏
  • 可以在子表单的操作列中新增一个按钮,并给该按钮绑定一个回调函数。

    具体的代码实现可以参考以下示例:

    // 获取子表单控件
    var subformControl = form.getControlByName('subform_control_name');
    
    // 获取子表单数据
    var subformData = subformControl.getData();
    
    // 新增一行数据
    var newRowData = {};
    
    // 在第二行新增一行数据
    subformData.splice(1, 0, newRowData);
    
    // 更新子表单数据
    subformControl.setData(subformData);
    
    // 刷新子表单控件
    subformControl.refresh();
    
    // 提示新增成功
    alert('新增成功');
    

    在以上代码中,首先获取了子表单控件,并获取了当前子表单的数据。然后新建一个空对象作为新的一行数据,并使用 splice() 方法将其插入到第二行之前。最后更新子表单数据并刷新控件,同时提示新增成功。

    您可以将以上代码封装成一个函数,然后将其绑定到新增按钮的点击事件中即可。

    2023-06-11 14:37:11
    赞同 展开评论 打赏
问答分类:
问答地址:
关联地址:
来源圈子
更多
收录在圈子:
+ 订阅
「宜搭」是云钉原生低代码平台(钉钉 PaaS - aPaaS),让企业应用搭建更简单! 帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载