| sin's profile有话好好说BlogLists |  Tools  Help |
|
6/29/2006 分析xloadtree, 用ajax实现的动态目录树此文来自：nickey
这两天,为了实现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用法一样. this.setTabIndex(this.tabIndex); 将xtree2.js文件中的这一行屏蔽掉就行了. 当然,先要确定你不需要使用tab键定位. :) PrintWriter out=response.getWriter(); out.write(outputXML.toString()); out.flush(); out.close();Comments (14)
TrackbacksThe trackback URL for this entry is: http://slim.spaces.live.com/blog/cns!E51A85071AEBECD3!2814.trak Weblogs that reference this entry
|
|
|
