JQuery
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/网页特效"></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
view sourceprint?
$("#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 ()
{
$("#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" }
]);
}
}
手机扫描下方二维码，关注php100官方微信。
同步官网每日更新，为您带来随时随地的资讯与技术信息。
更有不定期的互动抽奖活动，赢取实用贴心的小礼物。
除非特别声明，PHP100新闻均为原创或投稿报道，转载请注明作者及原文链接
原文地址：
http://www.php100.com/html/program/jquery/2013/0905/5789.html
延伸阅读 More
Copyright (C) 2007-2014 PHP100.com, All Rights Reserved 版权所有 粤ICP备15117877号-4
粤ICP备15117877号-3
话题作者
头衔:无
活跃成员
