logologo
Get Started
Tutorials
Guide
Development
Plugins
API
Home
English
简体中文
日本語
한국어
Español
Português
Deutsch
Français
Русский
Get Started
Tutorials
Guide
Development
Plugins
API
Home
logologo
Overview

Blocks

Overview

Data Blocks

Table
Form
Details
List
Grid Card
Chart

Filter Blocks

Form
Tree

Other Blocks

Action Panel
Iframe
Markdown
JS Block

Block Settings

Data Scope
Layout
Block Linkage Rules
Field Linkage Rules
Sorting Rules
Drag-and-drop Sorting
Block Deletion
Block Title
Form Drafts
Block Height
Form Drafts

Fields

Overview

Generic Settings

Table Column
Detail Form Item
Filter Form Item
Form Item

Specific Settings

Date
File Manager
Sub-form
Select
Picker
Cascade Select
Sub-table
Sub-detail
Title
JS Field
JS Item
JS Column
JS Column

Field Settings

Default Value
Field Label
Show Label
Field Tooltip
Data Scope
Field Component
Number Format
Pattern
Required
Title Field
Validation Rules
Association Field

Actions

Overview

Action Settings

Edit Button
Double Check
Assign Values
Bind Workflow
Edit Popup
Action Linkage Rules

Action Types

Add New
View
Delete
Edit
Import
Import Pro
Export
Export Pro
Export Attachments
Filter
Link
Custom Request
Pop-up
Refresh
Submit
Trigger Workflow
Update Record
Bulk Update
Bulk Edit
Add Child
JS Action
JS Action
JS Item
Action Permissions

Advanced

Linkage Rules
Event Flow
Variables
RunJS
UI Templates
Previous PageForm
Next PageAction Panel

#Tree Filter

#Introduction

The Tree Filter block provides filtering capabilities through a hierarchical tree structure. It is suitable for data with parent-child relationships, such as product categories or organizational structures.
Users can select nodes at different levels to apply cascading filters to connected data blocks.

#How to Use

The Tree Filter block must be used together with a data block to provide filtering functionality.

Configuration steps:

  1. Enable configuration mode, then add a "Tree Filter" block and a data block (such as a "Table Block") to the page.
  2. Configure the Tree Filter block by selecting a tree-structured data collection (e.g., a product category table).
  3. Set up the connection between the Tree Filter block and the data block.
  4. Once configured, click on tree nodes to filter the data in the connected block.

#Add Block

In configuration mode, click the "Add block" button on the page, then select "Tree" under the "Filter blocks" category to add a Tree Filter block.

#Block Settings

#Connect data blocks

The Tree Filter block must be connected to a data block to take effect.
Through the "Connect data blocks" setting, you can link the Tree Filter with table, list, chart, or other data blocks on the page to enable filtering.

#Title field

Specifies the field used as the display title for each tree node.

#Search

When enabled, users can quickly locate tree nodes using keywords.

#Expand all

Controls whether all tree nodes are expanded by default when the page is first loaded.

#Include child nodes when filtering

When enabled, selecting a node will include all its child nodes in the filtering scope.
This is useful when you want to view all data under a parent category.