SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfineui-tree

fineui-tree

General & other

View repository

Updated 10-16 06:52

About this skill

FineUI Tree Skill (Tree)

When to Use

  • Display hierarchical data (organizational structure, regions, menus, categories)
  • Checkbox tree + cascade selection + read selected nodes
  • Node click/expand events, asynchronous lazy loading of child nodes

Before You Start

  1. Which syntax? F.js / Pro / Core-MVC / Core-RazorForms / Core-RazorPages / Java (for determination see fineui-foundation）。
  2. Where do the nodes come from? Hard-coded statically / built in backend code (C# Tree.Nodes.Add(new TreeNode{...}) or ViewBag; Java Tree1.addNode(node) + node.addChild(child))/ asynchronous lazy loading.
  3. Do you want checkboxes? checkbox(F.js) / EnableCheckBox(C#) / enable-check-box(Java) + cascade CascadeCheck / cascade-check。

Quick overview of each syntax (one static tree)

// ① F.js —— rootNode.children 挂节点，节点是 JSON 对象
F.create({
    type: 'Tree', isFluid: true, id: 'Tree1', renderTo: '#wrap', height: 300, title: '树控件',
    rootNode: { expanded: true, children: [
        { text: '中国', id: 'china', expanded: true, children: [
            { text: '河南省', id: 'henan', children: [
                { text: '驻马店市', id: 'zhumadian' },
                { text: '漯河市', id: 'luohe' }
            ] }
        ] }
    ] }
});

<%-- ② Pro（WebForms）：<Nodes> 里 <f:TreeNode> 嵌套 --%>
<f:Tree ID="Tree1" runat="server" IsFluid="true" ShowHeader="true" Title="树控件">
    <Nodes>
        <f:TreeNode Text="中国" NodeID="china" Expanded="true">
            <f:TreeNode Text="河南省" NodeID="henan" Expanded="true">
                <f:TreeNode Text="驻马店市" NodeID="zhumadian" />
                <f:TreeNode Text="漯河市" NodeID="luohe" />
            </f:TreeNode>
        </f:TreeNode>
    </Nodes>
</f:Tree>

// ③ Core-MVC（Fluent API）
@(F.Tree().IsFluid(true).ID("Tree1").ShowHeader(true).Title("树控件")
    .Nodes(
        F.TreeNode().Text("中国").NodeID("china").Expanded(true).Nodes(
            F.TreeNode().Text("河南省").NodeID("henan").Expanded(true).Nodes(
                F.TreeNode().Text("驻马店市").NodeID("zhumadian"),
                F.TreeNode().Text("漯河市").NodeID("luohe")
            )
        )
    ))

<!-- ④ Core-TagHelper（RazorForms / RazorPages，写法相同）-->
<f:Tree ID="Tree1" IsFluid="true" ShowHeader="true" Title="树控件">
    <Nodes>
        <f:TreeNode Text="中国" NodeID="china" Expanded="true">
            <f:TreeNode Text="河南省" NodeID="henan" Expanded="true">
                <f:TreeNode Text="驻马店市" NodeID="zhumadian" />
            </f:TreeNode>
        </f:TreeNode>
    </Nodes>
</f:Tree>

<!-- ⑤ FineUI.Java（Thymeleaf 方言：标签/属性全 kebab-case；节点用 <f:nodes> 包裹）-->
<f:tree id="Tree1" is-fluid="true" show-header="true" title="树控件">
    <f:nodes>
        <f:tree-node text="中国" node-id="china" expanded="true">
            <f:tree-node text="河南省" node-id="henan" expanded="true">
                <f:tree-node text="驻马店市" node-id="zhumadian"></f:tree-node>
            </f:tree-node>
        </f:tree-node>
    </f:nodes>
</f:tree>

The Java structure corresponds exactly to Core-RazorForms: container <f:tree>, child node collection tag <f:nodes>(Core is <Nodes>), node <f:tree-node>. All attributes are kebab-case (is-fluid/show-header/node-id); the initially selected node uses the container attribute selected-node-id="..."。

Documentation Reference Files

File When to read
references/nodes-data.md Node attributes, icons, backend node construction, data binding (DataSet recursion)
references/checkbox-events.md Checkbox tree/cascade/read selected, node click/expand events, asynchronous lazy loading

Related Skills

  • fineui-foundation: syntax determination, naming conventions
  • fineui-window: pop up an edit window after a tree node is clicked

Constraints & Rules

  1. Determine the syntax first, do not mix: F.js node attributes are camelCase (text/id/expanded）；C# TreeNode PascalCase（Text/NodeID/Expanded）；Java tag attributes are kebab-case (text/node-id/expanded）. F.js uses id, C# uses NodeID，Java tags use node-id—but Java's TreeNode Bean uses getId()/setId(...)(not NodeID）。
  2. Cascade selection is CascadeCheck / cascade-check: not AutoCheckParent/AutoCheckChildNodes(these do not exist).
  3. To read selected nodes use GetCheckedNodes()(C# returns TreeNode[]；Java getCheckedNodes() returns List<TreeNode>); there is no GetCheckedNodeIDs. F.js client getCheckedNodes(true)。
  4. The way to read selected items differs by syntax：RazorForms / Java uses the control field Tree1.GetCheckedNodes() / Tree1.getCheckedNodes(); MVC/RazorPages use the client getCheckedNodes(true) serialized and posted back JArray. See references/checkbox-events.md。
  5. Lazy loading uses OnNodeLazyLoad / on-node-lazy-load + AutoLeafIdentification="false" / auto-leaf-identification="false" + node Leaf / leaf(not EnableAjax）；Leaf=false lazy loading is triggered when the node expands,Leaf=true is a leaf.
  6. Node client actions use ClickHandler / click-handler: the value only writes the page's named function, with signature (event, nodeId); explicitly returning false can cancel subsequent default actions and server-side events. Do not write OnClientClick / on-client-click。
  7. Never fabricate APIs: if unsure, check the official website API or F/doc/ JSDoc。

Official Resources