Js tree

jsTree v 0.9.8 jQuery Plugin Speaker:chloe

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.

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

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

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”}}

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:{}}}

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

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

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

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

Js tree

More Related Content

What's hot (19)

Viewers also liked (17)

Similar to Js tree (20)

Recently uploaded (20)

Js tree

Editor's Notes