普元EOS中tree(mini.Tree)

Posted wwwcf1982603555

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了普元EOS中tree(mini.Tree)相关的知识,希望对你有一定的参考价值。

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");

 

以上是关于普元EOS中tree(mini.Tree)的主要内容,如果未能解决你的问题,请参考以下文章

普元EOS7.5相关设置

EOS 坑 右击java文件封装成Web Service不弹界面

软件测试——StringFunction测试

Python——各类品牌库爬虫Demo

Python——各类品牌库爬虫Demo

Python——各类品牌库爬虫Demo