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