分析xloadtree, 用ajax实现的动态目录树

分析xloadtree, 用ajax实现的动态目录树

这两天,为了实现ajax的树形目录,找了很多代码. 最后确定用xloadtree.

在xloadtree的主页上, 有项目xtree 和xloadtree  一个是固定显示的树,一个是动态加载的树.

在他的隐藏目录里,有一个xtree2  地址为 http://webfx.eae.net/dhtml/xtree2b/  这个是正在测试的版本, 融合了xtree和xloadtree.  更新了代码, 但还是beta版.

xloadtree 可以在各种浏览器下通用. 兼容性效果非常好.

主要的三个文件:  xtree2.js, xloadtree2.js, xtree2.css 
xloadtree2.js 主要是对ajax方式的封装, 实现异步调用. 显示树的时候,调用xtree2.js里面的代码. xtree2.css 控制树的显示式样.  在查看他的文档的时候，主要看xtree2的文档，这里面才有对树怎样进行操作.　xloadtree只是个调用包装.

xtree2.js :
输出html代码的时候, 调用的是toHtml() 方法. 在这个方法中,其中最主要的是getRowHtml() 来得到每一行的输出.  方法中用 getExpandIconHtml() 来控制展开后图标的代码输出, getIconHtml()控制未展开的图标输出.  getLabelHtml() 控制文本的输出, 如果不想要图标,就把图标的输出代码屏蔽掉就OK.


关于在页面输出后,看不到源代码的调试方法:

< br />
< INPUT type = " button "  name = " ad "  onclick = " charge(); "  value = " change " >
< br />
< TEXTAREA rows = " 10 "  cols = " 30 "  id = " ttt "  name = " ttt " ></ TEXTAREA >
< br />
< INPUT type = " button "  name = " findnode "  onclick = " findnode(); "  value = " findnode " >
< br />
< INPUT type = " button "  name = " openpath "  onclick = " openpath(); "  value = " openpath " >
< script >
     function  charge(){
        document.getElementById('ttt').value = tree.getSelected().toHtml();
    }
    
     function  findnode(){
        tree.findChildByText(document.getElementById('ttt').value, 0 );
    }
    
     function  openpath(){
        tree.openPath(webFXTreeHandler.htmlToText(document.getElementById('ttt').value), true );
        tree.getSelected().expand();
    }
</ script >

在页面中放置如上代码.  注意,先要获得树的句柄.  比较创建树的时候,用如下代码:

var  tree  =   new  WebFXTree( " <%=rootname%> " );

在展开的树点,选择后, 点击change 按钮,可以得到这个节点对应的html代码.  然后对应html可以找到相应的CSS. 这个就不多写了.

xloadtree在调用子节点树的时候,和服务器之间传输的是xml.
DTD的定义如下

<! ELEMENT tree (tree*) >
<! ATTLIST tree
            text        CDATA    #REQUIRED
            src            CDATA    #IMPLIED
            action        CDATA    #IMPLIED
            icon        CDATA    #IMPLIED
            openIcon    CDATA    #IMPLIED
            target        CDATA    #IMPLIED >

其中 text为显示文本,  src为下级目录目录的地址. action为点击的链接. icon为图标，openIcon为节点打开后的图标.　target为目标，和a标签的target用法一样.


因为xml 文件不能传送< > 这种符号, 可以采用&lt; &gt; 传送.   因为项目里需要在树上显示HTML代码,所以在js里面做了修改.  修改的部分比较多. 还没有测试有没有意外情况. 这个以后再说.


还有, 在使用过程中,有一个BUG. 是设置tabindex的. 会出错.

this .setTabIndex( this .tabIndex); 

将xtree2.js文件中的这一行屏蔽掉就行了. 当然,先要确定你不需要使用tab键定位. :)


2006- 4- 22 增加:
  在要打开指定目录树的时候 如果树里面包含html代码, 可以用如下语句
<script>try{top.tree.tree.openPath(webFXTreeHandler.htmlToText("/北京新东方学校/<font color=red><b>留学考试</b></font>/fff"),true);}catch(err){}</script>


2006-5-19
前天在同事应用的时候，出现的问题是加载过程中如果树结点为中文，就加载不上.　后来找到问题的原因是在用servlet输出xml 的时候，是用的steam的方式，　后来改成字符输出方式才正确.　如下.

            PrintWriter out = response.getWriter();
            out.write(outputXML.toString());
            out.flush();
            out.close();

2008-09-03

关于随机参数，指的是URL请求中带有一个随机参数。 这个参数，可以是当前时间，或者随机数。 用来避开浏览器的缓存