專業版1.6下載下傳位址(CSDN)
版本号:dhtmlxTree v.1.6 Professional edition build 71114
最近開發項目使用到了dhtmlXtree做權限設定,看了網上相關的中文資料很少,就把官方的資料翻譯了下,一共分2部分,API可以參考官方文檔:http://dhtmlx.com/docs/download.shtml
效果圖如下(三态樹):
dhtmlXTree 指南與執行個體
主要特性
多浏覽器/多平台支援
全部由JavaScript控制
動态加載
XML支援
大資料樹動态翻譯(智能XML解析)
拖拽(同一個樹,不同的樹之間,不同的架構之間)
帶多選框(CheckBox)的樹(兩态/三态)
定制圖示(使用JavaScript或xml)
内容菜單(與dhtmlxMenu內建)
結點資料為使用者資料
多行結點
高穩定性
支援Macromedia Cold Fusion
支援Jsp
支援ASP.NET
支援以下浏覽器
IE 5.5或更高版本
Mac OS X Safari
Mozilla 1.4 或更高版本
FireFox 0.9 或更高版本
Opera (Xml加載支援取決于浏覽器版本)
使用dhtmlXTree進行開發在頁面初始化對象
<div id="treeBox" );
tree.enableCheckBoxes(false);
tree.enableDragAndDrop(true);
</script>
構造器有以下參數:
加載樹的容器對象(應該在調用構造器之前被加載)
樹的寬度
樹的高度
樹根的父結點的id(超級根)
指定樹的其他參數:
setImagePath(url) - 設定樹所使用的圖檔目錄位址
enableCheckBoxes(mode) - 打開/關閉多選框(預設打開)
enableDragAndDrop(mode) - 打開/關閉拖拽模式
設定事件處理1.5以上的版本支援一種新的設定事件的方式-使用attachEvent方法.設定一個事件處理方法需要知道事件的名字和所調用的方法.可用的事件名參考這裡(以後會翻譯),在事件處理方法中,可以這樣引用樹對象:
<div id="treeBox" ,onNodeSelect)//set function object to call on node select
//see other available event handlers in API documentation
function onNodeSelect(nodeId){
...
}
很多時候函數要從參數中擷取值.關于傳值得詳細資訊請參考事件文檔(以後翻譯)
使用腳本增加結點
<script>
tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
...
tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED");
tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED");
第4-7的參數都是0(選擇後調用的方法,所使用的圖檔)意味着都使用預設值
最後一個使用逗号分隔的參數可以是以下值(隻能是大寫):
SELECT - 插入後選擇此結點
CALL - 在選擇時調用方法
TOP - 在最上方插入此結點
CHILD - 此結點有子結點
CHECKED - 此結點的多選框被選中(如果有的話)
使用XML加載資料
tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml");
tree.loadXML("http://127.0.0.1/xml/tree.xml");//load root level from xml
在調用時,被打開的結點id(就像url參數一樣)将會被增加到初始化XMLAutoLoading(url) 的URL位址上去
調用loadXML(url)方法不會增加id到url位址上
調用無參的loadXML()将會使用XMLAutoLoading(url)所指定的url位址
XML文法:
<?xml version='1.0' encoding='iso-8859-1'?>
<tree id="0">
<item text="My Computer" id="1" child="1" im0="my_cmp.gif" im1="my_cmp.gif" im2="my_cmp.gif" call="true" select="yes">
<userdata >
PHP腳本需要在頁面頭添加以下代碼:
<?php
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml"); } else {
header("Content-type: text/xml");
echo("<?xml version=/"1.0/" encoding=/"iso-8859-1/"?>/n");
?>
<tree>結點是必須有的.指定加載資料的父結點.這個id參數指定了父結點id.加載根層需要在建立樹的時候指定id:new myObjTree(boxObject,width,height,0)
<itrem>可以包含(為了一次加載多層結點)或者不包含子結點.并且可以包含<itemtext>标簽,可以為結點标簽(label)增加一些HTML (text屬性将會被忽略)
<item id="123">
<itemtext><![CDATA[<font color="red">Label</font>]]></itemtext>
</item>
必要屬性有:
text - 結點顯示的标簽
id - 結點id
可選屬性有:
tooltip - 滑鼠放在結點上提示的資訊
im0 - 沒有子結點的結點顯示的圖檔(将會從setImagePath(url)方法指定的路徑去擷取圖檔)
im1 - 包含子結點的結點展開時顯示的圖檔
im2 - 包含子結點的結點關閉時顯示的圖檔
aCo1 - 沒有選中的結點的顔色
sCol - 選中的結點的顔色
select - 在加載時選擇此結點(可以為任意值)
style - 結點文本風格
open - 展開此結點(可以為任意值)
call - 選擇時調用函數(可以為任意值)
checked - 如果存在的話,選擇此結點的多選框(可以為任意值)
child - 指定結點是否有子結點(1:有,0:無)
imheight - 圖示的高度
imwidth - 圖示的寬度
topoffset - 設定結點和上層結點間的偏移量
radio - 如果非空 則此結點的子結點會有單選按鈕
直接在XML裡面設定使用者資料可以使用<userdata>标簽,此标簽隻有一個參數:name
和 value 去指定使用者資料值
為結點定制圖示有兩種方法去定制結點圖示,這取決于增加結點的方式.注意:樹将會從setImagePath(url)方法指定的路徑去擷取結點圖檔.
Javascript的方式:使用insertNewChild(...)或者insertNewNext(...)方法的參數指定
var im0 = "doc.gif";//icon to show if node contains no children
var im1 = "opened.gif";//if node contains children and opened
var im2 = "closed.gif";//if node contains children and closed
tree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2);
tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif");
XML的方式.使用<item>标簽的屬性:
<item text="My Computer" id="1" child="1" im0="doc.gif" im1="my_opened.gif" im2="my_closed.gif">
</tree>
建構動态樹
如果樹包含很大數量的結點(或者你隻是不想浪費時間去加載隐藏的結點),按照需要去加載他們似乎是更好的選擇,而不是一次性的全部加載進來.是以我們使用XML動态加載樹.請參考"使用XML加載資料"或者查閱"Dynamical Loading in dhtmlxTree v.1.x"
操作結點
一些使用樹的方法來操作結點的例子:
tree=new dhtmlXTreeObject('treeboxbox_tree',"100%","100%",0);
var sID = tree.getSelectedItemId();//get id of selected node
tree.setLabel(sID,"New Label");//change label of selecte node
tree.setItemColor(sID,'blue','red');//set colors for selected node's label (for not selected state and for selected state)
tree.openItem(sID);//expand selected node
tree.closeItem(sID);//close selected node
tree.changeItemId(sID,100);//change id of selected node to 100
alert("This node has children: "+tree.hasChildren(100));//show alert with information if this node has children
序列化樹
序列化方法允許從xml表現形式(xml字元串)中擷取樹.不同程度的序列化會在生成的XML字元串的屬性上面反映出來
tree.setSerializationLevel(userDataFl,itemDetailsFl);
var myXmlStr = tree.serializeTree();
沒有參數的序列化- id,open,select,text,child
參數userDataFl true - userdata
參數itemDetailsFl true - im0,im1,im2,acolor,scolor,checked,open
Tooltips (滑鼠放在結點上所提示的内容)
有三種方法去設定tooltip :
使用結點的label("text"item結點的text屬性)作為tooltip - enableAutoTooltips(mode) - 預設為false
使用item結點的"tooltip"屬性作為tooltip(如果此屬性被設定了則預設使用此方法)
使用setItemText(itemId,newLabel,newTooltip) 方法
移動結點
程式設計式的移動可以使用以下方法:
向上/下/左移動:
tree.moveItem(nodeId,mode)
mode 可以是以下值:
"down" - 把結點移動到下方(不用再意層次關系)
"up" - 把結點移動到上方
"left" - 把結點直接移動到上層位置
直接移動到指定位置(在樹内部)
tree.moveItem(nodeId,mode,targetId)
"item_child" - 把結點移動到第三個參數子結點的位置作為子結點
"item_sibling" -把結點移動到第三個參數兄弟結點的位置作為兄弟結點
targetId - 目标結點的Id To move node into position (to another tree) 移動結點到指定位置(另一個樹)
tree.moveItem(nodeId,mode,targetId,targetTree)
mode 的值參考以上兩個例子 targetId - 目标結點的Id(在targetTree裡面的id). targetTree - 目标樹對象 剪切/粘貼的方式 另一種方式是使用doCut()和doPaste(id)函數-但是這種方法隻能對選中的結點有效.程式員也可以從一個位置删除一個結點然後再另外一個地方再建立一個(也是個辦法:-)).提供給使用者拖拽功能去移動結點
結點計數器
可以顯示指定結點标簽(label)的結點子元素的數量.激活此方法使用以下代碼:
tree.setChildCalcMode(mode);
mode 可以是以下值:
"child" - 這層的所有子結點
"leafs" - 這層的所有沒有子結點的子結點
"childrec" - 所有子結點
"leafsrec" -沒有子結點的所有子結點
"disabled" - 什麼都沒有
其他相關方法: _getChildCounterValue(itemId) - 得到目前的記數值 setChildCalcHTML(before,after) - 包含計數器的html代碼 如果在動态加載中需要設定計數器的值,請在xml中使用child屬性
智能XML解析
智能XML解析的概念很簡單-整個樹結構是從用戶端加載的,但是隻有應該被顯示的結點才會被展示出來.很有效的減少了加載時間和大資料量樹的性能.另外-與動态加載相反的是-腳本方法可以使用整個樹結構(比如搜尋整個樹-而不是隻有被顯示出來的)
用以下方法激活智能XML解析:
tree.enableSmartXMLParsing(true);//false to disable
在樹被完全展開的時候隻能XML解析不會産生作用
樹的多選框
dhtmlxTree支援兩态和三态樹.三态樹有三種狀态:選中/未選中/某些子結點被選中(不是全部)
用以下方法激活三态樹:
tree.enableThreeStateCheckboxes(true)//false to disable
使用智能XML解析的話需要手工設定第三種狀态(checked="-1");
<item checked="-1" ...>
<item checked="1" .../>
<item .../>
</item>
Checkboxes可以被禁用-disableCheckbox(id,state)
一些結點可以隐藏checkboxes - showItemCheckbox(id,state) (nocheckbox xml 屬性)
版本1.4以後 showItemCheckbox可以對整棵樹使用(第一個參數使用0或者null)
樹的單選框
dhtmlxTree支援但選按鈕 使用以下代碼對整棵樹進行設定
tree.enableRadiobuttons(true);
對某些特定的結點使用單選按鈕(代替多選框)
tree.enableCheckboxes(true);
tree.enableRadiobuttons(nodeId,true);
預設情況下單選按鈕是根據層次分組的,但是版本1.4以後可以對整棵樹進行設定:
tree.enableRadiobuttons(true)
Checkboxs相關的API和XML屬性也适用于radiobuttons(參考radiobuttons方法描述)
拖拽技術
拖拽有三種模式(使用setDragBehavior(mode)方法進行設定)
當作子結點拖拽-"child"
當作兄弟結點拖拽-"sibling"
複合模式(前兩種模式一起)- "complex" 每一種模式還有兩種子模式:
1. 普通拖拽
2. 複制拖拽 - tree.enableMercyDrag(1/0)
所有模式都可以在運作時改變
事件處理
在處理結點放下之前的事件使用-attachEvent("onDrag",func)如果func沒有傳回true,将會取消拖拽.将結點放下後會有另一個事件-onDrop-使用attachEvent("OnDrop",func)進行處理.兩種方法都會傳給func對象5個參數
被拖拽結點的id
目标結點的id
前目标結點(如果拖拽的是兄弟結點)
源樹對象
目标樹對象
兩個架構之間的拖拽
預設情況下架構間的拖拽是開啟的.隻需要把下列代碼加在頁面上沒有樹的地方
<script src="codebase/dhtmlxcommon.js"></script>
new dhtmlDragAndDropObject();
提高性能
如果生成DHTML樹的性能很低,有兩種途徑去改進大資料樹的性能:
1.Dynamical Loading(動态加載)
2.Smart XML Parsing(智能XML解析)
3.Distributed Parsing(分布式解析)
4.Smart Rendering(動态顯示)
另外確定你的樹組織的很好-把很多個結點放在同一層很不美觀并且降低性能,雖然分布式解析或者智能顯示可以解決這個問題
上下文菜單
在dhtmlxTree裡面可以建構上下文菜單.菜單的上下文可以使用XML或者腳本進行設定.改變上下文菜單内容取決于樹結點開發人員可以實作函數隐藏/顯示同一個菜單的結點或者不同菜單的不同結點.下面的代碼激活上下文菜單
//init menu
aMenu=new dhtmlXContextMenuObject('120',0,"../codebase/imgs/");
aMenu.menu.loadXML("menu/_context.xml");
aMenu.setContextMenuHandler(onMenuClick);
//init tree
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.enableContextMenu(aMenu); //link context menu to tree
function onMenuClick(id){
alert("Menu item "+id+" was clicked");
}
HTTPS 相容
為了相容HTTPS,我們需要為上下文菜構造器增加兩個參數
Images URL
Dummy page URL (url of the page to use for iframes src /now they are empty as iframes are used to make menu be positioned under selectboxes in IE/ in menu to make it compatible with https)
//init menu compatible with sHTML
aMenu=new dhtmlXContextMenuObject('120',0,"imgs/","empty.html");
重新整理結點
refreshItems(itemIdList,source) 僅重新整理itemIdList裡面的結點(不包含它們的子結點)
refreshItem(itemId) - 重新整理itemId指定的子結點.自動加載會被激活
結點排序
專業版本中可以對結點進行排序(需要dhtmlxtree_sb.js)使用以下方式:根據标簽(label)文本(如果沒有定制比較描述符)
tree.sortTree(nodeId,order,all_levels);
nodeId - 開始排序層的父結點id(如果是超級根Id,排序整棵樹)
order - 排序方向:"升序"/"降序"
all_levels - 如果為true,則所有子層都會被排序
//define your comparator (in our case it compares second words in label)
function mySortFunc(idA,idB){
a=(tree.getItemText(idA)).split(" ")[1]||"";
b=(tree.getItemText(idB)).split(" ")[1]||"";
return ((a>b)?1:-1);
tree = new ...
//attach your comparator to the tree
tree.setCustomSortFunction(mySortFunc);
比較函數有兩個結點id,使用樹對象和id傳回一個比較結果.如果定制比較函數被指定.則tree.sortTree(...)方法使用此函數排序
查找功能
dhtmlxTree的查找功能允許開發人員把注意力從比對标簽(label)搜尋碼中解脫出來,支援智能XML解析腳本文法
tree.findItem(searchString); //find item next to current selection
tree.findItem(searchString,1,1)//find item previous to current selection
tree.findItem(searchString,0,1)//search from top
例子包含在專業版中-samples/treeExPro2.html
允許在多行顯示樹結點.建議關掉避免影響外觀.開啟多行功能需要以下代碼:
tree.enableTreeLines(false);
tree.enableMultiLineItems(true);
例子包含在專業版中-samples/treeExPro6.html
樹的圖示
設定圖示
有一種方法可以使用腳本設定圖示(setItemImage,setItemImage2)或者xml (im0,im1,im2 attributes of item node):
im0 - 沒有子結點的結點
im1 - 有子結點的關閉結點
im2 - 有子結點的打開結點
設定圖示大小
有一種方法可以使用腳本或者xml為整棵樹或者每個結點設定圖示大小: XML設定每個結點的圖示大小(可選):<item ... imheight="Xpx" imwidth="Xpx"></item>
腳本文法:
tree.setIconSize(w,h);//set global icon size
tree.setIconSize(w,h,itemId)//set icon size for particular item
鍵盤導航
預設情況下dhtmlxTree沒有支援鍵盤功能,但是可以在頁面中增加dhtmlxtree_kn.js 檔案去開啟鍵盤支援,隻需要下面一條指令:
<script src="../codebase/ext/dhtmlxtree_kn.js"></script>
tree.enableKeyboardNavigation(true);
預設按鍵:
Up arrow - 選擇上面的結點
Down arrow - 選擇下面的結點
Right arrow - 打開結點
Left arrow - 關閉結點
Enter - 調用結點方法
也可以指定自己的按鍵如下:
tree.assignKeys([["up",104],["down",98],["open",102],["close",100],["call",101]]);
"up"/"down"/"open"/"close"/"call" 是可用的動作,數字是按鍵代碼
分布式解析
另一種增加大資料樹(每層100-200個結點)性能的方法是分布式解析,這個是企業版才有的功能.最大的好處是可以在樹完全被解析之前看到樹的層次并準備使用.使用以下指令激活這個功能:
tree.enableDistributedParsing(mode,count,timeout);
參數:
mode - 必要參數- true/false - 開啟/關閉分布解析
count - 可選參數- 配置設定結點的數量
timeout - 可選參數- 兩部分結點之間延遲的毫秒數,這個功能完全和智能XML解析相容
錯誤處理
一些dhtmlxTree異常可以被捕獲并且處理
function myErrorHandler(type, desc, erData){
alert(erData[0].status)
dhtmlxError.catchError("ALL",myErrorHandler);
支援錯誤類型:
"All"
"LoadXML"
處理函數參數:
type - 字元串(如上)
desc - 錯誤描述(寫死)
erData - 錯誤相關對象數組(如下).
Type
Object(s)
LoadXML
[0] - response object
Cold Fusion 标簽
<cf_dhtmlXTree
>
...configuration xml...
</cf_dhtmlXTree>
name - [optional] name of the tree js object to use in javascript, if skiped, then name autogenerated
width - [optional] width of the tree (definitely it sets the with of the tree box, leaving the with of the tree itself by 100%)
height - [optional] height of the tree
JSPath - [optional] absolute or relative path to directory which contains tree js files, "js" directory by default
CSSPath - [optional] absolute or relative path to directory which contains tree css files, "css" directory by default
iconspath - [optional] absolute or relative path to directory which contains tree icon files, "img" directory by default
xmldoc - [mandatory for xml loading] url of the xml file used to load levels dynamically
checkboxes - [optional] show checkboxes (none, twoState, threeState)
dragndrop - [optional] activate drag-&-drop (true,false)
style - [optional] style for the tree box
onSelect - [optional] javascript function to call on node selection
oncheck - [optional] javascript function to call on node (un)checking
onDrop - [optional] javascript function to call on node drop
im1 - [optional] default image used for child nodes
im2 - [optional] default image used for opened branches
im3 - [optional] default image used for closed branches For description of optional configuration xml - see chapter "Loading data with XML"
Minimal possible tag syntax with on-page xml:
<cf_dhtmlXTree>
<item text="Top node" id="t1" >
<item text="Child node 1" id="c1" ></item>
<item text="Child node 2" id="c2" ></item>
</cf_dhtmlXTree>
Minimal possible tag syntax with server-side xml:
<cf_dhtmlXTree xmldoc="tree.xml">
With images specified:
<cf_dhtmlXTree
im1="book.gif"
im2="books_open.gif"
im3="books_close.gif">
<item text="Mystery " id="mystery" open="yes" >
<item text="Lawrence Block" id="lb" >
<item text="All the Flowers Are Dying" id="lb_1" />
<item text="The Burglar on the Prowl" id="lb_2" />
<item text="The Plot Thickens" id="lb_3" />
<item text="Grifters Game" id="lb_4" />
<item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
</item>
<item text="Robert Crais" id="rc" >
<item text="The Forgotten Man" id="rc_1" />
<item text="Stalking the Angel" id="rc_2" />
<item text="Free Fall" id="rc_3" />
<item text="Sunset Express" id="rc_4" />
<item text="Hostage" id="rc_5" />
<item text="Ian Rankin" id="ir" ></item>
<item text="James Patterson" id="jp" ></item>
<item text="Nancy Atherton" id="na" ></item>
With Events Handlers,Checkboxes and Drag-n-drop:
<cf_dhtmlXTree
dragndrop="true"
checkboxes="twoState"
onSelect="onClick"
onCheck="onCheck"
onDrop="onDrag">
<item text="Mystery " id="mystery" open="yes" >
<item text="Lawrence Block" id="lb" >
<item text="All the Flowers Are Dying" id="lb_1" />
<item text="The Burglar on the Prowl" id="lb_2" />
<item text="The Plot Thickens" id="lb_3" />
<item text="Grifters Game" id="lb_4" />
<item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
</item>
<item text="Robert Crais" id="rc" >
<item text="The Forgotten Man" id="rc_1" />
<item text="Stalking the Angel" id="rc_2" />
<item text="Free Fall" id="rc_3" />
<item text="Sunset Express" id="rc_4" />
<item text="Hostage" id="rc_5" />
<item text="Ian Rankin" id="ir" ></item>
<item text="James Patterson" id="jp" ></item>
<item text="Nancy Atherton" id="na" ></item>
可編輯結點
1.3版本後dhtmlxTree專業版可以使用可編輯結點.隻須在頁面中引用dhtmlxtree_ed.js 去開啟這個功能:
<script src="../codebase/ext/dhtmlxtree_ed.js"></script>
tree.enableItemEditor(mode);
參數如下:
mode - 必要參數- true/false - 開啟/關閉可編輯結點
Event: 使用事件處理可以處理可編輯結點的不同階段的事件,可以使用attachEvent("onEdit",handlerFunc)來設定. 在編輯過程中有4個不同的階段:開始編輯前(可取消),編輯開始後,編輯結束前(可取消),編輯結束後 處理方法的4個參數如下:
state - 0 開始編輯前, 1 編輯開始後, 2 編輯結束前, 3 編輯結束後
id - 可編輯結點的id
tree - 樹對象
value - 隻有2階段可以使用,編輯的值
同步與伺服器更新
通常的樹操作-比如拖拽(包括不同樹間的),删除結點,插入結點,更新結點标簽(label)-在1.3版本後可以使用資料處理模型(dataProcessor module)與伺服器上的資料庫進行同步更新.主要特性如下:
更新/插入結點,使用黑體字,删除結點-使用一條橫線穿過
可以定義資料處理模式(自動/手動).更新/删除結點的資料發送到指定的伺服器URL(我們叫它伺服器處理器).伺服器處理器應該可以傳回普通的xml和自定的格式化格式(如下),讓樹知道伺服器是否成功進行處理,所有存儲後的過程都會被自動處理
使用以下步驟開啟此功能:
頁面中包含dhtmlxdataprocessor.js
為樹建立資料處理(dataProcessor)對象
<script src="../codebase/dhtmlxdataprocessor.js"></script>
tree.init();
myDataProcessor = new dataProcessor(serverProcessorURL);
myDataProcessor.init(treeObj);
dataProcessor構造器參數如下:
serverProcessorURL - 必要參數- 處理接收資料檔案的Url位址.如果使用伺服器端運作.那麼就是"dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree"
myDataProcessor.init方法的參數是:
treeObj - 必要參數- 配置設定資料處理器(dataProcessor )的樹對象
如果不需要使用built-in伺服器處理器(serverProcessor)而是使用自己的檔案處理資料,需要知道以下幾點:
所有資料從Get域中擷取
- tr_id - 結點ID - tr_order - 同層結點順序 - tr_pid - 父結點 - tr_text -結點文字(label) - 使用者資料塊和名字一起傳來 - !nativeeditor_status - 如果存在并且值是"inserted"則為插入操作,值為"deleted"為删除操作,不存在或者值為"updated"是更新操作
伺服器處理器(serverProcessor )應該傳回以下格式的XML資料:
<data>
<action type='insert/delete/update' sid='incomming_node_ID' tid='outgoing_node_ID'/>
</data>
隻有對于插入結點來說incomming_node_ID和outgoing_node_ID 是兩個不同的值.其他操作這兩個值時一樣的.對于統一伺服器端運作時(PHP5/mySQLk可用)使用以下步驟:
yourTree.loadXML(url) 使用 "dhtmlxDataProcessor/server_code/PHP/get.php?ctrl=tree" 為參數
new dataProcessor(url) 使用"dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree" 為參數
在dhtmlxDataProcessor/server_code/PHP/db.php 中配置連接配接
在dhtmlxDataProcessor/server_code/PHP/tree_data.xml 中指定表的相應列值
從HTML初始化
可以使用html List或者内聯XML來建立一個樹.無論哪種方法都要在放置在一個DIV元素裡面,DIV元素當作樹的容器(XML應該包含XMP标簽-見下面代碼)任何樹以set或者enable開頭的方法可以當作DIV元素的屬性使用去設定樹的屬性.可以自動轉換或者調用腳本函數
自動轉換
在頁面中包含 dhtmlxtree_start.js
把DIV元素的class屬性設定為dhtmlxTree
使用腳本方法轉換
調用dhtmlXTreeFromHTML函數,把DIV元素的id當作第一個參數傳進去
var myTree = dhtmlXTreeFromHTML('listBox');
使用html List初始化
<div
class="dhtmlxTree"
id="treeboxbox_tree"
setImagePath="../codebase/imgs/"
>
<ul>
<li>Root</li>
<ul>
<li>Child1
<ul>
<li>Child 1-1</li>
</ul>
</li>
<li>Child2</li>
<li>Bold Italic </li>
</ul>
</li>
</ul>
</div>
使用内聯XML初始化
關于dhtmlxTree XML結構的詳細内容清參照 Loading data with XML
<div id="treeboxbox_tree2" setImagePath="../codebase/imgs/" class="dhtmlxTree" >
<xmp>
<item text="Root" open="1" id="11">
<item text="Child1" select="1" open="1" id="12">
<item text="Child1-1" id="13"/>
<item text="Child2" id="14"/>
<item id="15" text="Text"/>
< /xmp>
Version/Edition: v1.4/Professional/Standard Required js file:dhtmlxtree_start.js
動态顯示(Smart Rendering)
如果樹的每層都有很大數量的結點(500或者更多),可以嘗試使用動态(Smart Rendering)顯示來增加性能.資料結構不需要做任何變化-隻需要使用enableSmartRendering打開此功能.注意:此方法和分布解析和三态樹不相容. Version/Edition: v1.5/Professional Required js file:dhtmlxtree_srnd.js
從JSON加載
從JSON加載樹需要有JSON對象或者檔案,并且使用以下方法加載:
tree.loadJSONObject(JSON_OBJECT);//for loading from script object
tree.loadJSON(FILE);//for loading from file
兩個方法都有第二個可選參數-當資料被加載後執行的方法.JSON格式:結構類似樹的XML結構,标簽被翻譯成對象,屬性被翻譯成字段
{id:0,
item:[
{id:1,text:"first"},
{id:2, text:"middle",
item:[
{id:"21", text:"child"}
]},
{id:3,text:"last"}
]
Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js
從CSV加載資料
需要使用CSV格式的字元串或者檔案,使用以下方法加載:
tree.loadCSV(FILE);//for loading from file
tree.loadCSVString(CSVSTRING);//for loading from string
兩個方法都有第二個可選參數-當資料被加載後執行的方法.CSV格式:樹結點被三個值所表示-id,parent_id,text.比如:
1,0,node 1
2,1,node 1.1
3,2,node 1.1.1
4,0,node 2
從JS數組加載
執行以下方法從javascript對象或者javascript檔案加載:
tree.loadJSArrayFile(FILE);//for loading from file
tree.loadJSArray(ARRAY);//for loading from array object
兩個方法都有第二個可選參數-當資料被加載後執行的方法.ARRAY格式:樹結點被三個值所組成的子數組所表示-id,parent_id,text.比如:
var treeArray = new Array(
["1","0","node 1"],
["2","1","node 1.1"],
["3","2","node 1.1.1"],
["4","0","node 2"]
)
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)