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

分类: 02.LigerUI

标签: LigerUI

绿色通道：好文要顶已关注收藏该文与我联系

谢略
关注 - 25
粉丝 - 620

荣誉：推荐博客

我在关注他取消关注

(请您对文章做出评价)

« 上一篇： jQuery LigerUI 插件介绍及使用之ligerDateEditor
» 下一篇： jQuery LigerUI V1.0(包括API和全部源码) 发布

posted on 2011-04-17 23:35 谢略阅读( 17661) 评论( 34) 编辑收藏

#1楼回复引用

高海东 | 2011-04-18 08:29

好东西，性能怎么样

支持(0) 反对(0)

#2楼回复引用

Jacob Song | 2011-04-18 08:50

对啊，这个插件功能强大啊，

#3楼回复引用

Daniel Chow | 2011-04-18 09:16

不错!

#4楼回复引用

Genius Zhang | 2011-04-18 09:22

想参考一下脚本，但发现脚本被压缩过的，是否有未压缩版的？liger.googlecode.com这个访问出错

#5楼回复引用

小狮座 | 2011-04-18 09:27

请问，这个开源吗？发现脚本是被压缩过，也不太好看？

#6楼 [楼主] 回复引用

谢略 | 2011-04-18 09:33

@Genius Zhang
不好意思，地址搞错了，是 http://ligerui.googlecode.com/

#7楼 [楼主] 回复引用

@小狮座
下载这个是压缩过的，可以到上面说的这个地址去下载源码

#8楼回复引用

风云 | 2011-04-18 10:28

很强大,不错！

#9楼回复引用

NET程序白痴 | 2011-04-18 11:04

好东西！

#10楼回复引用

蔡迅 | 2011-04-18 11:58

不错，支持一下。。。

#11楼 [楼主] 回复引用

谢略 | 2011-04-18 13:01

@高海东
tree node 节点的dom结构是采用<ul></ul>的方式，最大程度地减少了生成html的代码量，效率更加高。

#12楼回复引用

yydy | 2011-04-24 15:31

非常非常不错

#13楼回复引用

zhouyu | 2011-05-15 01:23

怎么指定节点url的目标？比如点击打开在指定框架中？

#14楼 [楼主] 回复引用

谢略 | 2011-05-16 09:16

@zhouyu
树提供了接口，建议看下API，在指定框架中打开并不难

#15楼回复引用

micenter | 2011-06-22 16:19

你好，谢略。能不能改tree 的结点图标。包过那个收缩的图标

#16楼 [楼主] 回复引用

谢略 | 2011-06-24 21:27

@micenter
p.parentIcon {String} 非叶节点的图标 'folder'
p.childIcon {String} 叶节点的图标 'leaf'

可以修改这两个

#17楼回复引用

longhua828 | 2011-06-27 14:33

背景：我需要让tree菜单项自动适应宽度

tree组件的nodeWidth属性当值为'auto'的时候在IE6下报错，应该是IE6本身的问题，在IE6下改为'100%'就没事了

相关代码：

var param = {
checkbox: false,
nodeWidth: 'auto'
};

if($.browser.msie){
if('6.0' == $.browser.version) {
param.nodeWidth='100%';
}
}

$(".tree").ligerTree(param);

#18楼回复引用

happylys | 2011-06-28 23:09

我使用jquery1.6.1的时候不能正常工作，而jquery1.3.2下真诚，以下是客户端调用方法：
var manager = null;
$(function ()
{
manager = $("#tree1").ligerTree({ url: '/Module/ModuleService.aspx?source=LigerTree' });
});

服务端返回数据：
[
{ text: "节点1", children: [
{ text: "节点1.1" },
{ text: "节点1.2" },
{ text: "节点1.3", children: [
{ text: "节点1.3.1" ,children: [
{ text: "节点1.3.1.1" },
{ text: "节点1.3.1.2" }]
},
{ text: "节点1.3.2" }
]
},
{ text: "节点1.4" }
]
},
{ text: "节点2" },
{ text: "节点3" },
{ text: "节点4" }
]

#19楼回复引用

happylys | 2011-06-28 23:10

另外请教如果这种方式调用，如何将其它一些数据如attribute也加载到tree，可以再客户端访问？

#20楼 [楼主] 回复引用

谢略 | 2011-06-29 09:24

@happylys
属性名需要加上双引号："text"

#21楼 [楼主] 回复引用

谢略 | 2011-06-29 09:26

@happylys
json数据源里面有的属性都可以在客服端访问的。
如果需要绑定到树节点Dom对象(tagName为li)，可以配置attribute，默认是['id','url']

#22楼回复引用

cxlong_beta | 2011-08-08 18:59

最近用了楼主的ligerTree，感觉不错，提供选择使用的api很多
但有几个问题
1. 展开，收起的动画效果可以设置参数进行调整么
2. 性能问题在IE6中，一百多个<li>用起来就很慢了，我看到ligerui.all.js中有很多地方频繁调用$(xxx)方法，可以多用一些临时变量处理下，性能应该会有很大改善
3. 为啥资源文件那么大一个个的，一个icon 10+k @.@

#23楼回复引用

旋转 | 2011-11-17 21:42

我用了你的下拉框tree，请问一般下拉框是分前台显示值和它对应的id值，在你这个tree中我怎么运用？因为我后台操作需要的id值，并非前台显示的文本值！

#24楼 [楼主] 回复引用

谢略 | 2011-11-20 15:38

@旋转
可以参考 http://ligerui.com/demos/tree/treedbdata.htm这个

#25楼 [楼主] 回复引用

谢略 | 2011-11-20 15:41

@cxlong_beta
资源文件可能没有太多考虑效率，可以考虑合并图片。。。
新版本的展开效果可以设置这个参数：slide (false)

#26楼回复引用

旋转 | 2011-11-21 16:12

我用了你的下拉框加载树控件，
我在数据返回中加了个id，看了你api之后绑定，在火狐
<input id="organtype_val" type="hidden" name="organtype_val" value="3">
value有值，但是在ie中没有值楼主怎么解决

#27楼回复引用

旋转 | 2011-11-21 16:28

现在好了，是ie在调试时不支持动态显示我日了

#28楼回复引用

i_mint | 2012-05-21 17:09

请问如何在onclick事件中同时触发onCheck事件并改变复选框的状态？在zTree中可以实现，但ligerUI中不知道如何实现

#29楼回复引用

紫寻落 | 2012-08-10 17:37

要是数据在加载时，怎么让节点那出现等待的小图标啊？？？

#30楼回复引用

风晨 | 2012-09-24 23:34

请教一下，如果js对tree进行默认选中呀

#31楼回复引用

Rock_Choke | 2012-10-11 18:13

你好，我想问下如果
comboBox里的tree做异步加载的话
ligerTree的ligerGetTreeManager() 该怎么使用呢？
按照demo里的方式来，获取不到。
谢谢！

支持(1) 反对(0)

#32楼回复引用

有时很认真 | 2012-10-16 23:00

除了ligerUI自己提供的实例和API以外，没有一点有用的。

#33楼回复引用

GhostRider_zkc | 2012-11-16 19:51

tree可以在url里面传参吗

#34楼回复引用

paluano | 2013-12-26 10:32

请问下事件支持中，比如onSelect，当事件发生时，如何获取该节点到根目录的所有节点？
应用场景是这样的：我现在要对某个文件夹根目录做目录树，但是通过处理后产生的书目录结构的每一个节点中中只有当前文件夹的名字，现在我想单击某个节点，然后找到从根目录到该节点的路径（这个路径有其它用途），我该怎么实现？谢谢！

其实就是想要得到一个路径。谢谢！

jQuery LigerUI 插件介绍及使用之ligerTree

你可能感兴趣的:(ligerUI)