基于jquery的树-xtree操作文档

 

XTREE使用的树结构

 

<!--node节点-->
<li  nodeid="1">
<!--开关-->
<button></button>
<!--label-->
<a>
   <!--图标-->
   <button></button>
   <!--文字节点-->
   <span></span>
</a>
<!--子节点-->
<ul></ul>
</li>

 

XTREE使用的数据格式

 xtree使用标准的JSON数据:

 

var data = {
    id:1,//id值,用于标示当前节点,必须
   pid:0,//父级ID，用于创建层级关系,必须
   name:'xtree',//节点显示名称,必须
   isFinal:0|1,//是否为终节点,必须
   ico:'',//图标,可选
   cls:'',//附加css class,可选
   url:'javascript:;' //链接地址,可选
}

  所提供的数据必须满足此数据格式的必须选项。

 

基本使用方法:

HTML.
<!--树结构容器-->
<ul id="xtree"></ul>

JS.

var tree = xtree("#tree").init(data);

 

构造一颗简单的树:

json数据:
var xRole = [{"id":0,"pid":0,"name":"角色","isFinal":0,"cls":"xtree-root"},{"id":"1","name":"超级管理员","pid":"0","isFinal":"1"},{"id":"2","name":"注册用户","pid":"0","isFinal":"1"},{"id":"3","name":"VIP付费用户","pid":"0","isFinal":"1"},{"id":"4","name":"游客","pid":"0","isFinal":"1"},{"id":"5","name":"编辑","pid":"0","isFinal":"1"}];

JS:
var role = xtree("#role").init(xRole);

结果如图所示:

xtree是无限分级的，这完全取决于您提供的数据。

XTREE提供的方法接口

xtree提供了一套方法用来控制树的某些行为，您可以通过这些方法实现一些高级功能，比如异步加载子节点，关联树。

方法名	参数说明	功能说明
init(f)	f:该参数是多态的，如果该参数 是一个标准的JSON数据，xtree 则使用此数据构造树结构。如果您 的树结构已生成(必须符合xtree树结构), 则该参数有三个可选值: open:默认打开, close:默认关闭, 不提供此参数，使用树结构自身的设置	构造树结构
bindLabelNode(evt, callback)	evt:标准事件名称(click...) callback:回调函数,回调函数中的this指向 当前节点	给文字节点添加事件
contextMenu(m)	m:右键菜单，如果调用此方法，在labelnode上 点击右键会生成菜单，并屏蔽系统菜单。 m遵循以下数据结构: m = {    "菜单名":function(ui){} }; 每个回调函数会接受一个参数ui,格式如下: ui = {      item:node,//当前点击的li节点    target:object,//当前点击的labelnode    last:true|false,//是否是最后一个    isFinal:0|1,//是否是终节点    first:true|false,//是否是第一个    handler:xtree,//xtree对象   };	右键菜单
append(node, data)	node:li节点，可以通过ui.item获取, data:标准json数据	追加
prepend(node, data)	node:li节点，可以通过ui.item获取, data:标准json数据	前置
remove(node)	node:li节点，可以通过ui.item获取	删除
onSwitch(callback)	callback:回调函数,接收一个ui参数, ui ={    item:node,//li节点    handler:xtree,//xtree对象 }	当展开，关闭树时触发
checkbox(f)	f:此参数为多态，如果传入一个以","分割id值， xtree会将相应的节点选中。如果传入的是一个 callback回调函数,则点击checkbox会触发此函数 并传回一个参数ui, ui = {    item:node,//li节点    handler:xtree,//xtree对象    target:checkbox,//当前点击对象    checked:1|0,//是否选中    event:e//标准事件对象 }	使用多选功能，xtree使用三态 标识。
getChecked()	无	返回选中项的id值，数组

 

 

 

 

 

 

 

 

 

标