基於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 此，歡迎查看。