跳到主要内容

表格

表格常用于展示和操作数据。绝大多数内部系统中包含表格组件,它通常用于将数据展示出来,并允许用户与展示出来的数据交互。本文中我们先列出表格中的属性列表,然后针对常见场景分别描述如何使用表格,比如将列展示为图片、分页等功能。

属性列表

表格中常用的属性有

属性名释义
data表格中存放数据的地方,格式需要是一个 JSON 数组(SQL 数据源读出的数据均为 JSON 数组),否则需要转化为 JSON 数组
selectedRow在表格中用户选中的行。用此属性可以实现让用户与表格交互,比如用户点击某行时,触发一个查询或展示该行数据
activeRow用户点击表格前的瞬间,卡拉云会将此项置为用户点击的行的数据
pageSize表格的每页大小
pageIndex当前页页码
columns列顺序(如果有调整过列的顺序)
columnFormats每列展示的格式,比如展示为链接、图片或按钮等

读入数据

要用表格展示数据,首先你需要告诉表格数据的来源。单击表格,在左侧 表格数据 属性中,你就可以设置表格的数据。这里的数据必须是一个数组,数组中的每个元素必须是一个 JSON 对象。

比如你可以将以下 JSON 复制到表格的表格数据属性中。我们在本文中先用这个简单的 JSON 作为例子,在本文尾部再连接查询来用表格展示数据库或 API 中的数据

[
{
"name": "小花",
"photo": "http://placekitten.com/200/300"
},
{
"name": "小黄",
"photo": "http://placekitten.com/300/300"
},
{
"name": "小鸭",
"photo": "http://placekitten.com/400/300"
},
{
"name": "小红",
"photo": "http://placekitten.com/280/300"
},
{
"name": "小绿",
"photo": "http://placekitten.com/350/300"
}
]

复制后的结果如下图,可以看到,只要你在 表格数据 (图中标志为1)这个属性中填入了一个格式正确的 JSON 数组,那么卡拉云就会自动将表格的 key 读出作为列名,同时将内容分行展示出来(图中标志为2)。

表格数据

当然,除了写死一个 JSON 数组,你也可以让表格展示从数据库读出的数据。详情请见示例教程用表格展示数据

更换列别名和列展示类型

注意在上面表格中,表格直接读取了 JSON 里对应行的键值作为列名。如果你希望将列名更换为更加用户友好的列名的话,那么可以点击列设置,为你希望设置的列添加一个别名,如下图所示,先点击要修改列名的列,再在步骤2中修改列名为希望的名字

更改表格列名

在上图中的 展示例 下拉菜单中,你还可以选择每列的展示类型。比如如果一列是图片链接,你可以选择将这一列展示为文字链接(默认),图片或一个可点击的链接。

多种展示类型支持

目前表格支持将列渲染为纯文本(默认),图片和链接

客户端翻页

如果你的查询数据量不大,可以进行客户端翻页,即一次将所有数据全部查询出来,再用表格进行翻页。比如,用以下查询来查找所有数据库中的用户

SELECT * FROM users;

当你将表格上的翻页方式设置为 客户端翻页 时,表格会自动允许你的用户对查询出的数据进行翻页,每页显示数可在每页展示行数中进行设置。

如果一个查询返回的结果数不多于 100 条时,客户端翻页的使用体验可以非常流畅。但如果数据较多而又希望使用客户端翻页,那么在查询时必须加上一些限制,比如说查询消费最高的 50 个用户

SELECT * FROM users ORDER BY spend DESC;

总之,如果你的查询每次返回的结果较少时(1000 条数据以下),可以使用客户端翻页。否则为了保证用户使用应用的体验,你需要用服务端翻页

服务端翻页

虽然卡拉云的表格支持显示较大量的数据,但一次性将过多数据放入前端中将会不可避免地造成卡顿。如果需要查询的数据量较大时,比如说查询总数据行数多于 1000 条,我们建议进行服务器翻页

服务端翻页的实现很简单,即每次查询时,我们仅加载在表格中一页会展示的数据量,而非一次读入后在前端进行翻页。

下面我们用一个实例来说明如何实现服务端翻页

假设你的数据行数为 10 万行,那么一次查询将 10 万行数据全部加载是不现实,同时也是不必要的,原因是你的用户同一时间最多与十几行数据进行交互。

因此与其一次加载 10 万行数据到前端造成卡顿,不如先只加载 20 行数据,当用户需要加载下一页时,再加载下个 20 行。

如果你的用户现在正在表格的第 3 页(下标从 0 开始),每页展示的数据行数是 20 行,那么你的数据库查询加载下一页的数据就是

SELECT * FROM users LIMIT 20 OFFSET 3 * 20

在上面的查询中,我们让数据库跳过前 60 行数据(3 页 * 每页 20 行数据),同时限制数据库只查 20 条数据。由此,我们只要能知道当前用户在表格中的哪一页,以及表格一页显示的行数是多少,就可以按上述逻辑进行服务端翻页了。

卡拉云的表格中,pageIndexpageSize 这两个属性正是为服务端翻页而设计的。如果你需要服务器端查询,只需要选中 服务器端查询 然后创建类似以下的查询

SELECT * FROM users LIMIT {{table1.pageSize}} OFFSET {{table1.pageSize * table1.pageIndex}}

即可以让该查询每次只返回 {{table1.pageSize}} 这么多行数据,同时跳过 table1 中已经翻页过的行。当用户点击下一页时,可以触发查询自动执行,从而实现无缝地服务端翻页。

调整列顺序

即使不调整表格数据,你也可以直接通过表格设置来调整表格列的顺序。

更改表格顺序

智能列宽

表格的宽度会智能地变化,你也可以手动通过调整表格头的宽度来调整列宽度

隐藏列

有时,你需要将数据读入后但将某些不重要的列隐藏起来。你可以通过点击该列设置的小眼睛按钮,将该列隐藏。如果再次点击将取消隐藏将该列展示出来。

隐藏列

引用选择的行

很多时候你的用户需要对于表格中的某一行做一些操作,比如说,从 SQL 中读取表格数据后,你可能希望提供一个删除按钮,供用户将选中的一行删除。

表格中暴露出来的 selectedRow 属性就可以被引用来完成这个功能,当用户选中某一行时,表格里的 selectedRow 动态属性会更新为用户选中的那一行。你可以在查询中或者其它任何地方,使用双花括号属性引用来获得用户选中的这一行的数据。

比如说,在下图中我们在一个文本框里用 ## 选中的主子为: {{table1.selectedRow.data.name}} 引用了选择行的小猫名字(标志1处),然后在表格上点击各行时,则会展示出来选中了哪一行(标志2和3处)

选择行

单行选择和多行选择

注意,你可以设置表格是否允许选择多行数据

用户激活的行

当用户点击表格内的任意一行时,卡拉云将会在进行任何其它操作前将此数据设置为用户点击的行数据,这在使用表格中的按钮时特别有用,我们用一个例子来说明。

假设你在一个表格 table1 中设置按显示为一个删除按钮,同时希望在用户点击每行的按钮时,执行一个查询来删除掉这一行数据。那么自然,你需要知道用户点击了哪一行,以获得对应行的 id 等数据。

此时在查询设置中,你就可以使用 {{table1.activeRow.data.id}} 来读取用户点击删除按钮时被激活的行。

activeRow 项中的数据保证在触发任何其它事件之前更新完毕,因此你在任意事件中设置引用 activeRow 时,引用的都是用户最新点击时的行数据。

推荐阅读在表格中使用按钮在表格中使用删除按钮两个实例来理解何时使用 activeRow

与 selectedRow 的区别

selectedRow 只会在用户选中一行时改变,而用户在点击表格中的按钮时,并不一定希望选中一行。同时 activeRow 保证一定在执行查询前将用户要点的行激活,从而让查询执行或者事件执行时使用的行数据为用户想要点击的行数据。而 selectedRow 则不做此保证。

如果仍然存疑,在表格中使用按钮一文中,我们用实现作了详细解释,请参考

使用自定义列

你可以通过添加自定义列,来扩展表格的功能。如果不使用自定义列,表格中仅会显示你的数据中包含的列。

但有时,你会希望添加一列来显示其它数值或操作。比如说你可能会希望

添加操作按钮

如果你希望添加一列按钮,你可以添加一个自定义列,同时在自定义列中设置展示为按钮。详细示例请参考: 在表格中使用按钮

用其它列的数据来生成新的列

有时候你可能希望将表格中的数据进行加工,比如说有列 工资收入股票收入 两列,你希望计算一列 总收入。此时你就可以添加一行自定义列,在自定义列中设置列映射为工资收入 + 股票收入。

列映射值

在使用表格时,我们有时希望将其它列中的数据融合来生成一列新的值,此时你可以设置该列的映射值。

我们用一个例子来说明如何使用列映射值

假如在表格 usersTableage 列中包含用户的年龄数据,值为数字,而你希望将其映射为 XX 岁 的字符串格式,那么你可以通过列映射来实现:

{{
currentRow.age + " 岁"
}}

map-column

请注意在卡拉云中,任何双花括号内引用起来的代码块都是 JavaScript 代码。因此,这里我们只不过进行了一个简单的字符串连接操作,即读出当前行 currentRow 中的 age 数据,并在后面加上一个 字符串,以实现年龄数据到 XX 岁 的转换。

currentRow 变量

currentRow 变量是卡拉云在部分表格属性中自带的变量,用于获取每一行的数据。你可以很方便地使用 currentRow.X 来引用表格中列名为 X 的数据,比如 currentRow.age。请注意这里的列名必须是 data 中原本的列名,而不是自定义列名。

自定义列和非自定义列中的映射值

在非自定义列中(即从你的数据中获得的列)定义映射值时,映射的数据只会在表格展示出来,而不会真正覆盖对应的列,请放心使用。

列映射实例

使用列映射的实例请参考: 在表格中使用按钮在表格中使用删除按钮

设置表格行颜色

有时候,我们希望设置表格行的颜色。要设置表格行的颜色很简单,在 表格行颜色 设置中,直接输入希望设置的颜色即可。比如我们可以将表格行颜色设置为红色 pink,如下图所示

表格行颜色

颜色和反差

虽然这里你可以用 css 颜色名,或 HEX 值展示表格行为任意颜色,但为了达到良好的用户体验,请注意不要将表格的行颜色设置得过深,以免你的用户无法清楚地看清楚表格上的字体。

通常我们建议用较浅的颜色,如

#EF767A - 红色表示错误

#FDCA40 - 黄色表示警示

#FDCA40 - 绿色表示正确

如果需要颜色启发,推荐使用颜色板工具,每次按空格可以切换一组新颜色: https://coolors.co/

动态变化表格行颜色

上面的例子中我们用一个颜色替换了所有表格中的行颜色,但很多时候我们需要根据表格数据来调整表格行的颜色。举一个常见例子,如果某行的值超过一定范围,就要警示用户。

我们可以用 currentRow 配合简单的 JavaScript 三目运算来实现。比如,如果我们需要标出所有年龄大于 40 岁的用户,可以用

{{currentRow.age > 40 ? "pink": "white"}}

即,如果用户年龄大于 40,显示红色,否则显示白色。

效果如下图所示。在标志为 1 处我们填入了上述代码,标志为 2 处的表格中,年龄大于 40 岁的行就被标为了粉红色。

表格动态行颜色

实现任意复杂的动态颜色逻辑

当然这里我们可以用 JavaScript 来实现任意逻辑的行颜色规则。比如,如果列 A 和 列 B 的数值超过 10,我们就显示黄色以示警示

{{ (currentRow.A - currentRow.B >= 10) ? 'yellow': 'white'}}

可以看到卡拉云的灵活性建立在 JavaScript 的无限灵活性上,可以帮助你实现任意复杂的需求。

设置选择单行或多行

在表格中,你可以设置允许用户选择单行或多行,默认为仅允许选择单行。

如果你将这个选项设置为选择多行,那么在对应的 selectedRow.dataselectedRow.index 中将会出现数组值,表示用户选中的行数据和选中的行序号。

比如说,对于数据

[{"name": "宁静"}, {"name": "万茜"}, {"name": "张洁"}]

来说,如果用户选择了第 0 和第 2 行,那么 selectedRow.data 将变为 [{"name": "宁静"}, {"name": "张洁"}],同时 selectedRow.index 将变为 [0, 2]

对每行或每列进行操作

有时我们希望对整列进行操作,举个例子,如果你的数据中某列是用户的生日年份,而运营需要开发一个需求是一目了然需要知道这些用户的年龄。

要实现这个需求,一个办法是在查询数据时进行处理。

比如说,如果你的数据来自于数据库,那么在 SQL 查询中,用生日列来计算对应用户的年龄。如果你的数据来自于 API,那么可以新增加一个 API 接口,将计算完年龄的用户返回。

但是这样的需求可能很细碎,不断调整 SQL 和 API 非常麻烦。我们其实也可以将对应的列操作放到卡拉云中进行计算。对于上面这个例子,假设我们的数据是

[
{
"year": 1989,
"name": "Ed"
},
{
"year": 1988,
"name": "小张"
},
{
"year": 1978,
"name": "小红"
},
{
"year": 1999,
"name": "小白"
},
{
"year": 1998,
"name": "小沈"
},
{
"year": 2001,
"name": "小明"
}
]

那么我们可以用 JavaScript 中自带的时间函数,获取当前年份,再减去每行中用户对应的出生年即可得到用户的年龄。换句话说,我们可以对数据中的整列、整行进行任意数据操作,而不用每次为了琐碎的小需求修改后端。

对每行每列进行操作

图中的代码为

{{
getUsers.data.map(row => {
return {
"age": new Date().getFullYear() - row.year,
"name": row.name
}
})
}}

这里的 map 函数即循环数据中的每一行,是 JavaScript 的数组自带的函数。对于每行我们返回 new Date().getFullYear() - row.year 即为用户年龄。

支持任意复杂程度的逻辑

注意这里只是用一个简单例子说明卡拉云中的行列操作。本质上来讲,这只是普通的 JS 代码,因此对于数据数组 getUsers.data 而言,你可以用任意复杂的逻辑进行操作,只要返回的任然是一个表格接受的数组结构即可。