jQuery LigerUI 插件中ligerTree的使用介绍

一，简介

ligerTree的功能列表：

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

2,支持原生html生成Tree

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

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

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

二，第一个例子

引入库文件

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

加入HTML

调用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' });

场景五：动态增加节点：

场景六：删除节点：

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

场景九：异步动态加载节点（应用树树形结构数据量大时，可以采用异步动态加载，提高检索效率）

四，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) 升级为父节点级别

upgrade(treenode)

jQuery LigerUI 插件中ligerTree的使用介绍

相关推荐