开发者社区 问答 正文

钉钉宜搭自定义表格编辑

  1. 需要在操作列添加一个编辑操作的链接,弹出一个编辑对话框
    再在对话框中编辑,修改内容。
    老是搞得不对,求大佬指点!----

export function onEdit(rowData, action, table) {
  //设置对应变量的值:弹出框的标题,确定按钮的状态,修改的数据
  this.setState({
    editRowData: rowData,
  });
  this.$('dialog_ll3o045x').show();
}

// 编辑
export function onOk2() {
  const dataJson = { //formDataJson参数要转成json格式
    "textField_ljzebcdf": this.$('textField_ll3o045s').getValue(),
    "radioField_ll39h10w": this.$('radioField_ll3o045t').getValue(),
    "rateField_ljzebcdh": this.$('rateField_ll3o045u').getValue(),
    "dateField_ljzebcdi": this.$('dateField_ll3o045v').getValue(),
    "textareaField_ljzebcdj": this.$('textareaField_ll3o045w').getValue(),
  };
  const param8 = {
    formInstId: editRowData.instid,
    updateFormDataJson: JSON.stringify(dataJson)
  }
  this.dataSourceMap['Update'].load(param8).then(res => {
    this.utils.toast({
      title: '修改成功',
      type: 'success',
      size: 'large',
    });
    this.$('dialog_ll3o045x').hide();
    setTimeout(() => {
      this.dataSourceMap['getDatas'].load();
    }, 2000);
  })
}

展开
收起
游客xcoqoibmczuuk 2023-08-19 16:49:34 1125 分享 版权
来自: 钉钉宜搭
5 条回答
写回答
取消 提交回答
  • 公众号:网络技术联盟站,InfoQ签约作者,阿里云社区签约作者,华为云 云享专家,BOSS直聘 创作王者,腾讯课堂创作领航员,博客+论坛:https://www.wljslmz.cn,工程师导航:https://www.wljslmz.com

    从提供的代码片段来看,您想在操作列添加一个编辑操作的链接,并在点击链接时弹出一个编辑对话框。在对话框中,您可以编辑并修改内容。以下是一些指导:

    1. 在表格组件的操作列中添加一个编辑链接。您可以使用 <a> 标签或其他适合您的组件作为编辑链接。例如:
    <Table>
      {/* 其他列 */}
      <Column title="操作" dataIndex="actions" key="actions" render={(text, record) => (
        <span>
          <a href="#" onClick={() => this.onEdit(record)}>编辑</a>
        </span>
      )} />
    </Table>
    
    1. 在组件中定义 onEdit 方法,用于处理点击编辑链接的事件。在该方法中,设置弹出框的标题和编辑的数据,并显示弹出框。
    onEdit(rowData) {
      this.setState({
        editRowData: rowData,
      });
      this.$('dialog_ll3o045x').show();
    }
    
    1. 编辑对话框组件中,根据需要添加各种表单字段。在确定按钮的点击事件中,获取表单字段的值,并构造要发送到后端的数据对象。

    2. 在确定按钮点击事件中,使用您的数据源 (dataSource) 中的方法(如 load)来发送更新数据的请求。通过传递表单字段的值和要修改数据的标识(如 formInstId),后端可以进行相应的更新操作。

    3. 在编辑成功后,您可以显示一个成功的提示,并隐藏编辑对话框。使用适当的延迟后,重新加载数据源以更新表格。

    2023-08-20 21:49:59
    赞同 展开评论
  • 北京阿里云ACE会长

    我已经认真阅读了 你的问题:

    【 钉钉宜搭自定义表格编辑
    需要在操作列添加一个编辑操作的链接,弹出一个编辑对话框
    再在对话框中编辑,修改内容。
    老是搞得不对,求大佬指点!---- 】

    并思考了

    建议如下:


    为了在钉钉宜搭中自定义表单操作编辑,您可以按照以下步骤:
    1.创建一个新的自定义组件:在宜搭中,您可以创建一个新的自定义组件来实现表单编辑功能。进入宜搭开发者模式,选择“创建自定义组件”,然后按照流程完成创建组件。 2. 编写组件逻辑:在
    新创建的自定义组件中,编写逻辑来实现表单编辑功能。这里需要使用接口技术,如HTML、CSS和JavaScript。您需要编写代码来实现表单的渲染、编辑链接的添加、编辑对话框的弹出以及内容的修改等功能。 3.添加编辑链接:在自定义组件中,供您需要
    编辑的列添加一个编辑链接。这可以通过在列的模板中插入一个按钮或者链接来实现。例如,您可以使用以下代码在列的模板中添加一个编辑链接:

    编辑
    复制复制

    1. 弹出编辑对话框:当用户点击编辑链接时,需要弹出一个编辑对话框。这可以通过编写 JavaScript 代码来实现。例如,您可以使用以下代码创建一个简单的编辑对话框:

    function openEditDialog(columnIndex) {
    // 创建一个新的对话框
    var dialog = new Dialog({
    title: '编辑内容',
    width: 300,
    height: 200,
    resizable: false,
    draggable: false,
    closeOnClickOutside: false,
    buttons: [{
    text: '确定',
    onClick: function () {
    // 获取编辑后的内容
    var newContent = document.getElementById('editContent').value;

        // 修改表格数据  
        var tableData = eval("(" + ${data} + ")");  
        tableData[columnIndex] = newContent;  
    
        // 重新渲染表格  
        renderTable(tableData);  
    
        // 关闭对话框  
        dialog.close();  
      }  
    }, {  
      text: '取消',  
      onClick: function () {  
        dialog.close();  
      }  
    }]  
    

    });

    // 设置对话框中的编辑内容
    var editContent = document.createElement('input');
    editContent.type = 'text';
    editContent.value = tableData[columnIndex];
    dialog.getElementById('editContent').appendChild(editContent);

    // 显示对话框
    dialog.show();
    }
    复制复制

    5.修改内容并保存:在对话框中,用户可以编辑内容并点击“确定”按钮保存修改。此时,您需要将修改后的内容更新到表单中,并重新渲染表单。以上是一个简单
    的这样,您可以根据自己的需求进行修改和扩展。希望对您有所帮助!

    image.png

    2023-08-20 19:42:47
    赞同 展开评论
  • 十年摸盘键,代码未曾试。 今日码示君,谁有上云事。

    这个应该用宜搭 JS-API来实现,宜搭平台在 JS 面板或变量绑定弹框中可以直接调用的 API 及其使用方法,每一个 API 都会配备一个示例用于展示 API 的具体使用方式,

    宜搭的设计模式主要参考 React 的方案,因此我们提供全局变量来进行页面级状态管理并提供相应的 API 来触发页面的重新刷新(具体使用参考 全局变量文档)。

    宜搭支持配置远程数据源,并提供通过 js 触发远程数据源调用的 API(具体使用参考 远程 API 文档)。

    宜搭提供动作面板进行 JS 代码编写,动作面板中的函数除了变量绑定及动作绑定使用之外还支持函数间的相互调用。

    宜搭提供了很多内置的工具类函数,帮助用户更好地实现一些常用功能。

    宜搭提供获取路由信息及页面跳转相关 API,底层实现主要使用 react-router,因此跳转 API 与 react-routerAPI 基本一致,另外宜搭还提供了一些路由相关的扩展 API。

    this.utils.router.getQuery() 获取页面 URL 参数,若传入 key 参数则返回定义的参数值,否则返回 URL 的所有参数,

    宜搭会为每个组件设置一个唯一标识,用于识别组件实例,组件唯一标识可以通过组件属性面板进行查看; 组件属性(prop)- 在宜搭中每个组件都可以通过设置组件属性来实现不同功能(类似 React 的 props),我们可以通过 hover 组件属性面板查看配置项对应的属性名称;

    组件通用 API 对于宜搭提供的所有组件都可以使用,主要用于读取或者设置组件的属性。

    表单组件是宜搭平台中最重要的一类组件,我们通常通过表单组件来收集数据,例如:输入框、单选、多选、下拉选择等,

    this.$(fieldId) 获取组件实例,fieldId 为组件唯一标识,在调用组件 API 之前,通常我们需要通过 this.$(fieldId) 先获取组件实例再进行 API 调用。

    禁止使用 this.$(fieldId).xxx 的方式获取一些不在文档中说明的 API 和属性来使用,文档中未注明的 API 和属性为私有内部实现,后续升级将不能保证兼容性,相关代码将不能正常运行。

    Dialog 组件 API 宜搭提供了一个对话框组件用于展示对话框形式的内容展示,同时提供了一些 API 来操作对话框的行为。

    钉钉宜搭自定义页面提供了一套前端开放的双端适配的开发环境,和小程序开发一样,提供了丰富应用生命周期的前端 API,也可以直接调用钉钉的 JS API,生产的应用最后可以发布为一个用户可访问的地址(可支持组织内和组织外的访问)。当前单独的钉钉小程序开发还不支持双端,在企业管理场景下,HTML5 的页面更佳适合低成本构建双端适配的场景。宜搭后端的开放,目前体现在可以通过连接器的 Groovy 以及 FaaS 节点来做后端部分定制。

    钉钉宜搭自定义页面还可以借助钉钉宜搭应用的表单做数据存储,通过宜搭的 Open API 去做表单的 CRUD(增删改查),把宜搭当做数据库 + 图床使用,用于构建自己的前台展示类产品,如宜搭行业案例页面。这套引擎的效率和稳定性已经经过阿里巴巴很大一部分业务的验证,集团核心的人、财、法、事、物、场等系统都是 base 在这套引擎上。

    宜搭自定义页面主要具备以下特性:

    🦧 提供所见即所得的拖拽式开发模式,官方实现大量常用组件及系统 API,让您轻松上手低代码开发; 🦊 提供全栈式解决方案,打通后端数据模型及存储,屏蔽前端工程化细节,让您快速搭建精美页面; 🐯 提供灵活的低代码研发模式,通过可视化搭建快速实现 UI 效果,通过 JS 代码编写轻松搞定业务逻辑。

    从钉钉宜搭的实现而言,本质是一套 基于宜搭自研的 Low-Code Engine,同一套标准,但是是不同的物料封装。

    自定义页面在物料库及使用场景上和普通表单页有所不同,普通表单页主要用于收集数据或者发布流程,因此可以使用的组件主要以输入类组件为主,另外宜搭对表单提交、预览等表单相关逻辑做了封装,用户使用门槛低,自定义页面支持的组件类型更加丰富,需要通过 JS 代码实现业务逻辑,对用户有一定门槛,但是适用范围更广。

    自定义页面提供了远程 API 配置能力,用户不仅可以使用宜搭官方提供的远程 API 还可以使用第三方远程服务,不过使用第三方远程服务对接口有一定要求。

    自定义页面和普通的表单页面都为页面类型,因此可以在宜搭的页面设置中设置免登配置。

    宜搭链接功能可用于跳转到 URL 并自由组合参数。可以自行控制组件的大小,但无法移动链接的位置(靠左、居中、靠右)

    支持设置链接方式(可选择跳转到内部页面或跳转外部链接) 支持设置链接打开方式 支持链接自定义携带参数(可添加多个)。

    你的问题是需要在操作列添加一个编辑操作的链接,弹出一个编辑对话框, 再在对话框中编辑,修改内容。需要用到上面相关内容,请按照逻辑顺序自己撸一下思路,在自己开发。

    2023-08-20 11:42:49
    赞同 1 展开评论
  • 十分耕耘,一定会有一分收获!

    楼主你好,在你的代码中,你需要为编辑操作添加一个链接或按钮,然后绑定一个函数来显示编辑对话框。从你的代码中可以看出你已经完成了这部分操作。不过你需要确保你的操作列中的链接是正确的并且链接到了你的编辑函数上。

    在你的编辑函数中,你需要根据你的需求来设置弹出框的标题和确定按钮的状态。然后你需要从 rowData 中获取需要修改的数据,并把它们设置为 state 中的 editRowData,以备提交修改时使用。

    在 onOk2 函数中,你需要获取对话框中用户输入的数据,并把它们转换成 JSON 格式。然后你需要调用数据源的 Update 操作,将修改后的数据通过参数 updateFormDataJson 提交到服务器进行保存。保存成功后,你需要显示一个成功的提示信息,并重新加载数据源以更新表格内容。

    不过从你的代码中可以看出,你没有在 onOk2 函数中正确地获取 editRowData,因为它是从 state 中获取的。你需要在函数中使用 this.state.editRowData 来获取它。

    2023-08-19 23:40:41
    赞同 展开评论
  • 天下风云出我辈,一入江湖岁月催,皇图霸业谈笑中,不胜人生一场醉。

    当员工通过表单提交数据后,拥有应用管理权限的管理员可以在 数据管理 中对提交的数据进行导入、导出、编辑、删除、查看、打印等操作,目前有2个入口可以查看到数据管理

    入口一:对应表单/流程表单 >> 编辑表单/流程表单 >> 数据管理
    image.png

    2023-08-19 22:38:50
    赞同 展开评论