基于jquery的树-xtree操作文档

本文记录基于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提供的方法接口

方法文档已移至 https://github.com/comcoding/xtree/wiki/Methods 此，欢迎查看。