treetable
<!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;width: 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;width: 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文件
treetable的更多相关文章
- 原创jquery插件treeTable（转）
由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. ...
- jquery插件treetable使用
下载后treetable插件后只需要保留jquery.treetable.css样式文件,jquery.treetable.theme.default.css皮肤文件和jquery.treetable ...
- jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】
今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...
- treetable 前台 累计计算树值 提交后台
treetable 累计计算树值 效果图 html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- 支持IE6的树形节结构TreeTable实际应用案例
<script src="jquery.js" type="text/javascript"></script> <script ...
- 支持IE6的树形节结构TreeTable
关于TreeTable实际应用的案例:http://www.cnblogs.com/qigege/p/5213689.html treeTable是跨浏览器.性能很高的jquery的树表组件,它使用非 ...
- 遍历json创建树状表（首先的前提条件是要引入jquery的jquery treeTable插件）
"root":{ "children":[ { "name":"AA", "children":[ ...
- jquery treeTable插件使用细则
简介 treeTable是跨浏览器.性能很高的jquery的树表组件,它使用非常简单,只需要引用jquery库和一个js文件,接口也很简单. 优点 兼容主流浏览器: 支持IE6和IE6+, Firef ...
- Spring Boot 入门（六）：集成 treetable 和 zTree 实现树形图
本篇文章是接着Spring Boot 入门(五):集成 AOP 进行日志管理写的,主要集成了树形图,在部门列表或者权限列表中,树形图经常被用上.主要是根据相应的 API 凭借 html 字符串 1.t ...
- ELement-UI之树形表格（treeTable&&treeGrid）
先上图来一波 支持无限层级,支持新增子级时自动打开父级,支持编辑时自动打开父级,执行操作时自带动画效果,支持初始化时设置全部打开或者关闭,支持一键展开与关闭丝滑般的无延迟 由于基于el-table扩展 ...
随机推荐
- Bootstrap Notify
https://github.com/mouse0270/bootstrap-notify $.notify('Hello World', { offset: { x: 50, y: 100 } }) ...
- 【207】WinForm Chart类
目录: 在工具箱中找到 Chart 控件并使用 设置 Chart 属性 代码中设置属性 属性中设置属性 Chart 类说明 ChartAreas ChartAreaCollection 类 Chart ...
- python学习笔记3-循环1
1 while break continue #while语句 ''' while 判断条件: 执行语句…… ''' count = 0 while (count < 9): print ('T ...
- android调用第三方库——第一篇 (转载)
转自:http://blog.csdn.net/jiuyueguang/article/details/9447245 版权声明:本文为博主原创文章,未经博主允许不得转载. 0:前言: 这两天一直在研 ...
- 详解Supervisor进程守护监控
Supervisor在百度百科上给的定义是超级用户,监管员.Supervisor是一个进程管理工具,当进程中断的时候Supervisor能自动重新启动它.可以运行在各种类unix的机器上,superv ...
- Codeforces Round #408 (Div. 2) C.Bank Hacking（二分）
传送门 题意 给出n个银行,银行之间总共有n-1条边,定义i与j有边相连为neighboring,i到j,j到k有边,则定义i到k的关系为semi- neighboring, 每家银行hack的难度为 ...
- 基础BFS+DFS poj3083
//满基础的一道题 //最短路径肯定是BFS. //然后靠右,靠左,就DFS啦 //根据前一个状态推出下一个状态,举靠左的例子,如果一开始是上的话,那么他的接下来依次就是 左,上 , 右 , 下 // ...
- C# 中==和Equal的区别
http://new-fighter.iteye.com/blog/1634800 今天突然看到一种情况,颠覆了我对这比较使用方法的判断. 于是开始在网上找资料,但几乎都是Java的,好不容易找到一个 ...
- TFS 用户设置read权限后仍然无法查看代码的问题
TFS 2013 在visual studio , team explorer , source control explorer 中点击 文件夹 右键菜单 Security 打开一个winform( ...
- ACM_X章求和（数学）
X章求和 Time Limit: 2000/1000ms (Java/Others) Problem Description: X章最喜欢求和了,他一看到什么鬼就什么鬼都加起来.one day,他得到 ...