dhtmlxtree 的使用教程——带复选框的javascript树

在网上找带复选框的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();

就这一句，简单吧，就是这么简单就可以把这棵树的节点用“,”号连接成一个字符串