下午好,又是奋斗的一天。
登录注册
2022-09-30 15:18:56

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

极狐 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

markdown 可排序筛选表格

评论与留言

以下内容均由网友提交发布,版权与真实性无法查证,请自行辨别。
本站有缓存策略,时间约2小时后能看到您的评论。本站使用自动审核机制,如果您的内容包含广告/谩骂/恐怖/暴力/涉政等不和谐内容将无法展示!
微信订阅号
扫码关注「任霏博客」微信订阅号
反馈与讨论
感谢您的关注与反馈
如果您发现了BUG、安全漏洞、或者希望讨论技术内容,请点击下方链接对我进行反馈。
feedback