Skip to main content

Tree Filter Usage

Scenario Introduction

There are hierarchical relationships between options, and a more convenient way is needed to categorize and select options.

Tree Filter Creation

Add a new tree filter.

Tree filter editing is roughly the same as selection type filters, with minor adjustments:

step1, select dataset;

step2, select fields.

At least 2 fields, you can add more fields. The order of fields is the hierarchical relationship of options. The first field is the parent node of options, the second field is its child nodes, and so on (it is recommended not to exceed 5 fields, too many may cause lag)

step3, edit filter name, default name is the combination of selected fields (for example, province-city), can be modified by yourself.

step4, select type. Supports single selection and multiple selection.

step5, select style. Dropdown and flat list. This version can prioritize dropdown support to meet most needs.

step6, set default value. Only supports setting default values in fixed value form, that is, directly select options.

step7, filter method, default without path

Others, in the options box, after selecting fields, the option tree is displayed synchronously.

Filtering and sorting support using selected fields.

image.png

Supplements

  1. Tree filters support search;

  2. Tree filters support select all if multiple selection;

  3. Prerequisites for using tree filters (or best operation recommendations): Child nodes under each node of tree filters have no duplicate values.

(If there are duplicate values, no special treatment is done, that is, the unique path problem of duplicate values is not handled.)

Tree Filter Linkage

  1. Linkage Creation
  • Only need to configure the linkage of the lowest-level leaf nodes. Parent node fields don't need linkage.

Parent nodes are equivalent to helping summarize the option values of leaf nodes. The linkage that ultimately takes effect is the linkage of leaf node options.

  1. Linkage Effect

If a leaf node is selected, the frontend displays the leaf node option name, and the linkage condition is also the leaf node option;

If a parent node is selected, the frontend displays the parent node option name, but the actual linkage condition is all leaf node options under that parent node.