表格(Table)组件
本文将介绍表格组件如何展示数据和表格数据交互的,表格的功能分【内容】及【样式】两块选项,用户根据自己的需求进行内容的编辑及样式的修改
一、内容
1、数据选项
1.1 数据
数据选项这里可以通过连接【数据源】、【数据源查询】、【Api 查询】动态将数据绑定到表格上,也支持绑定静态数据
例如:表格组件支持的数据格式为 JavaScript 对象数组的静态数据,例如该表具有三列:step、task、status
[
{
step: "#1",
task: "Drop a table",
status: "approved",
},
{
step: "#2",
task: "Create a query fetch_users with the Mock DB",
status: "pending",
},
{
step: "#3",
task: "Bind the query using => fetch_users.data",
status: "pending",
},
];
例如:将 User 数据库的 Query1 查询结果通过{{Query1.data}}绑定到表格组件上
点击【JS 图标】切换为手动编辑模式即可
如果检索到的数据不是所需的格式,你可以使用 JavaScript 来进行转换,再绑定到表格组件上,以刚刚{{Query1.data}}为例子
{
{
Query1.data.users.map((user) => {
return {
name: user.name,
email: user.email,
};
});
}
}
1.2 数据列
在数据列中有对展示的内容进行【设置】、【可见】、【可编辑】三种选项(对应右侧的三个 logo)
数据列的功能介绍及编辑的功能介绍将在【对数据列编辑设置】中介绍,可以点击跳转
1.3 更新模式
可以选择表格编辑后的内容如何进行保存,支持行更新及自定义更新
- 行更新
选择行更新,将在表格的最后一列出现保存/放弃的选项
- 自定义更新
可以通过使用列的 onSubmit 事件(点击对应列的设置按钮即可看见选项)或通过其他的按钮组件触发事件等来进行保存
1.4 主键列
允许您分配一个有助于维护 selectedRows 并 triggeredRows 基于其值的唯一列,此属性还会影响缓存数据集以加快加载和访问速度的性能。
2、分页配置选项
2.1 显示分页器
点击旁边的 JS 图标可以自行编写代码,通过 True/False 来控制是否开启该功能
可以控制在表格组件的右下角是否显示分页器功能
2.2 服务端分页
允许你通过限制每个查询请求获取的结果数量来实现分页效果
PagePlug 可以处理最大 5 MB 的查询响应。要显示大型数据集并优化性能,请使用服务器端分页。它可以使用基于偏移的分页或基于游标的分页来实现。
2.2.1 总行数
该功能只有服务端分页功能打开时才会出现
开启该功能后,可以在右下角显示数据表的总记录数,可以手动输入某个数值,也可以通过{{ }}动态的控制
2.2.2 onPageChange
该功能只有服务端分页功能打开时才会出现;点击旁边的 JS 图标可以自行编写代码
可以设置当用户点击表格组件右下角分页按钮导航到不同页面时,触发的事件动作
2.2.3 onPageSizeChange
该功能只有服务端分页功能打开时才会出现;点击旁边的 JS 图标可以自行编写代码
可以设置当表格高度发生改变时触发的事件动作
3、搜索过滤选项
3.1 允许搜索
点击旁边的 JS 图标可以自行编写代码,通过 True/False 来控制是否开启该功能
开启该功能后将显示搜索栏,允许用户搜索表中的特定数据。
3.2 前端搜索
开启该功能后,搜索栏将仅在表中当前加载的数据中进行搜索。如果禁用,搜索栏将搜索整个数据集。
3.3 默认搜索内容
设置搜索栏中默认显示的内容
3.4 onSearchTextChanged
点击旁边的 JS 图标可以自行编写代码
可以设置用户在表的搜索栏中搜索文本时触发的事件动作
3.5 支持过滤
点击旁边的 JS 图标可以自行编写代码,通过 True/False 来控制是否开启该功能
开启该功能后将显示过滤选项,允许用户筛选特定条件数据
4、勾选行配置
4.1 默认选中行
设置默认情况下在表中选择哪行内容,填写数字即可
4.2 支持多选
开启该功能后,允许同时选中表中的多行内容,且默认选中多行需要配置成相对应的数字数组启用后,可以通过引用属性 {{Table1.selectedRows}} 访问选定的行
4.3 onRowSelected
点击旁边的 JS 图标可以自行编写代码
可以设置用户在选择表中的一行或多行内容时触发的事件动作
5、排序
5.1 列排序
点击旁边的 JS 图标可以自行编写代码,通过 True/False 来控制是否开启该功能
开启该功能后,可以允许用户对列的内容进行升/降排序
5.2 onSort
该功能只有列排序功能打开时才会出现;点击旁边的 JS 图标可以自行编写代码
可以设置用户对表中的数值进行升降排序时触发的事件动作
6、新增行数据
6.1 允许新增一行
点击旁边的 JS 图标可以自行编写代码,通过 True/False 来控制是否开启该功能
开启该功能后将显示新增一行选项,允许用户添加一行新的数据内容(可以使用 OnSave 事件来更新表的数据源来保存用户新增的数据内容)
6.2 onSave
该功能只有允许新增一行功能打开时才会出现;点击旁边的 JS 图标可以自行编写代码
可以设置用户新增一行数据,点击保存按钮时触发的事件动作
6.3 onDiscard
该功能只有允许新增一行功能打开时才会出现;点击旁边的 JS 图标可以自行编写代码
可以设置用户新增一行数据,点击放弃按钮时触发的事件动作
6.4 默认行数据
设置用户开始创建新行时将自动填充新行的值,它需要一个与现有表数据中的列具有相同键的对象。例如:
7、属性
7.1 是否显示
点击旁边的 JS 图标可以自行编写代码,通过 True/False 来控制是否开启该功能
可以控制表格组件在页面上是否可见
7.2 加载时显示动画
点击旁边的 JS 图标可以自行编写代码,通过 True/False 来控制是否开启该功能
可以控制表格组件在数据加载渲染的时候是否显示动画效果
7.3 支持下载
点击旁边的 JS 图标可以自行编写代码,通过 True/False 来控制是否开启该功能
开启该功能后将显示下载选项,允许用户将表格的内容下载为.CSV文件或者Excel文件
7.4 允许固定列
点击旁边的 JS 图标可以自行编写代码,通过 True/False 来控制是否开启该功能
开启该功能后,可以允许用户将该列固定在左边/右边
7.5 CSV 分隔符
该功能只有支持下载功能打开时才会出现;点击旁边的 JS 图标可以自行编写代码
设置用户用于格式化下载.CSV文件的分隔符,默认是,
二、组件属性
表格组件支持多种属性供用户灵活开发,后面将挑选几个常用属性进行描述
如需了解更多,可以在画布中拖入一个 text 文本组件,可以看下面的示例
{
{
Table1;
}
}
2.1 selectedRow
该属性可以获取到当前行的数据,如果没有选择任何行,他是一个空的对象组,可以查看下面示例:
//如果获取当前行的数据,可以通过下列方式:
{
{
Table1.selectedRow;
}
}
//如果要获取当前行数据中的某个值,例如email,可以通过下列方式
{
{
Table1.selectedRow.email;
}
}
- 未选择时,为空对象组
- 选择了某一行时
- 获取当前行 email 的值
2.2 selectedRows
该属性可以获取开启了多选功能时,用户选择多行的数据组,如果解析值为[ ],则代表没有选择任何行,可以查看下面示例:
//如果获取当前多选行的数据,可以通过下列方式:
{
{
Table1.selectedRows;
}
}
//如果想从多选行的数据组中获取某个值,可以通过下列方式:
{
{
Table1.selectedRows[0].email;
}
}
- 未选择行时,解析值为[ ]
- 获取到当前多选行的数据组
- 获取数据组中的某个值
2.3 triggeredRow
该属性在用户与表格中的组件发生交互行为时(例如按钮组件发生点击时),可以获取到该列的数据,可以看下下面的示例:
//获取当前表格中发生交互行为当前行的数据,可以通过下列方式:
{
{
Table1.triggeredRow;
}
}
//如果从当前行的数据中获取某个值,可以通过下列方式:
{
{
Table1.triggeredRow.email;
}
}
2.4 isVisible
该属性可以反应组件的可见状态,是 True 还是 False,可以看下下面的示例:
{
{
Table1.isVisible;
}
}
2.5 sortOrder
该属性可以反应组件的排序标准,可以看下面的示例:
{
{
Table1.sortOrder;
}
}
- 当前排序的是 gender 列,是降序排序
2.6 tableData
该属性可以获取包含 JSON 格式的所有表数据,可以看下面的示例:
{
{
Table1.tableData;
}
}
2.7 selectedRowIndex
该属性可以获取当前选择行的索引,选择多行时该属性不适用,可以看下面的示例:
{
{
Table1.selectedRowIndex;
}
}
2.8 selectedRowIndices
该属性可以获取多选行的索引,前提需要开启支持多选功能,可以看下面的示例:
{
{
Table1.selectedRowIndices;
}
}
2.9 filterTableData
该属性可以获取表格组件使用过滤功能、排序或搜索词后,当前表格展示的数据,可以看下面的示例:
{
{
Table1.filteredTableData;
}
}
2.10 pageNo
该属性可以获取当前表格组件所在的页码,或者在调用 API 或编写 sql 的时候可以使用这个属性,将其用于分页,可以看下面的示例:
{
{
Table1.pageNo;
}
}
比如
https://mock-api.appsmith.com/users?page={{Table1.pageNo}}
2.11 pageOffset
该属性可以获取当前表格组件前面页数的数据总数,如果在第一页则会显示为 0;在数据源的查询中使用此值可以来获取正确的结果集,可以看下面的示例:
{
{
Table1.pageOffset;
}
}
- 例如当前的 id 是 29,{{Table1.pageOffset}}会记录前面的数据总数
2.12 pageSize
该属性可以获取当前表格组件的行数,随表格的高度和行高变化,该数值也会变化,可以看下面的示例:
{
{
Table1.pageSize;
}
}
2.13 searchText
该属性可以获取用户当前表格组件搜索栏中输入的文本信息,可以看下面的示例:
{
{
Table1.searchText;
}
}
2.14 isAddRowInProgres
该属性可以判断用户是否在使用新增一行的功能,如果是,则为 True,反之为 False,可以看下面的示例:
{
{
Table1.isAddRowInProgress;
}
}
2.15 newRow
该属性可以获取用户在新增一行时,填写的相关数据信息,可以看下面的示例:
{
{
Table1.newRow;
}
}
2.16 nextPageVisited
该属性可以判断用户是否访问过下一页的数据,如果是则为 True,反之为 False,可以看下面的示例:
{
{
Table1.nextPageVisited;
}
}
2.17 previouPageVisited
该属性可以判断用户是否访问过上一页的数据,如果是则为 True,反之为 False,可以看下面的示例:
{
{
Table1.previousPageVisited;
}
}
2.18 tableHeaders
该属性可以获取表格组件当前表头的信息,包含对应的 id、label、isVisible,可以看下面的示例:
//如果获取当前表头的信息,可以通过下列方式:
{
{
Table1.tableHeaders;
}
}
//如果想从表头的数据组中获取某个值,可以通过下列方式:
{
{
Table1.tableHeaders[0].label;
}
}
- 获取表格组件当前的表头信息
- 获取数据组中的某个值
2.19 totalRecordsCount
该属性可以获取当前表格的数据总数,可以看下面的示例:
{
{
Table1.totalRecordsCount;
}
}
2.20 updatedRow
该属性可以获取当前表格组件最新更新行的数据信息,可以看下面的示例:
{
{
Table1.updatedRow;
}
}
2.21 updatedRows
该属性可以获取当前表格组件更详细、最新更新行的数据信息,多了 index、gender、updatedFields,可以看下面的示例:
{
{
Table1.updatedRows;
}
}
2.22 triggeredRowIndex
该属性可以获取当前表格组件更新后对应行的索引,默认值为-1,可以看下面的示例子:
{
{
Table1.triggeredRowIndex;
}
}
2.23 updatedRowIndices
该属性可以获取当前表格组件更新后对应行的索引数组,为空时默认为[ ],可以看下面的示例子:
{
{
Table1.updatedRowIndices;
}
}
三、组件属性设置方法
该方法支持在应用运行的过程中对组件属性的值进行修改,这些方法是异步的并返回 Promise。你可以使用.then()来确保 PagePlug 中后续代码行的执行和排序
3.1 setVisibility
该方法可以设置 isVisible 属性的值,可以看下面的示例:
Table1.setVisibility(true);
如果要执行顺序操作,请使用.then(),可以看下面的示例:
Table1.setVisibility(true).then(() => {});
3.2 setData
该方法可以设置 data 属性的值,可以看下面的示例:
Table1.setData([
{ name: "John", age: 36 },
{ name: "Jane", age: 28 },
]);
如果要执行顺序操作,请使用.then(),可以看下面的示例:
Table1.setData([
{ name: "John", age: 36 },
{ name: "Jane", age: 28 },
]).then(() => {});
3.3 setSelectedRowIndex
该方法可以设置表格组件的选定行的索引,可以看下面的示例:
Table1.setSelectedRowIndex(1);
如果要执行顺序操作,请使用.then(),可以看下面的示例:
Table1.setSelectedRowIndex(1).then(() => {});