2022-09-30 07:18:56

极狐 GitLab Markdown 可排序、可过滤的数据表格实现

在 Markdown 中使用表格是不是每次都很烦?很多样板内容,全都是 |--| 的符号,理解也比较困难,表格还是静态的。
极狐 GitLab 15.3中为我们新增了一个功能,基于 JSON 的表格,支持筛选过滤、排序的操作,让你的表格动态起来,好用好几倍!
JSON TABLE 的使用
如果你是前端工程师,那应该很快就理解了,前端很多地方都用 JSON 来定义表格,在这个功能中同样是这个意思。
首先,我们先定一个一个代码段,代码段的格式是:json:table,就像这样:
```json:table
{}
```
然后,我们填充表头列数组定义:
```json:table
{
"fields" : [
{"key": "a", "label": "AA"},
{"key": "b", "label": "BB"},
{"key": "c", "label": "CC"}
]
}
```
再增加数据数组:
```json:table
{
"fields" : [
{"key": "a", "label": "AA"},
{"key": "b", "label": "BB"},
{"key": "c", "label": "CC"}
],
"items" : [
{"a": "11", "b": "22", "c": "33"},
{"a": "34", "b": "65", "c": "33"},
{"a": "56", "b": "32", "c": "54"},
{"a": "211", "b": "222", "c": "233"}
]
}
```
让数据列支持排序,我们给列对象增加一个属性 sortable:
```json:table
{
"fields" : [
{"key": "a", "label": "AA", "sortable": true},
{"key": "b", "label": "BB", "sortable": true},
{"key": "c", "label": "CC", "sortable": true}
],
"items" : [
{"a": "11", "b": "22", "c": "33"},
{"a": "34", "b": "65", "c": "33"},
{"a": "56", "b": "32", "c": "54"},
{"a": "211", "b": "222", "c": "233"}
]
}
```
再让表格支持搜索过滤,在整体上增加一个属性 filter:
```json:table
{
"fields" : [
{"key": "a", "label": "AA", "sortable": true},
{"key": "b", "label": "BB", "sortable": true},
{"key": "c", "label": "CC", "sortable": true}
],
"items" : [
{"a": "11", "b": "22", "c": "33"},
{"a": "34", "b": "65", "c": "33"},
{"a": "56", "b": "32", "c": "54"},
{"a": "211", "b": "222", "c": "233"}
],
"filter": true
}
```
这个时候,表格的标题还是默认的,我们再增加一个自定义标题 caption:
```json:table
{
"caption" : "表格标题",
"fields" : [
{"key": "a", "label": "AA", "sortable": true},
{"key": "b", "label": "BB", "sortable": true},
{"key": "c", "label": "CC", "sortable": true}
],
"items" : [
{"a": "11", "b": "22", "c": "33"},
{"a": "34", "b": "65", "c": "33"},
{"a": "56", "b": "32", "c": "54"},
{"a": "211", "b": "222", "c": "233"}
],
"filter": true
}
```
这个时候就会发现,表格已经支持排序、搜索筛选了,案例仓库:https://jihulab.com/renfei/markdown-jsontable-example

商业用途请联系作者获得授权。
版权声明:本文为博主「任霏」原创文章,遵循 CC BY-NC-SA 4.0 版权协议,转载请附上原文出处链接及本声明。
相关推荐
猜你还喜欢这些内容,不妨试试阅读一下评论与留言
以下内容均由网友提交发布,版权与真实性无法查证,请自行辨别。微信订阅号
扫码关注「任霏博客」微信订阅号内容标签
最新留言
- 你好,我想问一下如果是分析型的数据库要怎么制作docker镜像呢 是修改V008R003C002B0320版本号吗
- 可以的,我也正在开发分享的程序,可以邮件或群联系我都可以,关于页面里有联系方式:https://www.renfei.net/page/about 。
- 有破解软件的需要可以私下联系您吗?
- 您好,手机APP只是个客户端,用于数据呈现展示,数据均保存在服务器上,只留个APP没有任何用处,无能为力哦。
- 老哥 看你弄了这么多软件好厉害啊。 我有个软件 我买过几个小会员 没用几天 然后商家跑路了,软件服务器关闭了,连不上去 用不了。 你能做成一个打补丁版本可以本地用的么? 方便看下么?https://haodezhe.lanzouw.com/iD0f30h9joza 谢谢老哥!
- 您好,由于版权投诉和我国知识产权法的完善,我已经下架所有破解软件的下载链接了。
- 请问怎么下载呀
- 我保存的License在:https://gitlab.com/renfei/KingbaseES-V8-R3/-/tree/master/License ,开发版是长期有效的,只不过限制连接数,现在官网好像已经下线 V8R3 的下载页面了,其他版本我也不确定是否过期
- 这个版本的license有没有
- 序列号长度不对呀
热文排行
- 优雅的源代码管理(二):Git 的工作原理
- 优雅的源代码管理(一):版本控制系统 VCS(Version Control System)与软件配置管理 SCM(Software Configuration Management)
- ChatGPT 开发商 OpenAI 买下极品域名 AI.com
- 火爆的 AI 人工智能 ChatGPT 国内注册教程、使用方式和收费标准
- 解决 SpringCloud 中 bootstrap.yml 不识别 @[email protected] 参数
- Cron表达式书写教程搞定Linux、Spring、Quartz的定时任务
- 阿里云香港可用区C发生史诗级故障
- 国产统信UOS服务器操作系统V20提供免费使用授权
- 开源站长推送工具效果评测推荐(百度/必应/谷歌)
- 获取公网IP服务「ip.renfei.net」升级增加地理定位数据字段公示