jQuery LigerUI 插件介绍及使用之ligerTree
2016-06-27 15:46
866 查看
一,简介
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
[b]效果图[/b]
[b]三,常用场景[/b]
[b]场景一:不使用复选框:[b] [/b][/b]
$("#tree2").ligerTree({ checkbox: false });
[b][b]场景二:[/b]不使用复习框和图标:[/b][b][b][b] [/b][/b][/b]
$("#tree3").ligerTree({ checkbox: false, parentIcon: null, childIcon: null });
效果如图:
[b]
[/b]
[b][b]场景三:配置data参数加载树[/b]:[/b]
[b][/b]
$("#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' }
]
});
[b][b]场景四:配置url参数加载树[/b]:[/b]
[b][b][b] [/b][/b][/b]
$("#tree1").ligerTree({ url: 'json.txt' });
[b][b]场景五:动态增加节点[/b]:[/b]
[b][b][b][/b][/b][/b]
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);
}
[b][b]场景六:删除节点[/b]:[/b]
[b][b][b] [/b][/b][/b]
function removeTreeItem()
{
var node = manager.getSelected();
if (node)
manager.remove(node.target);
else
alert('请先选择节点');
}
[b][b]场景七:折叠/展开节点[/b]:[/b]
[b][b][b] [/b][/b][/b]
function collapseAll()
{
manager.collapseAll();
}
function expandAll()
{
manager.expandAll();
}
[b][b]场景八:事件支持[/b]:[/b]
[b][b][b] [/b][/b][/b]
$(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);
}
[b][b][b]场景九:异步动态加载节点[/b][/b][/b]
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配置为树结构。
参数列表:
返回值:{jQuery} jQuery对象
ligerTree 接口方法列表 (可通过LigerGetTreeManager获取对象)
方法详细
append(parentNode, newdata)
描述:
增加节点集合
参数列表:
clear()
描述:
清空
collapseAll()
描述:
全部节点都折叠
demotion(treenode)
描述:
降级为叶节点级别
参数列表:
expandAll()
描述:
全部节点都展开
{Array} getChecked()
描述:
获取选择的行(复选框)
返回值:{Array} Nodes 每一个Node包括的参数有:data(数据源),target(DOM 对象 标签为li)
{Array} getData()
描述:
获取树的数据源
返回值:{Array} Tree Data Object
{Bool} getParentTreeItem(treenode, level)
描述:
获取父节点
参数列表:
返回值:{Bool} hasChildren
{Object} getSelected()
描述:
获取选择的行
返回值:{Object} Node 节点包括的参数有:data(数据源),target(DOM 对象 标签为li)
{Bool} hasChildren(treenode)
描述:
是否包含子节点
参数列表:
返回值:{Bool} hasChildren
loadData(node, url, param)
描述:
加载数据
参数列表:
remove(node)
描述:
删除节点
参数列表:
upgrade(treenode)
描述:
升级为父节点级别
参数列表:
五,Demo下载[b]点击下载(已更新源码地址)[/b]更多的文档和API后面会渐渐补充,浏览更多的应用请访问http://demo.LigerUI.com
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
[b]三,常用场景[/b]
[b]场景一:不使用复选框:[b] [/b][/b]
$("#tree2").ligerTree({ checkbox: false });
[b][b]场景二:[/b]不使用复习框和图标:[/b][b][b][b] [/b][/b][/b]
$("#tree3").ligerTree({ checkbox: false, parentIcon: null, childIcon: null });
效果如图:
[b]
[/b]
[b][b]场景三:配置data参数加载树[/b]:[/b]
[b][/b]
$("#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' }
]
});
[b][b]场景四:配置url参数加载树[/b]:[/b]
[b][b][b] [/b][/b][/b]
$("#tree1").ligerTree({ url: 'json.txt' });
[b][b]场景五:动态增加节点[/b]:[/b]
[b][b][b][/b][/b][/b]
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);
}
[b][b]场景六:删除节点[/b]:[/b]
[b][b][b] [/b][/b][/b]
function removeTreeItem()
{
var node = manager.getSelected();
if (node)
manager.remove(node.target);
else
alert('请先选择节点');
}
[b][b]场景七:折叠/展开节点[/b]:[/b]
[b][b][b] [/b][/b][/b]
function collapseAll()
{
manager.collapseAll();
}
function expandAll()
{
manager.expandAll();
}
[b][b]场景八:事件支持[/b]:[/b]
[b][b][b] [/b][/b][/b]
$(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);
}
[b][b][b]场景九:异步动态加载节点[/b][/b][/b]
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 |
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} | 节点数据的集合,该参数为数组 |
描述:
清空
collapseAll()
描述:
全部节点都折叠
demotion(treenode)
描述:
降级为叶节点级别
参数列表:
参数名 | 类型 | 描述 | 默认值 |
treenode | {Object} | 节点(DOM 对象 标签为li) |
描述:
全部节点都展开
{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级别的父节点(选填,不填时表示上一级父节点) |
{Object} getSelected()
描述:
获取选择的行
返回值:{Object} Node 节点包括的参数有:data(数据源),target(DOM 对象 标签为li)
{Bool} hasChildren(treenode)
描述:
是否包含子节点
参数列表:
参数名 | 类型 | 描述 | 默认值 |
treenode | {Object} | 节点(DOM 对象 标签为li) |
loadData(node, url, param)
描述:
加载数据
参数列表:
参数名 | 类型 | 描述 | 默认值 |
node | {Object} | 节点(DOM 对象 标签为li),加载的数据将增加到这个节点下面 | |
url | {String} | 要加载数据的URL | |
param | {String} | 提交数据的附件的参数 |
描述:
删除节点
参数列表:
参数名 | 类型 | 描述 | 默认值 |
node | {Object} | 节点(DOM 对象 标签为li) |
描述:
升级为父节点级别
参数列表:
参数名 | 类型 | 描述 | 默认值 |
treenode | {Object} | 节点(DOM 对象 标签为li) |
相关文章推荐
- C#项目发布到IIS后CSS及Jquery出现问题的几种情况
- Jquery用法
- jquery获取所有checked的value
- jquery的链式操作以及事件绑定
- jQuery的deferred对象详解
- 详解强大的jQuery选择器之过滤选择器、表单选择器
- jQuery实现表格的checkbox全选/取消全选
- jquery实现360浏览器宣传单页
- jQuery获取多种input值的方法
- JSP中Uploadify插件的使用(jQuery上传插件)
- jQuery事件详解
- 理解jquery的$.extend()、$.fn和$.fn.extend()
- jQuery时间格式转换
- jquery常用的操作思维导图
- 使用jquery实现的按需加载
- jquery广告滚动框
- 欢迎使用CSDN-markdown编辑器
- jquery中去重复排序(函数: $.grep() join() sort() )
- jquery 序列化
- jQuery设计思想