[{"id":"840f0737-df1d-47ae-bb0a-359b01fe0608","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5d9cdef-8854-4505-89be-a2bbc3cb4482","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3dc3dd55-35b0-4d23-bf62-47bc3650e4ee","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"80d84fbc-d0f8-4e4a-947f-e3e4de9b49b2","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9152b7ca-0186-4fe3-a26f-5a05f322db07","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
        
(Showing Draft Content)

多维列表框

功能概述

多维列表框组件用于创建多层树形列表的筛选器,用户可通过展开多层的树形结构来选择数据。

image

在构建树形结构时,支持手动构建,也支持自动构建。

而自动构建树形结构时则要求数据集中本身就具有父子特征的数据,依赖这种父子关系自动形成树形结构。

接下来会为您一 一介绍。

添加多维列表框筛选器

在左边筛选器中选择多维列表框筛选器图标image2018-9-17_16-52-8.png,并将该筛选器拖拽至编辑区。

image

添加数据集后,单击绑定区右上角的image2021-4-28_10-10-36.png按钮,可以看到有三个选项:多维数据、父子级、层级,这三个选项也就是构建多维列表的三种方式。

选择多维数据即手动绑定数据形成树形结构;选择父子级层级则可自动构建树形层级,但需要对数据有一定的要求。

image2022-4-2_16-29-15.png

手动创建树形列表

将数据绑定方式设置为多维数据

image2022-4-2_16-29-59.png

可绑定一个或多个字段,可绑定除级联字段外的所有类型的字段。绑定一个字段则为没有层级结构的筛选器。

image

绑定多个字段,生成树形结构。

image

自动生成树形列表–父子级

如果数据结构中的父子关系是通过ID和父ID建立的,且存在一个根节点。就可以使用父子级的方式来构建树形列表。

例如:

image2021-4-28_15-9-15.png

从图中我们可以看出,第一列为“ID”,第二列为“父ID”,并且存在一个根节点,也即图中的1001,它的父ID为空,创建数据集后会自动置为0。

构建方法

1. 将数据绑定方式设置为父子级

image

2. 将数据集中的 ID 绑定到编号中,父ID 绑定到父级编号,组织名称绑定到数据中。

数据用来绑定树形列表显示出来的内容,如不绑定字段,则会使用编号中绑定的数据进行显示。

image

3. 设置根节点。

单击父与子右侧的更多按钮,选择设置

image

设置根节点的编号,以及未匹配上的节点如何处理。

根节点默认为-1,可修改。示例中由于我们的根节点为0,所以我们将其设置为0。

未匹配的节点作为另外的根节点处理,即表示如有未匹配到根节点的节点就会出现多个数结构;忽略处理的话,则不显示未匹配的节点。

image2021-4-28_15-20-34.png

4. 保存后设置成功。

image2022-4-2_16-37-59.png

自动生成树形列表–层级

有时数据结构中的父子关系是在同一个字段中的,依据不同的位数或符号分隔来表示该数据所在的父子层级。

例如下图中用三位数字表示一层。

101表示树结构的第一层,101101为该节点的子节点,也即树的第二层;101101101为第三层,101101101101为第四层。

此时我们就可以使用层级的方式来构建树形列表。

image2021-4-28_15-10-44.png

具体操作方法

1. 将数据绑定方式设置为层级

image

2. 绑定数据。将含有父子关系的ID 绑定到层级中,将需要显示的内容绑定到数据中。

image

3. 此时我们来看,筛选器中并没有生成树形层次。

单击绑定区的层级后的更多按钮,选择设置来设置层次结构的分隔方式。

image2022-4-2_16-43-1.png

此时可见默认的分隔方式是分隔符“-”,也就是为什么刚绑定好数据后没有显示成树形层次。因为我们的ID 中是使用数字长度并非分隔符来表示层次关系的。

所以接下来我们就需要根据实际的需要来设置层次关系的识别方法。

image2021-4-28_14-11-24.png

分隔方式 :可以选择为分隔符或者长度

当选择分隔符,可以进一步在下方设置具体的符号。

当选择长度,则可以进一步设置每一层的长度。

例子中是使用3位数字代表一个层级,所以我们如下设置。

image2021-4-28_14-17-46.png

4. 保存后,可见树形层次已经构建成功。

image2022-4-2_16-43-42.png

自定义单维列表

除了绑定字段外,还可以自定义筛选器列表内容。

在属性设置中找到数据来源,默认为查询结果,即绑定数据的方式。

将其调整为手动添加,然后就可以添加自定义的数据。

image

使用自定义数据来源仅能定义最简单的单一维度列表框。如下图所示。

image

筛选数据排序与过滤

有时我们在使用筛选器时,想要改变排序字段的显示顺序,或者仅显示出部分字段。

快速排序

单击排序按钮即可调整排序字段的显示顺序,支持升序和降序排列。

image

除此之外,您还可以如同其他普通组件一样,为筛选器添加数据排序。

数据排序

单击筛选器的数据排序按钮,然后添加排序。

image

选择排序字段,支持使用字段值,其他的字段以及自定义顺序三种排序方法。

image2021-3-1_11-56-47.png

  • 字段值:设置按照字段值的顺序排序,如果绑定字段为字符串类型的字段,则按首字母顺序进行排序;如果绑定字段为数值类型,则按照数值大小进行排序。可选择升序或降序。

  • 字段:选择一个非当前绑定的字段进行排序。

  • 自定义顺序:自定义设置排序字段中数据的排列顺序。选中一个数据,单击右侧的上下箭头进行顺序的排列。

数据筛选

有时不需要将所有的字段内容都显示出来,单击筛选器右上角的数据筛选按钮,添加筛选器。

image

比如我们仅需要筛选2018和2019年的数据,则可以通过筛选将其他年份隐藏起来。

有关筛选器的具体介绍,详见数据筛选

设置多维列表框筛选器

选择筛选器,打开仪表板设计器右侧的属性设置面板。

比如通过选择模式属性来控制筛选器是单选模式还是多选模式。

还可以关闭筛选器的查找功能。

image

有关属性设置的详细介绍,请您参考: