ludo 寫了一個 jQuery 的外掛元件 treeTable (http://plugins.jquery.com/project/treeTable)，可以很容易的將 table 以縮合/展開的樣式來呈現。上圖即是我想要呈現的結果。關於這外掛元件的詳細說明，請參考 ludo 的線上文件(http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html)。
在 treeTable 的定義裡， Table 裡面的每一個 <TR> 都必須要有一個唯一的 ID。如果某個 <TR> 他有個父親，則只需要在這個 <TR> 的 class 屬性加上以"child-of-"字首開頭，並接續著父親 ID 的屬性名稱，就可以將這個 <TR> 視為是某一個 <TR> 的兒子。
舉例來說，
<TR ID="Father"><TD>爸爸</TD></TR>
<TR ID="Son" class="child-of-Father"><TD>兒子</TD></TR>
只需在 ID="Son" 的 <TR> 中，加上 class="child-of-Father" ，就可以完成父子關係的描述。
最後，只需要使用 .treeTable() 就可以將縮合/展開的效果呈現出來。
假如我的 Table ID 是 treeTable ，則呈現縮合/展開的語法如下：
$("#treeTable").treeTable();
以下是實際將 treeTable 元件下載，整合到 .Net 專案的步驟：
0.下載 treeTable(v2.2.3) :
http://plugins.jquery.com/files/treeTable-2.2.3.zip
1.解開 treeTable 壓縮檔
2.將 /treeTable/doc/javascripts 資料夾複製到自己專案的 /javascripts 下
3.將 /treeTable/doc/stylesheets 資料夾複製到自己專案的 /stylesheets 下
4.將 /treeTable/doc/images 資料夾複製到自己專案的 /images 下
5.將 /treeTable/src/javascripts 資料夾複製到自己專案的 /javascripts 下
6.將 /treeTable/src/stylesheets 資料夾複製到自己專案的 /javascripts 下
7.將 /treeTable/src/images 資料夾複製到自己專案的 /images 下
8.修改 /stylesheets/master.css ，將 body 的 font-family 改成
font-family: Verdana, Arial, Helvetica, sans-serif; (自己覺得預設的字型醜醜ㄉ)
9.在 <head> 裡定義好所引用的 .css 與 .js 。在這裡要特別強調，不要忘了將 master.css
引用進來，否則會無法正確顯示。
<head runat="server">
<title>treeTable Demo</title>
<link href="stylesheets/master.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script>
<script language="javascript" src="javascripts/jquery.treeTable.js" type="text/javascript"></script>
<link href="stylesheets/jquery.treeTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){
$("#treeTable").treeTable();
})
</script>
</head>
10.將測試的 Table 放到 <body> 裡：
<body>
<table id="treeTable" >
<thead>
<th>office</th><th>帳號</th><th>中文姓名</th>
</thead>
<tbody>
<tr id="p1" ><td>3F</td><td></td><td></td></tr>
<tr id="c1" class="child-of-p1"><td>3F</td><td>paladin</td><td>李志堅</td></tr>
<tr id="c2" class="child-of-p1"><td>3F</td><td>hugo</td><td>馮世華</td></tr>
<tr id="p2"><td>5F</td><td></td><td></td></tr>
<tr id="c3" class="child-of-p2"><td>5F</td><td>panda</td><td>許世宗</td></tr>
<tr id="c4" class="child-of-p2"><td>5F</td><td>polly</td><td>陳珮茹</td></tr>
</tbody>
</table>
</body>
沒有留言:
張貼留言