jQuery LigerUI 插件介绍及使用之ligerTree
来源:互联网 发布:hadoop和云计算知乎 编辑:程序博客网 时间:2024/05/22 01:49
一,简介
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用于加载数据nullp.method{String}提交数据的方式'POST'p.data{String}设置一个本地数据data用于加载数据nullp.checkbox{Bool}是否显示复选框truep.parentIcon{String}非叶节点的图标'folder'p.childIcon{String}叶节点的图标'leaf'p.attribute{Array}属性,获取行数据时很有作用['id','url']p.nodeWidth{Int}节点的宽度70p.onBeforeExpand{Function}展开前事件,可以通过返回false来阻止继续展开
- 参数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
- 返回值:
- {jQuery} jQuery对象
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
0 0
- jQuery LigerUI 插件介绍及使用之ligerTree
- jQuery LigerUI 插件介绍及使用之ligerTree
- jQuery LigerUI 插件介绍及使用之ligerTree
- jQuery LigerUI 插件中ligerTree的使用介绍
- jQuery LigerUI 插件介绍及使用之ligerGrid
- jQuery LigerUI 插件介绍及使用之ligerGrid
- jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable
- jQuery LigerUI 插件介绍及使用之ligerDateEditor
- jQuery LigerUI 插件介绍及使用之ligerGrid
- jQuery LigerUI 插件介绍及使用之ligerGrid
- jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable
- jQuery LigerUI ligerTree展开指定节点
- ligerUI 的介绍及在.net使用
- ligerUI ligerTree多种实现方式
- jQuery LigerUI 介绍
- Jquery日历插件介绍及使用
- jQuery LigerUI 使用教程
- jQuery遮罩插件jQuery.blockUI介绍及使用
- 常用的服务器操作命令
- CSS性能优化
- 如何将文件夹打成jar包
- C# 串口操作系列(4) -- 协议篇,文本协议数据解析
- 二叉搜索树及其C++实现
- jQuery LigerUI 插件介绍及使用之ligerTree
- 常常困扰C语言初学者的几个问题
- [shell] getopts使用
- codeforces爆做
- 《Motion Design for iOS》(二十八)
- 你见过工资高的程序员炫富 来7拍一下
- Android自动滚动 轮播循环的ViewPager
- TQ2440 PWM驱动程序设计(内核2.6.30.4)
- 仿百度智能导诊页面