一,简介
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配置为树结构。
-
参数列表:
- 参数1:node(node.data和node.target) target是DOM对象
- 参数1:node(node.data和node.target) target是DOM对象
- 参数1:node(node.data和node.target) target是DOM对象
- 参数1:node(node.data和node.target) target是DOM对象
- 参数1:node(node.data和node.target) target是DOM对象
- 参数1:node(node.data和node.target) target是DOM对象
- 参数1:node(node.data和node.target) target是DOM对象
- 参数2:checked 是否选中
- 参数1:XMLHttpRequest
- 参数2:textStatus
- 参数2:errorThrown
参数名 | 类型 | 描述 | 默认值 |
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来阻止继续展开
| null |
p.onExpand | {Function} | 展开事件
| null |
p.onBeforeCollapse | {Function} | 折叠前事件,可以通过返回false来阻止继续折叠
| null |
p.onCollapse | {Function} | 折叠事件
| null |
p.onBeforeSelect | {Function} | 选择前事件,可以通过返回false来阻止继续选择
| null |
p.onSelect | {Function} | 选择事件
| null |
p.onCheck | {Function} | 复选框事件
| null |
p.onSuccess | {Function} | 异步加载数据成功事件 | null |
p.onError | {Function} | 异步加载数据失败事件
| null |
-
返回值:
- {jQuery} jQuery对象
append(parentNode, newdata)
|
clear()
|
|
demotion(treenode)
|
|
|
getData()
|
getParentTreeItem(treenode, level)
|
|
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