dtree使用笔记 博客分类： JavaEE JavaScriptCSSHTML

基于js开发的treeviewer有很多，我觉得从性能和上手程度上来讲，dtree都是可以优先考虑的。

原来没有怎么用过dtree，只是了解过，最近由于需要自己做了一回配置，才发现要将dtree改造得完全满足自己是需求，还是要做相应的调整的，记录一下，很简单。

1.dtree的下载，网上一大堆，我也提供了一个完整的附件。

2.dtree的使用，有demo，有api，不画蛇添足了。

3.特殊需求：（1）期望点击文件夹的时候，自动打开本文件夹的子目录，（2）同时关闭同层其他打开的文件夹。（3）期望dtree选中行有不同的背景色清楚的标志。

对于需求1:通过如下两步实现：一，设置文件夹节点的target值为""或者"_self"；二，设置文件夹节点的url为：

javascript:d.o(index)

 [其中d代表dtree的名称，index是该文件夹的id。

 

对于需求2：设置dtree的属性：

d.config.closeSameLevel = true;

 对于需求3：设置dtree的属性：

d.config.useSelection = true;

 然后去dtree的css里去改对应的背景色样式即可。

 

很简单很一般的需求，可惜啊，网上翻了好久没人记录怎么实现，还得靠自己记录，所以简单的东西，不一定没用。 

 

的确，很简单，而且可能没看明白…… 没办法，贴一个最简单的js代码：

  d = new dTree('d');d.add(0,-1,'ROOT');
  d.add(1,0,'folder1','javascript:d.o(1)','','_self');//如果target设置为_self不行，就设置为''
  d.add(2,1,'Node 1.1','#');
  d.add(3,1,'Node 1.2','#');
  d.add(4,0,'folder2','javascript:d.o(4)','','_self');
  d.add(5,4,'Node 2.1','#');
  d.add(6,4,'Node 2.2','#');
  d.add(7,4,'Node 2.3','#');
  d.config.closeSameLevel = true;//打开本文件夹关闭同级的其他文件夹
  d.config.useSelection = true;//选中的节点背景色设置
  document.write(d);

 

有一个本例子完整的demo文件demo.html，放在dtree.zip下，为本文例子。