<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/screen.css" media="screen" />
<link rel="stylesheet" href="css/jquery.treetable.css" />
<link rel="stylesheet" href="css/jquery.treetable.theme.default.css" />
</head>
<body>
<style>
table.treetable thead tr th{
background:#f2f2f2 !important;
border-top: 1px solid #ddd !important;
border-right:1px solid #ddd !important;
padding: 8px 10px !important;
color: #555;
font-weight: 700;
text-align: center !important;
}
table.treetable tbody tr td{
padding: 8px 10px !important;
color: #555;
text-align: center !important;
}
table.treetable tbody tr td:nth-of-type(1){
text-align: left !important;
}
table.treetable tbody tr td a{
text-decoration:none !important;
color: #2fa4e7;
}
table.treetable tbody tr td a:hover{
color: #157ab5;
text-decoration: none;
}
table.treetable tr.selected{
background:#ffffff !important;
color: #000000 !important;
}
.table th, .table td{
border-left: 1px solid #ddd !important;
border-bottom: 1px solid #ddd !important;
border-right:1px solid #ddd !important;
}
</style>
<div id="main">
<table id="example-advanced" class="example-advanced table table-striped table-bordered table-condensed tree_table">
<thead>
<tr>
<th><span style="display: inline-block; 100%;text-align: center;padding: .2em 0 .2em 0;">栏目名称</span></th>
<th><span>次序</span></th>
<th><span>创建人</span></th>
<th>是否显示到导航栏</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr data-tt-id='1'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
<tr data-tt-id='66' data-tt-parent-id='1'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
<tr data-tt-id='88' data-tt-parent-id='66'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
<tr data-tt-id='999' data-tt-parent-id='88'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
<tr data-tt-id='90000' data-tt-parent-id='999'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
<tr data-tt-id='93000' data-tt-parent-id='999'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
</tbody>
</table>
<table id="example-advanced1" class="example-advanced table table-striped table-bordered table-condensed tree_table" >
<thead>
<tr>
<th><span style="display: inline-block; 100%;text-align: center;padding: .2em 0 .2em 0;">栏目名称</span></th>
<th><span>次序</span></th>
<th><span>创建人</span></th>
<th>是否显示到导航栏</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr data-tt-id='1'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
<tr data-tt-id='66' data-tt-parent-id='1'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
<tr data-tt-id='88' data-tt-parent-id='66'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
<tr data-tt-id='999' data-tt-parent-id='88'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
<tr data-tt-id='90000' data-tt-parent-id='999'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
<tr data-tt-id='93000' data-tt-parent-id='999'>
<td><a>商务合作</a></td>
<td><span>0</span></td>
<td><span>lijiaoqiao</span></td>
<td>是</td>
<td class="last">
<a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
<a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
<a href="javascript:doUrl('/documentCategory/toAdd?id=1&addChildren=true')">添加下级栏目</a>
</td>
</tr>
</tbody>
</table>
<!--<pre class="listing">-->
<!--$(".example-advanced").treetable({ expandable: true });-->
<!--// Highlight selected row-->
<!--$(".example-advanced tbody").on("mousedown", "tr", function() {-->
<!--$(".selected").not(this).removeClass("selected");-->
<!--$(this).toggleClass("selected");-->
<!--});-->
<!--// Drag & Drop Example Code-->
<!--$(".example-advanced .file, .example-advanced .folder").draggable({-->
<!--helper: "clone",-->
<!--opacity: .75,-->
<!--refreshPositions: true,-->
<!--revert: "invalid",-->
<!--revertDuration: 300,-->
<!--scroll: true-->
<!--});-->
<!--$(".example-advanced .folder").each(function() {-->
<!--$(this).parents(".example-advanced tr").droppable({-->
<!--accept: ".file, .folder",-->
<!--drop: function(e, ui) {-->
<!--var droppedEl = ui.draggable.parents("tr");-->
<!--$(".example-advanced").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));-->
<!--},-->
<!--hoverClass: "accept",-->
<!--over: function(e, ui) {-->
<!--var droppedEl = ui.draggable.parents("tr");-->
<!--if(this != droppedEl[0] && !$(this).is(".expanded")) {-->
<!--$(".example-advanced").treetable("expandNode", $(this).data("ttId"));-->
<!--}-->
<!--}-->
<!--});-->
<!--});</pre>-->
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="jquery.treetable.js"></script>
<script>
$(".example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
$("#example-basic").treetable({ expandable: true });
$("#example-basic-static").treetable();
$("#example-basic-expandable").treetable({ expandable: true });
$(".example-advanced").treetable({ expandable: true });
// Highlight selected row
$(".example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
// Drag & Drop Example Code
$(".example-advanced .file, .example-advanced .folder").draggable({
helper: "clone",
opacity: .75,
refreshPositions: true, // Performance?
revert: "invalid",
revertDuration: 300,
scroll: true
});
$(".example-advanced .folder").each(function() {
$(this).parents(".example-advanced tr").droppable({
accept: ".file, .folder",
drop: function(e, ui) {
var droppedEl = ui.draggable.parents("tr");
$(".example-advanced").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
},
hoverClass: "accept",
over: function(e, ui) {
var droppedEl = ui.draggable.parents("tr");
if(this != droppedEl[0] && !$(this).is(".expanded")) {
$(".example-advanced").treetable("expandNode", $(this).data("ttId"));
}
}
});
});
$("form#reveal").submit(function() {
var nodeId = $("#revealNodeId").val()
try {
$(".example-advanced").treetable("reveal", nodeId);
}
catch(error) {
alert(error.message);
}
return false;
});
</script>
</body>
</html>
根据该html下载并引入对应的css和js文件