d859c305b750b370be79fdecf73c630f9f23ff9e.svn-base
11.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树表控件</title>
<link href="style/demo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
table,td,th { border: 1px solid #8DB9DB; padding:5px; border-collapse: collapse; font-size:16px; }
</style>
<!--引用的文件 Begin-->
<link href="../themes/default/jquery.treeTable.css" rel="stylesheet" type="text/css" />
<link href="../themes/vsStyle/jquery.treeTable.css" rel="stylesheet" type="text/css" />
<script src="../../../jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="../jquery.treeTable.js" type="text/javascript"></script>
<!--引用的文件 End-->
<script type="text/javascript">
$(function(){
var option = {
theme:'vsStyle',
expandLevel : 2,
beforeExpand : function($treeTable, id) {
//判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
if ($('.' + id, $treeTable).length) { return; }
//这里的html可以是ajax请求
var html = '<tr id="8" pId="6"><td>5.1</td><td>可以是ajax请求来的内容</td></tr>'
+ '<tr id="9" pId="6"><td>5.2</td><td>动态的内容</td></tr>';
$treeTable.addChilds(html);
},
onSelect : function($treeTable, id) {
window.console && console.log('onSelect:' + id);
}
};
$('#treeTable1').treeTable(option);
option.theme = 'default';
$('#treeTable2').treeTable(option);
});
</script>
</head>
<body>
<div id="page">
<h1><span>treeTable <em>v 1.4.2</em></span></h1>
<fieldset>
<legend> 简介</legend>
<div class="content">
<p>treeTable是跨浏览器、性能很高的jquery的树表组件，它使用非常简单，只需要引用jquery库和一个js文件，接口也很简单。</p>
<h3>优点</h3>
<ol class="love">
<li><strong>兼容主流浏览器</strong>: 支持IE6和IE6+, Firefox, chrome, Opera, Safari</li>
<li><strong>接口简洁</strong>: 在普通表格的基础上增加父子关系的自定义标签就可以</li>
<li><strong>组件性能高</strong>: 内部实现了只绑定了table的事件、使用了css sprite合并图片等</li>
<li><strong>提供两种风格</strong>: 通过参数来设置风格</li>
</ol>
</div>
</fieldset>
<fieldset>
<legend>演示</legend>
<table id="treeTable1" style="width:100%">
<tr>
<td style="width:200px;">标题</td>
<td>内容</td>
</tr>
<tr id="1">
<td><span controller="true">1</span></td>
<td>内容</td></tr>
<tr id="2" pId="1">
<td><span controller="true">2</span></td>
<td>内容</td></tr>
<tr id="3" pId="2">
<td>3</td>
<td>内容</td>
</tr>
<tr id="4" pId="2">
<td>4</td>
<td>内容</td>
</tr>
<tr id="5" pId="4">
<td>4.1</td>
<td>内容</td>
</tr>
<tr id="6" pId="1" hasChild="true">
<td>5</td>
<td>注意这个节点是动态加载的</td>
</tr>
<tr id="7">
<td>8</td>
<td>内容</td>
</tr>
</table>
<hr/>
<table id="treeTable2" style="width:100%">
<tr>
<td style="width:200px;">标题</td>
<td>内容</td>
</tr>
<tr id="1">
<td><span controller="true">1</span></td>
<td>内容</td></tr>
<tr id="2" pId="1">
<td><span controller="true">2</span></td>
<td>内容</td></tr>
<tr id="3" pId="2">
<td>3</td>
<td>内容</td>
</tr>
<tr id="4" pId="2">
<td>4</td>
<td>内容</td>
</tr>
<tr id="5" pId="4">
<td>4.1</td>
<td>内容</td>
</tr>
<tr id="6" pId="1" hasChild="true">
<td>5</td>
<td>注意这个节点是动态加载的</td>
</tr>
<tr id="7">
<td>8</td>
<td>内容</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>接口</legend>
<h3>配置参数</h3>
<div>
<ul class="love">
<li><strong>theme</strong>: string {主题，有两个选项：default、vsStyle. 默认:default}</li>
<li><strong>expandLevel</strong>: int {树表的展开层次. 默认:1}</li>
<li><strong>column</strong>: int {可控制列的序号. 默认:0，即第一列}</li>
<li><strong>onSelect</strong>: function {拥有controller自定义属性的元素的点击事件，return false则中止展开. 默认值:
<pre><code>function($treeTable, id) {
//$treeTable 当前树表的jquery对象.
//id 当前行的id
//返回false，则直接退出，不会激发后面的beforeExpand和子节点的展开
return true;
}</code></pre>
</li>
<li><strong>beforeExpand</strong>: {展开子节点前触发的事件, 默认值：</li>
<pre><code>function($treeTable, id) {
//$treeTable 当前树表的jquery对象.
//id 当前行的id
}</code></pre>
</ul>
</div>
<h3>属性说明</h3>
<div>
<ul class="love">
<li><strong>id</strong>: string 行的id</li>
<li><strong>pId</strong>: string 父行的id</li>
<li><strong>controller</strong>: bool 指定某一个元素是否可以控制行的展开</li>
<li><strong>hasChild</strong>: bool 指定某一个tr元素是否有孩子（动态加载需用到）</li>
<li><strong>isFirstOne</strong>: bool 指定某一个tr元素是否是第一个孩子（自动生成属性，只读）</li>
<li><strong>isLastOne</strong>: bool 指定某一个tr元素是否是最后一个孩子（自动生成属性，只读）</li>
<li><strong>prevId</strong>: string 前一个兄弟节点的id（自动生成属性，只读）</li>
<li><strong>depth</strong>: string 当前行的深度（自动生成属性，只读）</li>
</ul>
</div>
</fieldset>
<fieldset>
<legend>使用方式</legend>
<h3> $("#元素id").treeTable({}) 如:</h3>
<p>引用的文件</p>
<pre><code><script src="/script/jquery.js" type="text/javascript"> </script>
<script src="/script/treeTable/jquery.treeTable.js" type="text/javascript"> </script></code></pre>
<p>js代码</p>
<pre><code>$(function(){
var option = {
theme:'vsStyle',
expandLevel : 2,
beforeExpand : function($treeTable, id) {
//判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
if ($('.' + id, $treeTable).length) { return; }
//这里的html可以是ajax请求
var html = '<tr id="8" pId="6"><td>5.1</td><td>可以是ajax请求来的内容</td></tr>'
+ '<tr id="9" pId="6"><td>5.2</td><td>动态的内容</td></tr>';
$treeTable.addChilds(html);
},
onSelect : function($treeTable, id) {
window.console && console.log('onSelect:' + id);
}
};
$('#treeTable1').treeTable(option);
});</code></pre>
<p>html结构</p>
<pre><code><table id="treeTable1" style="width:100%">
<tr>
<td style="width:200px;">标题</td>
<td>内容</td>
</tr>
<tr id="1">
<td><span controller="true">1</span></td>
<td>内容</td></tr>
<tr id="2" pId="1">
<td><span controller="true">2</span></td>
<td>内容</td></tr>
<tr id="3" pId="2">
<td>3</td>
<td>内容</td>
</tr>
<tr id="4" pId="2">
<td>4</td>
<td>内容</td>
</tr>
<tr id="5" pId="4">
<td>4.1</td>
<td>内容</td>
</tr>
<tr id="6" pId="1" hasChild="true">
<td>5</td>
<td>注意这个节点是动态加载的</td>
</tr>
<tr id="7">
<td>8</td>
<td>内容</td>
</tr>
</table></code></pre>
</fieldset>
<fieldset>
<legend>关于</legend>
<div class="content">
<h3>作者: benzhan(詹潮江)</h3>
<h3>版本变更</h3>
<p>1.0版本：创建基本功能。(2011-05-04)</p>
<p>1.1版本：(2011-05-08)</p>
<pre>这个版本提高了性能，做了以下改进：
* 1、使用了Css Sprite Tools 合并了分散的图标
* 2、使用了.id的方式来代替原来[pId=id]，这样选择孩子效率更高
* 3、把css剥离出来，增加动态添加css，每次家在前判断是否添加过
关于第二点，非常感谢onli同学的提醒。但我并没有直接修改我的接口，直接除去pId，而是在第一次遍历时将pId作为class名添加到节点中。这样有两个好处：
（1）接口可读性会比较好，pId比class更容易理解。
（2）第二点，如果直接使用class，那节点本来就有样式，这样获取到的className还要去分解空格得到pId，挺麻烦的。</pre>
<hr>
<p>1.3版本：(2011-05-09)</p>
<pre>这个版本扩展了事件，做了以下改进：
* 1、增加onSelect事件，onSelect: function($treeTable, id){}
* 2、增加beforeExpand事件，beforeExpand : function($treeTable, id){}
动态加载节点就靠beforeExpand 事件了。</pre>
<p>1.4.2版本：(2011-09-03)</p>
<pre>这个版本修复了bug，做了以下改进：
* 1、修复了多个tableTree不在同个页面的bug，并且可以让不同的tableTree使用不同的主题。
* 2、增加了controller的自定义标签来控制可点击的区域。</pre>
</div>
</fieldset>
</div>
</body>
</html>