Introduction #

The CRUD tree query area displays a hierarchical tree directory on the left side of the table. Clicking a leaf node automatically passes parameters to the table dataset, enabling data filtering by hierarchy. Suitable for organizational structures, product categories, regional dictionaries, and other parent-child hierarchy data query scenarios.

Enable Tree Query Area #

• Create a lazy-load dataset, e.g., dataset #3
• Write the query for parent-child relationship:

-- Simple approach when no duplicate names
select father, child from table

-- When duplicates exist, use code-based approach
select father, child, fatherName, childName from table

• In the “Data Management” panel, fill in the “Tree area” field, e.g., 3
• Save, then refresh the page for changes to take effect
• The tree query area will appear on the left

Implement Query Functionality #

• When clicking a leaf node, a parameter named _label is automatically passed to the table dataset, and the table data is auto-refreshed
• The passed value defaults to the child value
• To change the passed value, include a field named param in the query — the param value will be passed instead:

select father, child, father+child as param from table

Custom Tree Area #

• Override the tree area in the template:

{% block body_tree %}
<div class="tree_div" style="width:150px;font-size:12px">
  <el-tree :data="tree_data" @node-click="handleNodeClick">
    <span slot-scope="{ node, data }">
      <span :class="data.children?'el-icon-folder-opened':''">{[ data.label ]}</span>
  </el-tree>
</div>
{% endblock %}

Custom Tree Click Action #

vapp.handleNodeClick = (node, data) => {
    if (data.isLeaf) {
        let param = data.data.param || data.data.id
        if (param == filter_param._label) { param = '' }
        ds_setParam('_label', param)
        vapp.refreshTable()
        vapp.data_filter()
    }
}