普元EOS中tree（mini.Tree）

Posted 2021-02-01 wwwcf1982603555

Extend
mini.DataGrid

Usage
<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:300px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" >        
</ul>

官方api网址http://www.miniui.com/docs/api/index.html#ui=tree

一、创建Tree
<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:300px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" >        
</ul>
数据结构：树形
通过url返回的数据结构如下：

[
    {id: "base", text: "Base", expanded: false,
        children: [
            {id: "ajax", text: "Ajax"},
            {id: "json", text: "JSON"},
            {id: "date", text: "Date"},
            {id: "control", text: "Control"},
            {id: "messagebox", text: "MessageBox"},
            {id: "window", text: "Window"}
        ]
    },
    ...
]

　　

二、创建Tree
<ul id="tree1" class="mini-tree" url="../data/listTree.txt" style="width:200px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="false"  
    >
</ul>
注意：idField、parentField、resultAsTree属性。

数据结构：列表
通过url返回的数据结构如下：

[
    {id: "base", text: "Base", expanded: false},    
    {id: "ajax", text: "Ajax", pid: "base"},
    {id: "json", text: "JSON", pid: "base"},
    ......
]
其中，id和pid对应父子关系。

三、创建Tree
没有设置url。

<ul id="tree3" class="mini-tree" style="width:300px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" >        
</ul>
javascript设置数据
var tree3 = mini.get("tree3");
tree3.loadData([
    { id: "lists", text: "Lists", expanded: false,
        children: [
            { id: "datagrid", text: "DataGrid" },
            { id: "tree", text: "Tree" },
            { id: "treegrid", text: "TreeGrid " }
        ]
            },
    { id: "layouts", text: "Layouts", expanded: false,
        children: [
            { id: "panel", text: "Panel" },
            { id: "splitter", text: "Splitter" },
            { id: "layout", text: "Layout " }
        ]
    },
    { id: "navigations", text: "Navigations", expanded: false,
        children: [
            { id: "pager", text: "Pager" },
            { id: "tabs", text: "Tabs" },
            { id: "navbar", text: "NavBar" },
            { id: "menu", text: "Menu" }
        ]
    }
]);

四、Html标签创建节点
<ul id="tree2" class="mini-tree" style="width:200px;padding:5px;" showTreeIcon="true">
    <li>
        <span>MiniUI</span>
        <ul>
            <li>
                <span expanded="false">Form</span>
                <ul>                           
                    <li>ComboBox</li>
                    <li>DatePicker</li>
                    <li>Spinner</li>
                    <li>TreeSelect</li>
                </ul>
            </li>
            <li>
                <span expanded="false">Lists</span>
                <ul>
                    <li><a href="../datagrid/datagrid.html" target="_blank" style="color:Blue;text-decoration:underline;">DataGrid</a></li>
                    <li>Tree</li>
                </ul>
            </li>    
            <li>
                <span expanded="false">Layouts</span>
                <ul>
                    <li>Panel</li>
                    <li>Splitter</li>
                    <li>Layout</li>
                </ul>
            </li>         
            <li>
                <span expanded="false">Navigations</span>
                <ul>
                    <li>Tabs</li>
                    <li>NavBar</li>
                    <li>Menu</li>
                    <li>Pager</li>                            
                </ul>
            </li>             
        </ul>
    </li>                       
</ul>

 

懒加载树

树操作：增加、删除、修改、移动
参考示例：增加、删除、修改节点


增加节点
var tree = mini.get("tree1");
var node = tree.getSelectedNode();
var newNode = {};
tree.addNode(newNode, "before", node);
删除节点
var node = tree.getSelectedNode();
tree.removeNode(node);
编辑节点
var node = tree.getSelectedNode();            
tree.beginEdit(node);  
移动节点
tree.moveNode(node, targetNode, "before");