HTML:
===================
需要引入文件: Jquery.js,
<link href="${ctx }/resources/common/treeTable/themes/default/treeTable.css" rel="stylesheet" type="text/css" />
<link href="${ctx }/resources/common/treeTable/themes/vsStyle/treeTable.css" rel="stylesheet" type="text/css" />
<script src="${ctx }/resources/common/treeTable/jquery.treeTable.js" type="text/javascript" />
HTML代码:
<table id='treeTable2' class="table table-striped">
<thead>
<tr>
<th >#</th>
<th >名称 </th>
<th>链接 </th>
<th>是否可见 </th>
<th>是否可编辑</th>
<th>操作</th>
</tr>
</thead>
<tbody >
<tr id="1" hasChild="true">
<td ></td>
<td>测试1</td>
<td>测试1</td>
<td>测试1</td>
<td>测试1</td>
<td>测试1</td>
<td>测试1</td>
</tr>
</tbody>
</table>
===================
JS代码:
===================
<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="1"><td></td><td>系统管理</td></tr>'
+ '<tr id="9" pId="1"><td></td><td>XXX系统</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>
=====================