开发者社区 问答 正文

在自定义页面中,如何对表格组中的多行内容进行批量更新操作

在宜搭中搭建了一个自定义页面,开始通过表格组件中的操作列实现了单行数据的更新操作。现在的需求是希望通过复选表格中的多行,点击我在顶部操作中添加的批量分配按钮,点击按钮后打开对话框,在对话框中选择好姓名后,再点击分配,最后对选择的数据进行批量更新操作,更新包括该条数据数据分配后的负责人姓名以及时间等。
现在的问题是选择多行数据后,点击批量分配按钮,在对话框后选择好姓名后就无法进行下一步。个人感觉是未获取表格中的数据。image.png

展开
收起
游客acrl4hj62eprc 2025-04-11 10:01:25 78 分享 版权
来自: 钉钉宜搭
2 条回答
写回答
取消 提交回答
  • 北京阿里云ACE会长

    在用户选择姓名后,遍历选中的行数据,更新每行数据的负责人姓名和时间等信息。
    将更新后的数据保存到表格中。

    import { getFieldValue } from '@/utils';
    
    export async function onBatchDistribution() {
      let loading;
      try {
        // 获取字段值(传统空值检查)
        const employeeValue = this.$('employeeField_13o2lib').getValue();
        const deptValue = this.$('departmentSelectField_13o2lib').getValue();
    
        const userId = getFieldValue(employeeValue);
        const deptId = getFieldValue(deptValue);
    
        // 空值校验
        if (!userId || !deptId) {
          this.utils.toast({
            title: '请选择' + (userId ? '负责人' : '') + (!deptId ? '所属部门' : ''),
            type: 'error'
          });
          return;
        }
    
        // 获取表格选中行
        const table = this.$('tablePC_13nts64v');
        const tableDataRows = table.dataGrid('getSelections');
        const selectedRows = table.dataGrid('getSelections').map(function (item) {
          return item;
        });
    
        if (selectedRows.length === 0) {
          this.utils.toast({ title: '请先勾选客户', type: 'error' });
          return;
        }
    
        // 弹出对话框选择姓名
        const dialog = this.$('dialog');
        dialog.show();
        dialog.setTitle('批量分配');
        dialog.setContent(`
          <div>
            <label>选择姓名:</label>
            <select id="usernameSelect">
              <!-- 动态填充姓名选项 -->
            </select>
          </div>
        `);
    
        // 填充姓名选项
        const usernames = ['张三', '李四', '王五']; // 示例姓名列表
        const usernameSelect = document.getElementById('usernameSelect');
        usernames.forEach(username => {
          const option = document.createElement('option');
          option.value = username;
          option.textContent = username;
          usernameSelect.appendChild(option);
        });
    
        // 绑定对话框确认按钮事件
        dialog.getFooterDom().querySelector('button.confirm').addEventListener('click', async () => {
          const selectedUsername = usernameSelect.value;
          if (!selectedUsername) {
            this.utils.toast({ title: '请选择姓名', type: 'error' });
            return;
          }
    
          // 更新选中行数据
          selectedRows.forEach(row => {
            row.负责人姓名 = selectedUsername; // 更新负责人姓名
            row.分配时间 = new Date().toISOString(); // 更新分配时间
          });
    
          // 保存更新后的数据到表格
          table.dataGrid('updateRows', selectedRows);
    
          // 关闭对话框
          dialog.hide();
        });
      } catch (error) {
        console.error('批量分配失败:', error);
      } finally {
        if (loading) {
          loading.hide();
        }
      }
    }
    
    2025-04-12 08:26:59
    赞同 61 展开评论
  • 若问题得到了解决,辛苦点下采纳回答哦~

    由于不太清楚完整业务场景,只能提供下实现思路供您参考下。
    比如表格单选选择回调时,把勾选的那一行的值records,存到变量里。后续方便可以取变量的值,组装好参数再调接口

    2025-04-11 14:56:31
    赞同 76 展开评论
问答分类:
问答地址:
关联地址: