jQuery LigerUI 插件介绍及使用之ligerTree

on 2011-4-17 in 博文摘选 | 0 Comment
一，简介
ligerTree的功能列表：
1,支持本地数据和服务器数据(配置data或者url)
2,支持原生html生成Tree
3,支持动态获取增加/修改/删除节点
4,支持大部分常见的事件
二，第一个例子
引入库文件
遵循LigerUI系列插件的设计原则(插件尽量单独)，ligerTree是一个单独的插件，也就是说只需要引入plugins/ligerTree.js和样式css文件就可以使用(当然必须先引入jQuery)，再找个例子中，我把tree用到的样式和图片分离了出来，有兴趣的朋友可以下载来看看


加入HTML

  • 节点1
    • 节点1.1
      • 节点1.1.1
      • 节点1.1.2
    • 节点1.2

调用ligerTree
$("#tree1").ligerTree();
效果图
jQuery LigerUI 插件介绍及使用之ligerTree
三，常用场景
场景一：不使用复选框：
$("#tree2").ligerTree({ checkbox: false });
场景二：不使用复习框和图标：
$("#tree3").ligerTree({ checkbox: false, parentIcon: null, childIcon: null });
效果如图：
jQuery LigerUI 插件介绍及使用之ligerTree
场景三：配置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', _disibledevent=>function _disibledevent=>'onBeforeSelect:' + note.data.text); return true; } function _disibledevent=>'onSelect:' + note.data.text); } function _disibledevent=>'onBeforeExpand:' + note.data.text); } function _disibledevent=>'onExpand:' + note.data.text); } function _disibledevent=>'onBeforeCollapse:' + note.data.text); } function _disibledevent=>'onCollapse:' + note.data.text); } function _disibledevent=>'onCheck:' + note.data.text + " checked:" + checked); }
场景九：异步动态加载节点 var manager = null; $(function () { $("#tree1").ligerTree( { url: 'json.txt', _disibledevent=>= $("#tree1").ligerGetTreeManager(); }); function _disibledevent=>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} 非叶节点的图标 true
p.childIcon {String} 非叶节点的图标 true
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)
  • 是否包含子节点

ligerTree(p)
  • 使一段html配置为树结构。

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
{jQuery} ligerTree(p)
描述:
  • 使一段html配置为树结构。

参数列表:
参数名 类型 描述 默认值
p {Object} 主要参数
p.url {String} 设置一个url用于加载数据 null
p.data {String} 设置一个本地数据data用于加载数据 null
p.checkbox {Bool} 是否显示复选框 true
p.parentIcon {String} 非叶节点的图标 true
p.childIcon {String} 非叶节点的图标 true
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
返回值:
{jQuery} jQuery对象
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)

Tags: 

延伸阅读

最新评论

发表评论