【Outsystems】Reactive下Editable Table制作方法

已于 2022-12-08 20:06:33 修改
阅读量6.9k 收藏
点赞数
分类专栏： Outsystems 文章标签： 开发工具
于 2022-01-13 21:35:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanglalababy/article/details/122481530
版权

Trandition Web App开发中，有现成的Editable Table Widget可供使用，但是Reactive环境中没有，实现其实也不麻烦，连带UI的部分一起小小总结一下，以防之后想使用时忘记。

实现的基础

Add Row按钮连接到Client Action，Action里面给当前列表添加一行空值
在这里插入图片描述
这样点击Add Row就会添加新的一行，填入数据，再做个保存按钮就行
请添加图片描述
但这样的话页面显示的这个表格里面的东西必须是input widget，不然如果是空值，新添加的一行啥都不显示。如下，
请添加图片描述
只想新添加的值是输入框的话加个标志符就行⬇️

UI部分的设计

形式1：If文 + 作为Flag的变量

请添加图片描述

形式2：CSS + 作为Flag的变量

请添加图片描述

形式3：新建一个专用于Add Row的页面

请添加图片描述

形式4：当前页面做一个专用于Add Row的组件

和3差不多，只是把3的添加页面的内容放到同一个界面

菜鸟冰冰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Outsystems table的分页和排序
butterfly110的博客
07-07 189
Outsystems 开发
可编辑表格EditableProTable学习
weixin_67150966的博客
03-14 812
可编辑表格EditableProTable学习
antd-react的EditableTable可编辑表格问题
wo139472的博客
01-11 3460
** 使用Form表单包裹EditableTable可编辑表格问题 ** 最近公司有一个需求,在添加功能中使用表单填写数据,并且还需要嵌套一个表格,表格为可编辑,一开始的时候不知道怎么下手,后面发现高级组件的可编辑表格组件,于是立马上手,但是其中碰到了几个问题 可编辑表格的渲染问题 点击编辑回显数据有问题,只是单纯的输入框没问题,但是如果是使用了valueEnum所对应的数据就有问题了,或者使用了复选框同样回显的时候有问题,还是先贴下问题前的代码 上面这两张图就是使用valueEnum对应的数据和使
利用OutSystems创建你的第一个移动应用
汤蜀黍的博客
12-24 1万+
使用OutSystems开发移动应用程序非常简单。如果您有包含数据的Excel文件，则可以将其导入数据库并快速创建移动应用程序，然后随时查阅和管理数据。
outsystems合集系列（四）
Monsterof的博客
11-18 1482
在这一节，我们来讲讲screens——outsystems的UI构建模块之一。我们会向你展示screens如何被创建，screens的内容和元素，变量和输入。最后，我们会在screen的层面上说一些关于客户端的逻辑。在进入screen定义和详情之前，让我们来看看大概。App由多个screens组成，它们本质上是app的不同的页面，提供不同的功能或者数据。 这些screens之间可以相互连接 让终端用户浏览整个应用程序。所以screen是什么？screen是outsystems中UI模块的构建工具之一。每个s
2 - Using Widgets Exercise Materials_ReactiveWeb_OutSystems_widg
10-04
在OutSystems平台上，"Reactive Web"是一种先进的技术框架，专为构建响应式、高性能的Web应用程序而设计。本训练材料主要围绕“Using Widgets Exercise”展开，旨在帮助开发者深入理解和熟练掌握OutSystems中的...
OutSystems Overview
07-16
关于低代码开发系统OutSystems的简介。 https://www.outsystems.com/
OutSystems Launcher-crx插件
04-02
*可以快速访问或创建票证版本2.0.11：*升级以适应OutSystems应用程序OS 10（Web和移动版）的版本*在OutSystems Device Preview中可以使用*图标标记现在显示Web应用程序的视图状态大小*在平台“ Bad boy！”中添加了...
docs-product：OutSystems 11产品文档
02-09
文献资料 该存储库包含的源文件。 检查。 写作 该存储库中存在的所有文档都应使用Markdown编写（请查看基本语法）。 ... 当前在转换步骤中使用了以下Markdown扩展： ... 当按下Tab键时，请插入4个空格
jeecgboot前端自定义组件、JgEditable Table行编辑表格
二月鸟
03-30 5911
jeecgboot前端自定义组件 1.首先，在webstrom中找到ant-design-vue-jeecg/src/views/jeecg/modules建立一个Demo.vue组件 2.完成菜单配置和角色授权（前面helloworld有） 3.结果 JSelectDepart详细介绍（其余的自定义组件使用方法类似不在举例） 4.常用组件（将Demo.vue内容改为） <template> <div> <a-card :bordered="false" sty
bootstrap-table-editable.js
06-28
预览地址：http://www.html580.com/9171/demo；JS组件系列——BootstrapTable 行内编辑解决方案：x-editable
点击加一行表格可输入jQuery实现的EditTable可编辑表格插件
04-15
EditTable基于tabel布局的表格，表格内容单击可以编辑，编辑完毕即可显示新的内容； ESC按键可以撤销编辑，返回原有内容。 点击“添加”按钮可以实现表格的增加； 点击“删除”可以删除当前表格。 兼容了当前-IE系列、chrome等主流浏览器。
editable-table：用于编辑记录集合的Web组件
02-13
可编辑表格 一个用于编辑记录集合的Web组件 用法 <!-- Load `editable-table` directly from Pika's CDN --> < script type =" module " src =" https://cdn.pika.dev/editable-table " > </ script > <!-- put a normal <table> tag inside <editable> tags. The last <tr> in <tbody> becomes the template for new rows --> < editable> < table> < thead> < tr> < th> Name </ th> < th> E-Ma
bootstrap的editTable实现方法
菜鸟笔记
03-16 1万+
首先下载基于bootstrap的源码到本地。引用相关文件。 link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> link
bootstrap-table-editable 小结
郁闷之春的专栏
10-01 2万+
先贴一个json类 using System; using System.Collections.Generic; using System.Web; using System.Web.Script.Serialization; using System.Data; namespace PH.Common { /// /// JSON帮助类 /// pu
bootstarpTable中有关editable的使用
qq_34700772的博客
04-01 1629
最近做项目  需要做修改的功能  我想把修改做的炫酷点  于是  就用了bootstrap-editable这个jquery插件 实际的效果如下
X-editable 文档 中文版
热门推荐
尽力而为
08-26 3万+
因为要用到 Bootstrap-table ，不可避免的会用到表格编辑功能，而 X-editable 可在页面上创建可编辑元素。 它可以与前端框架（Bootstrap，jQuery UI，jQuery ）配合使用，编辑模式包括弹出和行内模式。只是兜兜转转找了下只有英文文档，还是不方便查阅，所以进行了部分翻译。
Bootstrap Table--onEditableSave
Alfred的博客
07-30 8301
当某列编辑完成后，需要对当前列所在的行进行修改操作：  $("#grid").bootstrapTable({      url:'',      ……      …… //其他属性     columns:[{         field:'rowId',         title:'序号',         width:30,         align: 'center'
jeecg-boot 的 j-editable-table表格框添加 slot 插槽
北芒的博客
08-28 8669
前景提要 j-editable-table 是 jeecg-boot 封装好的内容，根据 colums 的内容进行展示，那么如何在这个展示的过程中替换掉某个内容换成我想显示的内容呢？ 将 colums 里面某个内容进行修改 //原内容 { title: '项目名称', key: 'projectName', type: FormTypes.select, dictCode: 'annual_Environmental_Projects', width: '210px', .
outsystems 架构
最新发布
07-13
3. 模型驱动器（Model-Driven Architecture）：OutSystems 使用模型驱动的方法来构建应用程序。开发人员使用 OutSystems Studio 创建应用程序模型，包括数据模型、用户界面和业务逻辑等。然后，OutSystems 平台自动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值