在网上找带复选框的javascript树,找了很多都不是很满意,终于找到了dhtmlxtree。
关于下载dhtmlxtree我就不说了,百度上一搜就有。
下载下来后打开 dhtmlxTree/samples/treeEx23.html
这就是我们需要的带 复选框的javacript树的最好例子,看到下面那颗三态树,所谓的三态树就是,选择框有三种状态,选中,没选中和半选中状态(文件夹的时候出现)
用editplus打开treeEx23.html的源码,找到:
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
< 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();
就这一句,简单吧,就是这么简单就可以把这棵树的节点用“,”号连接成一个字符串