jstree是一个基于jQuery的树形控件，支持XML、JSON和HTML三种数据源格式，提供节点的创建、重命名、移动和删除操作。其主要特性包括异步加载、拖放支持、多语言本地化和主题支持。文档还详细描述了JSON数据格式、使用规则以及元数据的定义。

1. jsTree v 0.9.8 jQuery Plugin Speaker:chloe

2. jsTree jsTree jsTree 是一個基於 jQuery 的 Tree 控件。支持 XML ， JSON ， Html 三種數據源。提供創建，重命名，移動，刪除，拖“放節點操作。可以自己自定義創建，刪除，嵌套，重命名，選擇節點的規則。在這些操作上可以添加多種監聽事件。 Currently supported browsers are: Internet Explorer 6 +, Mozilla Firefox, Safari 3, Opera 9+, Google Chrome. The latter three are not thoroughly tested.

3. jsTree - Key features Data sources : predefined HTML - convert nested lists into a tree on the fly JSON - provide a json object XML - provide a nested structure or a flat (id -> parent_id) one Async loading - just provide an URL and the tree will request data as needed (works for XML & JSON sources) Open, close, rename, create, delete nodes (all with definable rules) Various callbacks (onchange, oncreate, ondelete, onload, etc …) Drag & drop support (definable with rules) Multiple select Localization - maintain the same tree in as many languages as you like Right-to-left support (supported in both supplied themes) Theme support (change icons, sizes, backgrounds, etc …) Animated open & close (configurable) Optional keyboard navigation multitree support - move/copy nodes form to tree to tree (definable with rules) i.e. {rules : { multitree : true}} also works as a jQuery plugin

4. jsTree - Required & optional files four files are required : source/_lib/jquery.js (version 1.3.2) source/_lib/css.js source/tree_component.js source/tree_component.css

5. jsTree - Data of Json format 定義 json data 的格式 attributes object 可以放支援此 tag 的屬性 all members of the attributes object node get copied to the <li> node in the output HTML as attributes i.e. {attributes:{id: “id_value”,rel= “rel_value”}} all attributes in any data object get copied to the <a> node i.e. {data:{attributes:{“key”: “value”}}

6. jsTree - Data of json fomat with Langs. 只定義多國 標題 時採用 : i.e. {data:{“en”: “en_title”, “zh_TW” : “ 中文標題” , …}} 定義更多屬性時採用 : i.e. {data: “en” :{title: “en_title,attributes: {}}, “ zh_TW” : {title: “ 中文標題” ,attributes:{}}}

7. jsTree - Rules 定義 Rules i.e. {dragrules : [ &quot;folder * folder&quot;, &quot;file after root2&quot;, &quot;tree-drop inside root2&quot; ]} jsTree 基本使用的規則是 [ before, after, inside, * ] 為固定樣式 . 而 folder, file , root2 … 是依照我們自己定義的 , 我們可以在 rel 這個屬性裡定義我們想要的值 .

8. jsTree - Metadata Import jquery.metadata.js 在 Json data 裡宣告 mdata 的屬性 在 jsTree 的 Configuration 定義 {rules : { metadata : &quot;mdata&quot;, use_inline : true}} 擁有 mdata 屬性的 node 會根據 mdata 裡定義的 rules 去執行

9. jsTree - Others cookies 屬性 , 可以儲存當下使用者 open/close 或是 select 的 nodes 的狀態 Checkbox 的使用 使用 treeobj.create() method 會自動 check rules of creatable. 如果 creatable 不允許 root 建立 , 會影響 create() method Treeobj()

10. Reference http://www.cnblogs.com/Mecin/archive/2008/11/25/1340853.html http://jstree.com/reference/index.html JSTree http://code.google.com/p/jstree/ JSTree

11. jsTree v 0.9.9a 改版