基于jquery的树-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值，数组