📄 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">《xyTree使用手册》</h1>
<a name="gaishu:"><!-- --></a>
<h2>概述：</h2>
为了在HTML页面中使用树，我写了这几个js文件，参照了国外网站的xTree，
图片也基本是用它的，生成的DOM结构也和它几乎一样。
<br /> 这个树的组件主要有：
<br />几个js文件
<br />1个css文件
<br />1个images文件夹，内有几张图片
<br />用户自己的数据文件，可以搞成js文件形式，也可以在java程序中写好，传给jsp。
<div class="bold">主要不同点：</div>
xTree是在初始化树时，就把DOM结构全部生成，(所以初始化慢，点击节点快)。
<br />xyTree是当点击加号时，生成DOM结构，点击减号就隐藏，
再点击加号时只是简单的去掉隐藏，所有如某个节点下有多个节点，
第一次点击会稍慢些。(所以初始化快，点击节点稍慢，但可接收)
<div class="bold">另外：</div>
<ul>
<li>在IE6.0和FireFox2.0测试通过，一个字，快！</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>基于对象的使用方式，可以在页面中放置任意棵树，互相不会受影响。</li>
<li>完全开源</li>
<li>只要发挥想象力，还可以有很多方法可以添加，主要看业务需求</li>
<li>尽管我的目的就是简单，但说明文档还是冗长。</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 Node('下关分局');
node1.id = 1;
tree1.add(node1);
node222 = new Node('玄武分局');
node222.id = 3;
tree1.add(node222);
node2 = new Node('下关派出所1');
node2.id = 2;
node1.add(node2);
</pre>
以下代码是正确的：
<pre style="font:normal 12px 'Courier New';">node1 = new Node('下关分局');
node1.id = 1;
tree1.add(node1);
node2 = new Node('下关派出所1');
node2.id = 2;
node1.add(node2);
node222 = new Node('玄武分局');
node222.id = 3;
tree1.add(node222);
</pre>
1)必须以深度遍历的方式初始化树的所有节点<br>
2)如想修改单击节点的反应要改clickRootNode()方法和clickNode()方法，必须看懂这两个方法的源代码，
在该类的最后<br>
3)点击根节点图标，会收缩，再点击，展开<br>
4)根节点图片和一般节点的图片都可以换，如果不喜欢那个文件夹的话，在本类中修改全局变量TreeConfig即可 <br>
<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="xtree.css" />
<script src="TreeNormal.js"></script>
<script src="NodeNormal.js"></script>
<script src="DivTreeNormal.js"></script>
<script src="data_fenjuWukuang2.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>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>add(NodeNormal node)</td>
<td>(none)</td>
<td>node:待添加的1级节点</td>
<td>
给树添加第一级节点
</td></tr>
<tr>
<td>clickRootNode()</td>
<td>(none)</td>
<td>(none)</td>
<td>单击根节点的反应
</td></tr>
<tr>
<td>clickNode(int xuhao)</td>
<td>(none)</td>
<td>xuhao:节点的序号</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，需要在Node.js或NodeNormal.js文件（看你用的是普通树还是复选框树）中的节点类的构造方法中加一句
this.name2;（其实也可以不加，如例子中的《精通css》树，但是可能会影响速度？我也不知道）
然后，在js数据文件中设置相应的属性，如下
node1 = new Node('下关分局');
node1.id = 1;
node1.name2 = '分局';
tree1.add(node1);
就可以了，当如，id属性不是必须的
</pre>
<br />以下是示例代码
<pre class="code" ><code style="FONT-FAMILY: 'Courier New';">
DivTree.prototype.clickNode = function (xuhao){
var node = this.tree.treeArray[xuhao]; //这句话是固定的，勿改，目的：获得节点
var s;
if(this.tree.treename == 'xieye的最爱'){ //本例中是xieye的最爱
s = node.name;
digui(node);
}
else //本例中是中华人民共和国的行政区划
s = '[' + node.id + ']=[' + node.name + ']';
alert(s); //这个方法的目的就是打印出用户点击的节点链
//递归
function digui(node){
var parent = node.parent;
s = parent.name + '/' + s;
if(parent == node.tree.root) return;
digui(parent);
};
}
</code></pre>
<h4>另请参见：</h4>
<p>
<a href="#DivTreeNormal">DivTreeNormal</a><br />
<a href="#TreeNormal">TreeNormal</a>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -