dtree使用笔记

基于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下,为本文例子。

 

你可能感兴趣的:(JavaScript,html,css)