dhtmlxtree 的使用教程——帶複選框的javascript樹__html

在網上找帶複選框的javascript樹，找了很多都不是很滿意，終於找到了dhtmlxtree。

關於下載dhtmlxtree我就不說了，百度上一搜就有。

下載下來後開啟 dhtmlxTree/samples/treeEx23.html

這就是我們需要的帶 複選框的javacript樹的最好例子，看到下面那顆三態樹，所謂的三態樹就是，選擇框有三種狀態，選中，沒選中和半選中狀態（檔案夾的時候出現）

用editplus開啟treeEx23.html的源碼，找到： tree2 = new  dhtmlXTreeObject( " treeboxbox_tree2 " , " 100% " , " 100% " , 0 );
tree2.setImagePath( " ../imgs/ " );
tree2.enableCheckBoxes( 1 );
tree2.enableThreeStateCheckboxes( true );
tree2.loadXML( " tree3.xml " );

這段代碼可以直接搬到網頁上用，要關心的就是：
1、treebosbox_tree2是你要掛接樹的div節點
2、tree2.setImagePath就是設定dhtmlxtree需要的圖片，這個很重要，因為dhtmlxtree的複選框都是一個圖片
3、tree3.xml就是資料樹

我們需要改的就是tree3.xml <? xml version="1.0" encoding="utf-8" ?>
< tree  id ="0" >
   < item  text ="全國"  id ="country" open="1" >
        < item  id ="bj"  text ="北京" />
        < item  id ="sh"  text ="上海" />
        < item  id ="tj"  text ="天津" />
        < item  id ="fj"  text ="福建" >
                 < item  id ="xm"  text ="廈門" />
        </ item >
    </ item >
</ tree >

注意點：
1、如果要在dhtmlxtree中使用中文的話必須將 encoding 改成 utf-8，還要把這個檔案另存，在另存的時候選擇編碼形式為 utf-8
2、tree節點的id="0"不能省

這樣是顯示效果：

大家都是聰明人，上面那段xml我就不解釋了，接下來我說說如何擷取選中的節點

頁面上樹邊上有三個連結，看第三個Get list of checked，這個的功能就是擷取所有選中節點的id，我們直接看原始碼：

tree2.getAllChecked();

就這一句，簡單吧，就是這麼簡單就可以把這棵樹的節點用“,”號串連成一個字串