<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>