jQuery LigerUI 插件介绍及使用之ligerTree

一，简介 

ligerTree的功能列表：

1,支持本地数据和服务器数据(配置data或者url)

2,支持原生html生成Tree

3,支持动态获取增加/修改/删除节点

4,支持大部分常见的事件

5,支持获取选中行等常见的接口方法

 

二，第一个例子

引入库文件

遵循LigerUI系列插件的设计原则(插件尽量单独)，ligerTree是一个单独的插件，也就是说只需要引入plugins/ligerTree.js和样式css文件就可以使用(当然必须先引入jQuery)，在这个例子中，我把tree用到的样式和图片分离了出来，有兴趣的朋友可以下载来看看

  

   
   

    
        
    
    <
    
    script 
    
    src
    
    ="lib/jquery/jquery-1.3.2.min.js"
    
     type
    
    ="text/javascript"
    
    ></
    
    script
    
    >
    
    
    
    
    <
    
    link 
    
    href
    
    ="lib/ligerUI/skins/Aqua/css/ligerui-tree.css"
    
     rel
    
    ="stylesheet"
    
     type
    
    ="text/css"
    
     
    
    />
    
    
    
    
    <
    
    script 
    
    src
    
    ="lib/ligerUI/js/plugins/ligerTree.js"
    
     type
    
    ="text/javascript"
    
    ></
    
    script
    
    >
   
   

加入HTML

  

   
   

    
    <
    
    ul 
    
    id
    
    ="tree1"
    
    >
    
    
        
    
    <
    
    li
    
    >
    
    
            
    
    <
    
    span
    
    >
    
    节点1
    
    </
    
    span
    
    >
    
    
            
    
    <
    
    ul
    
    >
    
    
                
    
    <
    
    li
    
    >
    
    
                    
    
    <
    
    span
    
    >
    
    节点1.1
    
    </
    
    span
    
    >
    
    
                     
    
    <
    
    ul
    
    >
    
    
                        
    
    <
    
    li
    
    ><
    
    span
    
    >
    
    节点1.1.1
    
    </
    
    span
    
    ></
    
    li
    
    >
    
    
                        
    
    <
    
    li
    
    ><
    
    span
    
    >
    
    节点1.1.2
    
    </
    
    span
    
    ></
    
    li
    
    >
    
    
                     
    
    </
    
    ul
    
    >
    
    
                 
    
    </
    
    li
    
    >
    
    
                 
    
    <
    
    li
    
    ><
    
    span
    
    >
    
    节点1.2
    
    </
    
    span
    
    ></
    
    li
    
    >
    
    
            
    
    </
    
    ul
    
    >
    
    
        
    
    </
    
    li
    
    >
    
       
    
    
    </
    
    ul
    
    >
    
     
   
   

调用ligerTree

$( "#tree1" ).ligerTree();

效果图

三，常用场景

场景一：不使用复选框： 

   
   

    
    $(
    
    "
    
    #tree2
    
    "
    
    ).ligerTree({ checkbox: 
    
    false
    
     });
   
   

场景二：不使用复习框和图标： 

   
   

    
    $(
    
    "
    
    #tree3
    
    "
    
    ).ligerTree({ checkbox: 
    
    false
    
    , parentIcon: 
    
    null
    
    , childIcon: 
    
    null
    
     });
   
   

效果如图：



场景三：配置data参数加载树：



   
   

    
     $(
    
    "
    
    #tree1
    
    "
    
    ).ligerTree({ data: [
                { text: 
    
    '
    
    节点1
    
    '
    
    , children: [
                    { text: 
    
    '
    
    节点1.1
    
    '
    
     },
                    { text: 
    
    '
    
    节点1.2
    
    '
    
     },
                    { text: 
    
    '
    
    节点1.3
    
    '
    
    , children: [
                         { text: 
    
    '
    
    节点1.3.1
    
    '
    
     },
                         { text: 
    
    '
    
    节点1.3.2
    
    '
    
     }
                    ]
                    },
                    { text: 
    
    '
    
    节点1.4
    
    '
    
     }
                 ]
                },
                { text: 
    
    '
    
    节点2
    
    '
    
     },
                { text: 
    
    '
    
    节点3
    
    '
    
     },
                { text: 
    
    '
    
    节点4
    
    '
    
     }
            ]
            });
   
   

场景四：配置url参数加载树：

  

   
   

    
    $(
    
    "
    
    #tree1
    
    "
    
    ).ligerTree({ url: 
    
    '
    
    json.txt
    
    '
    
     });
   
   

场景五：动态增加节点：



   
   

    
            var
    
     manager 
    
    =
    
     
    
    null
    
    ;
        $(
    
    function
    
     ()
        {
            $(
    
    "
    
    .l-tree
    
    "
    
    ).ligerTree({ checkbox: 
    
    true
    
     });
    
    
            manager 
    
    =
    
     $(
    
    "
    
    .l-tree
    
    "
    
    ).ligerGetTreeManager();
        });
        
    
    function
    
     addTreeItem()
        {
            
    
    var
    
     node 
    
    =
    
     manager.getSelected();
            
    
    var
    
     nodes 
    
    =
    
     [];
            nodes.push({ text: ‘测试节点’});
            
    
    if
    
     (node)
                manager.append(node.target, nodes); 
            
    
    else
    
    
                manager.append(
    
    null
    
    , nodes);
        }
   
   

场景六：删除节点：

  

   
   

    
    function
    
     removeTreeItem()
        {
            
    
    var
    
     node 
    
    =
    
     manager.getSelected();
            
    
    if
    
     (node)
                manager.remove(node.target);
            
    
    else
    
    
                alert(
    
    '
    
    请先选择节点
    
    '
    
    );
        }
   
   

场景七：折叠/展开节点：

  

  
   
   

    
            
    
    function
    
     collapseAll()
        {
            manager.collapseAll();
        }
        
    
    function
    
     expandAll()
        {
            manager.expandAll();
        }
   
   

场景八：事件支持：

  

   
   

    
     $(
    
    function
    
     ()
        {
            $(
    
    "
    
    #tree1
    
    "
    
    ).ligerTree(
            {   
                url: 
    
    '
    
    json.txt
    
    '
    
    ,  
                onBeforeExpand: onBeforeExpand,
                onExpand: onExpand,
                onBeforeCollapse: onBeforeCollapse,
                onCollapse: onCollapse, 
                onBeforeSelect: onBeforeSelect,
                onSelect: onSelect,
                onCheck: onCheck
            }); 
        });
        
    
    function
    
     onBeforeSelect(note)
        {
            alert(
    
    '
    
    onBeforeSelect:
    
    '
    
     
    
    +
    
     note.data.text);
            
    
    return
    
     
    
    true
    
    ;
        }
        
    
    function
    
     onSelect(note)
        {
            alert(
    
    '
    
    onSelect:
    
    '
    
     
    
    +
    
     note.data.text);
        }
        
    
    function
    
     onBeforeExpand(note)
        {
            alert(
    
    '
    
    onBeforeExpand:
    
    '
    
     
    
    +
    
     note.data.text);
        }
        
    
    function
    
     onExpand(note)
        {
            alert(
    
    '
    
    onExpand:
    
    '
    
     
    
    +
    
     note.data.text);
        }
        
    
    function
    
     onBeforeCollapse(note)
        {
            alert(
    
    '
    
    onBeforeCollapse:
    
    '
    
     
    
    +
    
     note.data.text);
        }
        
    
    function
    
     onCollapse(note)
        {
            alert(
    
    '
    
    onCollapse:
    
    '
    
     
    
    +
    
     note.data.text);
        }
        
    
    function
    
     onCheck(note, checked)
        {
            alert(
    
    '
    
    onCheck:
    
    '
    
     
    
    +
    
     note.data.text 
    
    +
    
     
    
    "
    
     checked:
    
    "
    
     
    
    +
    
     checked);
        } 
   
   

场景九：异步动态加载节点

   
   

    
     
    
    var
    
     manager 
    
    =
    
     
    
    null
    
    ;
        $(
    
    function
    
     ()
        {
            $(
    
    "
    
    #tree1
    
    "
    
    ).ligerTree(
            {   
                url: 
    
    '
    
    json.txt
    
    '
    
    ,  
                onBeforeExpand: onBeforeExpand 
            });
            manager 
    
    =
    
     $(
    
    "
    
    #tree1
    
    "
    
    ).ligerGetTreeManager();
        }); 
        
    
    function
    
     onBeforeExpand(note)
        {
            
    
    if
    
     (note.data.children 
    
    &&
    
     note.data.children.length 
    
    ==
    
     
    
    0
    
    )
            {
                
    
    //
    
    这里模拟一个加载节点的方法，append方法也用loadData(target,url)代替
    
    

    
                    manager.append(note.target, [
                { text: note.data.text 
    
    +
    
     
    
    "
    
    's child1
    
    "
    
     },
                { text: note.data.text 
    
    +
    
     
    
    "
    
    's child2
    
    "
    
     },
                { text: note.data.text 
    
    +
    
     
    
    "
    
    's child3
    
    "
    
     }
               ]);
            }
        } 
   
   

四，API文档

  

 

插件方法详细

{jQuery}  ligerTree(p)

描述:

• 使一段html配置为树结构。

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.url	{String}	设置一个url用于加载数据	null
p.method	{String}	提交数据的方式	'POST'
p.data	{String}	设置一个本地数据data用于加载数据	null
p.checkbox	{Bool}	是否显示复选框	true
p.parentIcon	{String}	非叶节点的图标	'folder'
p.childIcon	{String}	叶节点的图标	'leaf'
p.attribute	{Array}	属性,获取行数据时很有作用	['id','url']
p.nodeWidth	{Int}	节点的宽度	70
p.onBeforeExpand	{Function}	展开前事件,可以通过返回false来阻止继续展开 参数1：node(node.data和node.target) target是DOM对象	null
p.onExpand	{Function}	展开事件 参数1：node(node.data和node.target) target是DOM对象	null
p.onBeforeCollapse	{Function}	折叠前事件,可以通过返回false来阻止继续折叠 参数1：node(node.data和node.target) target是DOM对象	null
p.onCollapse	{Function}	折叠事件 参数1：node(node.data和node.target) target是DOM对象	null
p.onBeforeSelect	{Function}	选择前事件,可以通过返回false来阻止继续选择 参数1：node(node.data和node.target) target是DOM对象	null
p.onSelect	{Function}	选择事件 参数1：node(node.data和node.target) target是DOM对象	null
p.onCheck	{Function}	复选框事件 参数1：node(node.data和node.target) target是DOM对象 参数2：checked 是否选中	null
p.onSuccess	{Function}	异步加载数据成功事件	null
p.onError	{Function}	异步加载数据失败事件 参数1：XMLHttpRequest 参数2：textStatus 参数2：errorThrown	null

返回值:

{jQuery} jQuery对象

 

 

ligerTree 接口方法列表 （可通过LigerGetTreeManager获取对象）

append(parentNode, newdata) 增加节点集合

clear() 清空

collapseAll() 全部节点都折叠

demotion(treenode) 降级为叶节点级别

expandAll() 全部节点都展开

getChecked() 获取选择的行(复选框)

getData() 获取树的数据源

getParentTreeItem(treenode, level) 获取父节点

getSelected() 获取选择的行

hasChildren(treenode) 是否包含子节点

loadData(node, url, param) 加载数据

remove(node) 删除节点

upgrade(treenode) 升级为父节点级别

方法详细

append(parentNode, newdata)

描述:

• 增加节点集合

参数列表:

参数名	类型	描述	默认值
parentNode	{Object}	节点(DOM 对象 标签为li),加载的数据将增加到这个节点下面
newdata	{Array}	节点数据的集合,该参数为数组

---

clear()

描述:

• 清空

---

collapseAll()

描述:

• 全部节点都折叠

---

demotion(treenode)

描述:

• 降级为叶节点级别

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象 标签为li)

---

expandAll()

描述:

• 全部节点都展开

---

{Array}  getChecked()

描述:

• 获取选择的行(复选框)

返回值:

{Array} Nodes 每一个Node包括的参数有：data(数据源),target(DOM 对象 标签为li)

---

{Array}  getData()

描述:

• 获取树的数据源

返回值:

{Array} Tree Data Object

---

{Bool}  getParentTreeItem(treenode, level)

描述:

• 获取父节点

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象 标签为li)
level	{Object}	获取第N级别的父节点(选填，不填时表示上一级父节点)

返回值:

{Bool} hasChildren

---

{Object}  getSelected()

描述:

• 获取选择的行

返回值:

{Object} Node 节点包括的参数有：data(数据源),target(DOM 对象 标签为li)

---

{Bool}  hasChildren(treenode)

描述:

• 是否包含子节点

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象 标签为li)

返回值:

{Bool} hasChildren

---

loadData(node, url, param)

描述:

• 加载数据

参数列表:

参数名	类型	描述	默认值
node	{Object}	节点(DOM 对象 标签为li),加载的数据将增加到这个节点下面
url	{String}	要加载数据的URL
param	{String}	提交数据的附件的参数

---

remove(node)

描述:

• 删除节点

参数列表:

参数名	类型	描述	默认值
node	{Object}	节点(DOM 对象 标签为li)

---

upgrade(treenode)

描述:

• 升级为父节点级别

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象 标签为li)

五,Demo下载

点击下载（已更新源码地址）

更多的文档和API后面会渐渐补充,浏览更多的应用请访问http://demo.LigerUI.com