xmltree使用说明.txt

xml实现treeview控件

/***************************************************************************************
 *                               XMLTree2.1
 *     此代码版权归海洋工作室ocean所有，您可以非商业目的使用、复制、修改此代码，但需要
 * 保留本工作室的版权信息。如果您使用、修改此代码为商业目的，请联系本工作室取得使用许可。
 * 此脚本的商业许可为RMB30，被许可方除不能分发和转售之外，可以用于被许可方的任何项目和
 * 产品当中。
 * 如果您对本程序有什么建议，请email to:[e-mail]。
 *
 *                                                                          海洋工作室
 *                                                          http://www.oceanstudio.net
 *                                                     ocean([e-mail]) 制作
 *****************************************************************************************/                                        
使用说明
    此脚本的XMLTree1.0是2001年我指导我的学生所做，后来应该在2002年末的时候，我把XMLTree升级到XMLTree2.1。此js的树控件，可以从XML中加载数据。当然这个XML可以使用asp/jsp动态输出。还可以异步加载数据，这种方式是仿照msdn online所设计，即点击了某一个节点后才去读取数据。此能够适应大多数的应用要求。在xml中提供树状结构的样式属性，能够方便的改变显示的效果。此脚本的缺陷在于不能动态的添加和删除节点，我前几个月在写XMLTree3.0，想增加动态添加和删除节点的功能，但是基于现在的结构略为有点问题，也就耽搁了下来，但是这个2.1版本到确实为经典之作。

使用注意事项：所有的节点的id必须为唯一。节点类型有三种：node , leaf , ref  
node: 包含孩子节点的节点, 并且其孩子节点在同一个xml文件内
leaf:  叶子节点
ref :  连接外部XML文件的节点
这三种类型不需要制定，程序会自动判断节点的状态然后给出节点的类型，参考getType方法。

属性：
id：唯一表识。这个要求每个节点都不相同，包括引用的和被引用的节点。所以建议在系统id上加一个前缀。
text：节点上的文字。
title：节点上的提示，鼠标移动到节点上显示。
text-color：节点文字颜色。默认值：#000000
over-text-color：鼠标移动到节点上时节点的文字颜色。默认值：#CCCCCC
selected-text-color：节点选中时文字的颜色。默认值：red
background-color：节点的背景色。
over-background-color：鼠标移动到节点上时节点的背景色
selected-background-color：节点选中时的背景色。默认值：#CCCCCC
under-line：节点上的文字是否有下划线。true：有下划线。false：没有下划线。默认：false。
over-under-line：鼠标移动到节点上时是否有下划线。true：有下划线。false：没有下划线。默认：true。
selected-under-line：节点选中时是否有下划线。true：有下划线。false：没有下划线。默认：false。
font-size：节点文字大小。默认：9pt
padding-left：节点左缩进距离。如果是叶子节点请使用leafPaddingLeft。默认：18px。
padding-top：节点上边距。默认：2px。
space-width：图片和图片以及图片和文字的间距。默认：2px。
leafPaddingLeft：叶子节点左缩进距离。默认：18px。
cursor：鼠标形状。默认：hand
open-Flag：节点打开时的第一个图片（一般是-号）默认：images/openflag.gif
close-flag：节点关闭时的第一个图片（一般是+号）默认：images/closeflag.gif
open-folder：节点打开时的第二个图片（一般是一个文件夹的图片）默认：images/openfolder.gif
close-folder：节点关闭时的第二个图片（一般是一个文件夹的图片）默认：images/closedfolder.gif
leaf-image：叶子节点的图片。默认：images/url.gif
href：点击节点后转向的链接。
opened：节点是否打开。true：打开。false：关闭。默认：false
ref：如果节点的子节点是在另外一个xml中定义的，则在这个节点中使用ref属性指定子节点的xml。
selectedNode：当前选中的节点。XMLTree类型(此属性不在XML定义，而是在程序中用于获得当前选中的节点）
dbl-click：是否允许有双击事件。true：允许。false：不允许。
open-action：展开节点的行为。true：已展开的节点全部关闭。false：已展开的节点全部保持不变。默认：false。

如果属性没有定义，那么继承父节点属性。节点可以多层。所有节点都处于root节点下。

方法：
加载XMLtree。
load (url,container)
url：xml路径。
container：装载XMLTree的容器对象。

展开一个节点的下一级子节点。
open(nodeId) 
nodeId：节点Id。

关闭一个节点的下一级子节点。
close (nodeId)
nodeId：可选，节点Id。如果不指定则为自身。

选中一个节点
selected (nodeId)
nodeId：可选，节点Id。如果不指定则为自身。

取消选中一个节点
unselected(nodeId)
nodeId：可选，节点Id。如果不指定则为自身。

得到当前节点的类型。
getType()
返回值：leaf，node，ref。

根据菜单项id查找菜单项，返回拥有此id的菜单项。
getMenuItem (id)
id：菜单项id。
返回值：XMLTree类型的菜单项。

根据菜单项href查找菜单项，返回拥有此href的菜单项。
getMenuItemByHref (href)
href：菜单项的href属性。
返回值：XMLTree类型的菜单项。
注意：如果有多个相同的href菜单项，则返回第一个。

关闭除自身之外的所有节点。
closeAllNode()

将制定节点或自身节点的父节点打开。
openParent(nodeId)
nodeId：可选，节点id，如果不指定则为自身。

将自身节点或者指定href节点的父节点打开。
openParentByHref (href) 
href：可选，指定节点的href。如果不指定则为自身。

注意：XML中ID属性不要相同。建立XMLTree对象时，对象名需与类的参数同名。例如：
<script language="JavaScript">
	var mm = new XMLTree("mm");
	mm.loadData("tree7.xml",document.getElementById("menuC1")); //"menuC1"为所要显示的位置。如：TD，DIV（最好在TD中）
</script>

例1：在这个例子中，顶级节点是root节点下的孩子节点，root下只有一个孩子节点，也就是只显示“顶级节点”。在“顶级节点”节点下有6个节点，是此“顶级节点”的孩子节点。其中加载的时候“顶级节点”节点是打开的（opened="true"）。“顶级节点”的孩子节点都引用外部xml作为子节点（ref="..."）。

<?xml version="1.0" encoding="GB2312" ?> 
<root text="root" open-folder="images/openfolder.gif" close-folder="images/closedfolder.gif" leaf-image="images/url.gif">
  <menu id="c1" text="顶级节点" opened="true" open-folder="images/tree_community.gif" close-folder="images/tree_community.gif" leaf-image="images/tree_house.gif">
     <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" /> 
     <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" /> 
     <menu id="bc106" ref="/lefttree/building.jsp?Bc_id=106" text="第二层节点3" close-folder="images/tree_business.gif" open-folder="images/tree_business.gif" /> 
     <menu id="bc107" ref="/lefttree/building.jsp?Bc_id=107" text="第二层节点4" close-folder="images/tree_bd.gif" open-folder="images/tree_bd.gif" /> 
     <menu id="bc108" ref="/lefttree/building.jsp?Bc_id=108" text="第二层节点5" close-folder="images/tree_chamber.gif" open-folder="images/tree_chamber.gif" /> 
     <menu id="bc109" ref="/lefttree/building.jsp?Bc_id=109" text="第二层节点6" close-folder="images/tree_park.gif" open-folder="images/tree_park.gif" /> 
  </menu>
</root>


例2：例一中的第二层节点1的ref=/lefttree/building.jsp?Bc_id=8，这个ref声称的xml类似如下，每个孩子节点的类型也为引用节点：
<?xml version="1.0" encoding="GB2312" ?> 
<root text="root">
  <menu id="b172" ref="/lefttree/cell.jsp?B_id=172" open-folder="images/tree_building.gif" close-folder="images/tree_building.gif" text="第三层节点1" /> 
  <menu id="b173" ref="/lefttree/cell.jsp?B_id=173" open-folder="images/tree_building.gif" close-folder="images/tree_building.gif" text="第三层节点2" /> 
  <menu id="b174" ref="/lefttree/cell.jsp?B_id=174" open-folder="images/tree_building.gif" close-folder="images/tree_building.gif" text="第三层节点3" /> 
</root>

例3：这是最下层节点的xml。在例二中，“第三层节点1”引用了ref="/lefttree/cell.jsp?B_id=172"，这个引用生成的xml类似如下：Href标明叶子结点的连接。gotoPage函数接收一个数字作为参数，这个函数会调用gotoPage()函数。也可以直接写一个链接（比如最后一个节点）。

<?xml version="1.0" encoding="GB2312" ?> 
<root text="root">
  <menu id="u7661" href="javascript:gotoPage(7661)" text="101" /> 
  <menu id="u7662" href="javascript:gotoPage(7662)" text="102" /> 
  <menu id="u7663" href="javascript:gotoPage(7663)" text="104" /> 
  <menu id="u7664" href="javascript:gotoPage(7664)" text="201" /> 
  <menu id="u7665" href="javascript:gotoPage(7665)" text="202" /> 
  <menu id="u7666" href="javascript:gotoPage(7666)" text="203" /> 
  <menu id="u7667" href="javascript:gotoPage(7667)" text="204" /> 
  <menu id="u7668" href="javascript:gotoPage(7668)" text="301" /> 
  <menu id="u7669" href="javascript:gotoPage(7669)" text="302" /> 
  <menu id="u7670" href="javascript:gotoPage(7670)" text="303" /> 
  <menu id="u7671" href="javascript:gotoPage(7671)" text="304" /> 
  <menu id="u7672" href="/getCell.jsp?id=u7672" text="401" /> 
</root>