<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);
});
</script>
html結構
<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>