📄 api.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>xyTreeAPI文档</title>
<link href="APIcss/prot_ref.css" type="text/css" rel="stylesheet" />
<script>
/*
在两种浏览器上都显示出漂亮的文档真难
*/
function init(){
var tables = document.getElementsByTagName('table');
//添加错行的样式背景
for(var i=0;i<tables.length; i++){
var table = tables[i];
var trs = table.getElementsByTagName('tr');
for(var j=0;j<trs.length; j++){
if(j%2 == 0){
trs[j].setAttribute('class','odd');
trs[j].setAttribute('className','odd');
}
}
}
}
window.onload = init;
</script>
</head>
<body>
作者Email:xieye114@yahoo.com.cn
<br />
<a href="index.html">看详细的例子</a>
<br />
<br />
<br />
<h1 align="center">《xyTree4.12使用手册》</h1>
<a name="gaishu:"><!-- --></a>
<h2>概述：</h2>
为了在HTML页面中使用树，我写了这几个js文件，参照了国外网站的xTree，
图片也基本是用它的，生成的DOM结构也和它几乎一样，只是代码彻底的不同。
<br />载入文件的图片loading.gif从流行框架ext拷贝而来
<br /> 这个树的组件主要有：
<br />6个js程序文件
<br />1个css文件
<br />1个images文件夹，内有几张图片
<br />用户自己的数据文件，可以搞成js文件形式，也可以在java程序中写好，传给jsp。
<div class="bold">主要不同点：</div>
我有复选框。<br/>
xTree是在初始化树时，就把DOM结构全部生成，(所以初始化慢，点击节点快)。
<br /> xyTree是当点击加号时，生成DOM结构，点击减号就隐藏，
再点击加号时只是简单的去掉隐藏，所有如某个节点下有多个节点，
第一次点击会稍慢些。(所以初始化快，点击节点稍慢，但可接收)
<div class="bold">另外：</div>
<ul>
<li>在IE6.0和FireFox2.0测试通过，一个字，快！</li>
<li>请仔细看文档最后的版本更新说明</li>
<li>如想使用，只需把xyTree文件夹拷贝出来即可，数据文件要自己写，或用java/jsp生成</li>
<li>要简单，没有运行时删除节点的方法，但有了动态添加节点的功能</li>
<li>不能拖动</li>
<li>点击节点会有反应，可以自己写函数</li>
<li>后缀是Normal的类用于普通树，另外3个用于复选框树</li>
<li>如果某个页面要同时出现这两种树，就加载6个js文件，否则加载3个</li>
<li>样式表xtree.css通用</li>
<li>6个类之间没有继承关系，其实不好，有组合关系，下一个版本就使用继承</li>
<li>基于对象的使用方式，可以在页面中放置任意棵树，互相不会受影响。</li>
<li>完全开源</li>
<li>使用命名空间xyTree</li>
<li>只要发挥想象力，还可以有很多方法可以添加，主要看业务需求</li>
<li>这一版无复选框树有部分功能仍未实现，下一版本4.2会使用继承的语法统统实现</li>
<li>关于动态添加节点的说明参见<a href="#DivTree">DivTree</a></li>
</ul>
<br />
<br />
<br />
<br />
<a name="leiyilan"><!-- --></a>
<h2>类一览</h2>
<p>
<a href="#DivTreeNormal">DivTreeNormal</a><br/>
<a href="#TreeNormal">TreeNormal</a><br/>
<a href="#NodeNormal">NodeNormal</a><br/><br/>
<a href="#DivTree">DivTree</a><br/>
<a href="#Tree">Tree</a><br/>
<a href="#Node">Node</a>
</p>
<br />
<br />
<br />
<br />
<!-- 第一个类 -->
<a name="DivTreeNormal"><!-- --></a>
<h2>类 DivTreeNormal</h2>
<h6> DivTreeNormal代表普通树。(有部分功能暂未实现，下一版补齐)</h6>
在数据js文件中添加节点时必须按顺序，以下代码会产生错误：
<pre style="font:normal 12px 'Courier New';">node1 = new xyTree.Node('下关分局');
node1.id = 1;
tree1.add(node1);
node222 = new xyTree.Node('玄武分局');
node222.id = 3;
tree1.add(node222);
node2 = new xyTree.Node('下关派出所1');
node2.id = 2;
node1.add(node2);
</pre>
以下代码是正确的：
<pre style="font:normal 12px 'Courier New';">node1 = new xyTree.Node('下关分局');
node1.id = 1;
tree1.add(node1);
node2 = new xyTree.Node('下关派出所1');
node2.id = 2;
node1.add(node2);
node222 = new xyTree.Node('玄武分局');
node222.id = 3;
tree1.add(node222);
</pre>
1)必须以深度遍历的方式初始化树的所有节点
<br/>2)如想修改单击节点的反应要自己写回调函数，见HTML示例
<br/>3)点击根节点图标，会收缩，再点击，展开
<br/>4)根节点图片和一般节点的缺省图片都可以换，如果不喜欢那个文件夹的话，在本类中修改全局变量xyTree.TreeConfig即可
<br/>5)也可以用img属性替节点指定不同的图片
<br />下面给出了一个最简单的例子：
<pre class="code" ><code style="FONT-FAMILY: 'Courier New';">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>xyTree</title>
<link type="text/css" rel="stylesheet" href="xyTree/xtree.css" />
<script src="xyTree/TreeNormal.js"></script>
<script src="xyTree/NodeNormal.js"></script>
<script src="xyTree/DivTreeNormal.js"></script>
<script src="data_example3.js"></script>
<script>
function init(){
document.getElementById('ceshi3').appendChild(Content.div);
Content.init();
}
window.onload = init;
</script>
</head>
<body>
<div id="ceshi3"></div>
</body>
</html>
</code></pre>
<h4>另请参见：</h4>
<p>
<a href="#DivTree">DivTree</a>
</p>
<table class="reference" cellspacing="0" border="1" >
<tbody>
<tr>
<th>域和方法</th>
<th>返回值</th>
<th>参数</th>
<th>描述</th></tr>
<tr>
<td>DivTreeNormal(String name)</td>
<td>构造方法，返回一个DivTreeNormal对象</td>
<td>name:根节点名称</td>
<td>
建立一个普通树对象。
</td></tr>
<tr>
<td>DivTreeNormal(String name,String img)</td>
<td>构造方法，返回一个DivTreeNormal对象</td>
<td>name:根节点名称<br/>img:用户指定的根节点图标</td>
<td>
建立一个普通树对象。并指定了根节点图标
</td></tr>
<tr>
<td>tree</td>
<td>TreeNormal</td>
<td>(none)</td>
<td>
只读域，获得树的包含所有节点的对象
</td></tr>
<tr>
<td>div</td>
<td>HTMLElement</td>
<td>(none)</td>
<td>
只读域，获得树的div对象
</td></tr>
<tr>
<td>init()</td>
<td>(none)</td>
<td>(none)</td>
<td>
把树的第1级节点显示出来，只用于初始化时
</td></tr>
<tr>
<td>init(Function funa,Function funb)</td>
<td>(none)</td>
<td>funa:单击节点的回调函数，funb:单击根节点的回调函数</td>
<td>
把树的第1级节点显示出来，只用于初始化时，并指定单击(根)节点的回调函数
</td></tr>
<tr>
<td>add(NodeNormal node)</td>
<td>(none)</td>
<td>node:待添加的1级节点</td>
<td>
给树添加第一级节点
</td></tr>
<tr>
<td>defaultClickRootNode()</td>
<td>(none)</td>
<td>(none)</td>
<td>默认的单击根节点的响应方法
</td></tr>
<tr>
<td>defaultClickNode(Node node)</td>
<td>(none)</td>
<td>node:被点击的节点</td>
<td>默认的单击节点的响应方法
</td></tr>
<tr>
<td>hideTreeBody()</td>
<td>(none)</td>
<td>(none)</td>
<td>隐藏树身
</td></tr>
<tr>
<td>showTreeBody()</td>
<td>(none)</td>
<td>(none)</td>
<td>显示树身
</td></tr>
</tbody>
</table>
<!-- 第2个类 -->
<br /><br /><br /><br /><br />
<a name="TreeNormal"><!-- --></a>
<h2>类 TreeNormal</h2>
<h6> TreeNormal代表普通树的数据结构，可以获得数组形式的所有节点和树形式的所有节点，可以获得包含自己的树对象。
</h6>
<h4>另请参见：</h4>
<p>
<a href="#DivTreeNormal">DivTreeNormal</a><br />
<a href="#NodeNormal">NodeNormal</a>
</p>
<table class="reference" cellspacing="0" border="1" >
<tbody>
<tr>
<th>域和方法</th>
<th>返回值</th>
<th>参数</th>
<th>描述</th></tr>
<tr>
<td>treename</td>
<td>Stirng</td>
<td>(none)</td>
<td>
只读域，获得树的根节点名称
</td></tr>
<tr>
<td>maxlevel</td>
<td>int</td>
<td>(none)</td>
<td>
只读域，获得树的最大级别，就是层数
</td></tr>
<tr>
<td>root</td>
<td>NodeNormal</td>
<td>(none)</td>
<td>
只读域，获得树的根节点，然后可以获得所有节点
</td></tr>
<tr>
<td>divtree</td>
<td>DivTreeNormal</td>
<td>(none)</td>
<td>
只读域，获得树
</td></tr>
<tr>
<td>treeArray</td>
<td>Array:NodeNormal</td>
<td>(none)</td>
<td>
只读域，获得树所有节点对应的一个简单的数组
</td></tr>
</tbody>
</table>
<!-- 第3个类 -->
<br /><br /><br /><br /><br />
<a name="NodeNormal"><!-- --></a>
<h2>类 NodeNormal</h2>
<h6> NodeNormal代表普通节点。</h6>
<pre style="font:normal 12px 'Courier New';">
关于给节点加属性：
如想要加属性name2，
可以在js数据文件中设置相应的属性，如下
node1 = new xyTree.Node('下关分局');
node1.id = 1;
node1.name2 = '分局';
tree1.add(node1);
就可以了，当然，id属性不是必须的.
还有，自己设的属性名不能是parent,tree等下面表中的属性
如果愿意，可以给节点指定不同图标，如下,也是在js数据文件中。
node1 = new xyTree.Node('下关分局');
node1.img = "images/1.gif";
通常情况下，要指定就全指定，要么就都不指定。
</pre>
<br />
<h4>另请参见：</h4>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -