📄 index.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>XMLTree2.01</title>
</head>
<body>
<table>
<tr><td><a href="http://www.oceanstudio.net"><img border="0" src="logo.jpg"></a></td></tr>
</table>
<p> </p>
<p>
/***************************************************************************************<br>
* XMLTree2.1<br>
* 此代码版权归海洋工作室ocean所有，您可以非商业目的使用、复制、修改此代码，但需要<br>
* 保留本工作室的版权信息。如果您使用、修改此代码为商业目的，请联系本工作室取得使用许可。<br>
* 此脚本的商业许可为RMB30，被许可方除不能分发和转售之外，可以用于被许可方的任何项目和<br>
* 产品当中。<br>
* 如果您对本程序有什么建议，请email to:ocean@forever.net.cn。<br>
*<br>
* 海洋工作室<br>
* http://www.oceanstudio.net<br>
* ocean(ocean@forever.net.cn) 制作<br>
*****************************************************************************************/
<br>
使用说明<br>
此脚本的XMLTree1.0是2001年我指导我的学生所做，后来应该在2002年末的时候，我把XMLTree升级到XMLTree2.1。此js的树控件，可以从XML中加载数据。当然这个XML可以使用asp/jsp动态输出。还可以异步加载数据，这种方式是仿照msdn
online所设计，即点击了某一个节点后才去读取数据。此能够适应大多数的应用要求。在xml中提供树状结构的样式属性，能够方便的改变显示的效果。此脚本的缺陷在于不能动态的添加和删除节点，我前几个月在写XMLTree3.0，想增加动态添加和删除节点的功能，但是基于现在的结构略为有点问题，也就耽搁了下来，但是这个2.1版本到确实为经典之作。<br>
<br>
使用注意事项：所有的节点的id必须为唯一。节点类型有三种：node , leaf , ref <br>
node: 包含孩子节点的节点, 并且其孩子节点在同一个xml文件内<br>
leaf: 叶子节点<br>
ref : 连接外部XML文件的节点<br>
这三种类型不需要制定，程序会自动判断节点的状态然后给出节点的类型，参考getType方法。<br>
<br>
属性：<br>
id：唯一表识。这个要求每个节点都不相同，包括引用的和被引用的节点。所以建议在系统id上加一个前缀。<br>
text：节点上的文字。<br>
title：节点上的提示，鼠标移动到节点上显示。<br>
text-color：节点文字颜色。默认值：#000000<br>
over-text-color：鼠标移动到节点上时节点的文字颜色。默认值：#CCCCCC<br>
selected-text-color：节点选中时文字的颜色。默认值：red<br>
background-color：节点的背景色。<br>
over-background-color：鼠标移动到节点上时节点的背景色<br>
selected-background-color：节点选中时的背景色。默认值：#CCCCCC<br>
under-line：节点上的文字是否有下划线。true：有下划线。false：没有下划线。默认：false。<br>
over-under-line：鼠标移动到节点上时是否有下划线。true：有下划线。false：没有下划线。默认：true。<br>
selected-under-line：节点选中时是否有下划线。true：有下划线。false：没有下划线。默认：false。<br>
font-size：节点文字大小。默认：9pt<br>
padding-left：节点左缩进距离。如果是叶子节点请使用leafPaddingLeft。默认：18px。<br>
padding-top：节点上边距。默认：2px。<br>
space-width：图片和图片以及图片和文字的间距。默认：2px。<br>
leafPaddingLeft：叶子节点左缩进距离。默认：18px。<br>
cursor：鼠标形状。默认：hand<br>
open-Flag：节点打开时的第一个图片（一般是-号）默认：images/openflag.gif<br>
close-flag：节点关闭时的第一个图片（一般是+号）默认：images/closeflag.gif<br>
open-folder：节点打开时的第二个图片（一般是一个文件夹的图片）默认：images/openfolder.gif<br>
close-folder：节点关闭时的第二个图片（一般是一个文件夹的图片）默认：images/closedfolder.gif<br>
leaf-image：叶子节点的图片。默认：images/url.gif<br>
href：点击节点后转向的链接。<br>
opened：节点是否打开。true：打开。false：关闭。默认：false<br>
ref：如果节点的子节点是在另外一个xml中定义的，则在这个节点中使用ref属性指定子节点的xml。<br>
selectedNode：当前选中的节点。XMLTree类型(此属性不在XML定义，而是在程序中用于获得当前选中的节点）<br>
dbl-click：是否允许有双击事件。true：允许。false：不允许。<br>
open-action：展开节点的行为。true：已展开的节点全部关闭。false：已展开的节点全部保持不变。默认：false。<br>
<br>
如果属性没有定义，那么继承父节点属性。节点可以多层。所有节点都处于root节点下。<br>
<br>
方法：<br>
加载XMLtree。<br>
load (url,container)<br>
url：xml路径。<br>
container：装载XMLTree的容器对象。<br>
<br>
展开一个节点的下一级子节点。<br>
open(nodeId) <br>
nodeId：节点Id。<br>
<br>
关闭一个节点的下一级子节点。<br>
close (nodeId)<br>
nodeId：可选，节点Id。如果不指定则为自身。<br>
<br>
选中一个节点<br>
selected (nodeId)<br>
nodeId：可选，节点Id。如果不指定则为自身。<br>
<br>
取消选中一个节点<br>
unselected(nodeId)<br>
nodeId：可选，节点Id。如果不指定则为自身。<br>
<br>
得到当前节点的类型。<br>
getType()<br>
返回值：leaf，node，ref。<br>
<br>
根据菜单项id查找菜单项，返回拥有此id的菜单项。<br>
getMenuItem (id)<br>
id：菜单项id。<br>
返回值：XMLTree类型的菜单项。<br>
<br>
根据菜单项href查找菜单项，返回拥有此href的菜单项。<br>
getMenuItemByHref (href)<br>
href：菜单项的href属性。<br>
返回值：XMLTree类型的菜单项。<br>
注意：如果有多个相同的href菜单项，则返回第一个。<br>
<br>
关闭除自身之外的所有节点。<br>
closeAllNode()<br>
<br>
将制定节点或自身节点的父节点打开。<br>
openParent(nodeId)<br>
nodeId：可选，节点id，如果不指定则为自身。<br>
<br>
将自身节点或者指定href节点的父节点打开。<br>
openParentByHref (href) <br>
href：可选，指定节点的href。如果不指定则为自身。<br>
<br>
注意：XML中ID属性不要相同。建立XMLTree对象时，对象名需与类的参数同名。例如：<br>
<script language="JavaScript"><br>
var mm = new XMLTree("mm");<br>
mm.loadData("tree7.xml",document.getElementById("menuC1"));
//"menuC1"为所要显示的位置。如：TD，DIV（最好在TD中）<br>
</script><br>
<br>
例1：在这个例子中，顶级节点是root节点下的孩子节点，root下只有一个孩子节点，也就是只显示“顶级节点”。在“顶级节点”节点下有6个节点，是此“顶级节点”的孩子节点。其中加载的时候“顶级节点”节点是打开的（opened="true"）。“顶级节点”的孩子节点都引用外部xml作为子节点（ref="..."）。<br>
<br>
<?xml version="1.0" encoding="GB2312" ?> <br>
<root text="root" open-folder="images/openfolder.gif"
close-folder="images/closedfolder.gif" leaf-image="images/url.gif"><br>
<menu id="c1" text="顶级节点" opened="true" open-folder="images/tree_community.gif"
close-folder="images/tree_community.gif" leaf-image="images/tree_house.gif"><br>
<menu id="bc8" ref="/lefttree/building.jsp?Bc_id=8" text="第二层节点1"
close-folder="images/tree_more_house.gif"
open-folder="images/tree_more_house.gif" /> <br>
<menu id="bc105" ref="/lefttree/building.jsp?Bc_id=105" text="第二层节点2"
close-folder="images/tree_high_house.gif"
open-folder="images/tree_high_house.gif" /> <br>
<menu id="bc106" ref="/lefttree/building.jsp?Bc_id=106" text="第二层节点3"
close-folder="images/tree_business.gif" open-folder="images/tree_business.gif"
/> <br>
<menu id="bc107" ref="/lefttree/building.jsp?Bc_id=107" text="第二层节点4"
close-folder="images/tree_bd.gif" open-folder="images/tree_bd.gif" /> <br>
<menu id="bc108" ref="/lefttree/building.jsp?Bc_id=108" text="第二层节点5"
close-folder="images/tree_chamber.gif" open-folder="images/tree_chamber.gif" />
<br>
<menu id="bc109" ref="/lefttree/building.jsp?Bc_id=109" text="第二层节点6"
close-folder="images/tree_park.gif" open-folder="images/tree_park.gif" /> <br>
</menu><br>
</root><br>
<br>
<br>
例2：例一中的第二层节点1的ref=/lefttree/building.jsp?Bc_id=8，这个ref声称的xml类似如下，每个孩子节点的类型也为引用节点：<br>
<?xml version="1.0" encoding="GB2312" ?> <br>
<root text="root"><br>
<menu id="b172" ref="/lefttree/cell.jsp?B_id=172"
open-folder="images/tree_building.gif" close-folder="images/tree_building.gif"
text="第三层节点1" /> <br>
<menu id="b173" ref="/lefttree/cell.jsp?B_id=173"
open-folder="images/tree_building.gif" close-folder="images/tree_building.gif"
text="第三层节点2" /> <br>
<menu id="b174" ref="/lefttree/cell.jsp?B_id=174"
open-folder="images/tree_building.gif" close-folder="images/tree_building.gif"
text="第三层节点3" /> <br>
</root><br>
<br>
例3：这是最下层节点的xml。在例二中，“第三层节点1”引用了ref="/lefttree/cell.jsp?B_id=172"，这个引用生成的xml类似如下：Href标明叶子结点的连接。gotoPage函数接收一个数字作为参数，这个函数会调用gotoPage()函数。也可以直接写一个链接（比如最后一个节点）。<br>
<br>
<?xml version="1.0" encoding="GB2312" ?> <br>
<root text="root"><br>
<menu id="u7661" href="javascript:gotoPage(7661)" text="101" /> <br>
<menu id="u7662" href="javascript:gotoPage(7662)" text="102" /> <br>
<menu id="u7663" href="javascript:gotoPage(7663)" text="104" /> <br>
<menu id="u7664" href="javascript:gotoPage(7664)" text="201" /> <br>
<menu id="u7665" href="javascript:gotoPage(7665)" text="202" /> <br>
<menu id="u7666" href="javascript:gotoPage(7666)" text="203" /> <br>
<menu id="u7667" href="javascript:gotoPage(7667)" text="204" /> <br>
<menu id="u7668" href="javascript:gotoPage(7668)" text="301" /> <br>
<menu id="u7669" href="javascript:gotoPage(7669)" text="302" /> <br>
<menu id="u7670" href="javascript:gotoPage(7670)" text="303" /> <br>
<menu id="u7671" href="javascript:gotoPage(7671)" text="304" /> <br>
<menu id="u7672" href="/getCell.jsp?id=u7672" text="401" /> <br>
</root></p>
<p> </p>
<hr width="50%" style="color: #FF0000">
<div style="text-align:center;font-size:9pt">copyright 2004 © 海洋工作室（<a href="mailto:ocean@forever.net.cn">ocean@forever.net.cn</a>）</div>
<p> </p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -