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扩展 ...
随机推荐
- codeforces 126B
Asterix, Obelix and their temporary buddies Suffix and Prefix has finally found the Harmony temple. ...
- pl/sql developer安装使用即时客户端
pl/sql developer安装使用即时客户端 背景:由于Oracle的安装比较麻烦,大部分人都使用远程Oracle,而Oracle Instantclient Basic package可以解决 ...
- 为什么linux有足够的内存还进行swap?
1.Linux在内存被用完之前开始交换.这是为了提高性能和响应能力: 性能提高是因为一些内存放磁盘缓存比方内存更合适.因此,最好将一个已经停用了一段时间的程序交换出去,而将经常使用的文件保存在缓存中. ...
- Linux2.6 内核中结构体初始化（转载）
转自:http://hnniyan123.blog.chinaunix.net/uid-29917301-id-4989879.html 在Linux2.6版本的内核中,我们经常可以看到下面的结构体的 ...
- githunb竟然可以识别MQ4
完全是上班时候突发奇想,没想到能识别.只是没有现成的gitignore
- 介绍一下Extern “C”，它的作用是什么?
Extern “C”是由C++提供的一个连接交换指定符号,用于告诉C++这段代码是C函数.这是因为C++编译后库中函数名会变得很长,与C生成的不一致,造成C++不能直接调用C函数,加上extren “ ...
- bzoj 4871: [Shoi2017]摧毁“树状图”【树形dp】
做不来--参考https://www.cnblogs.com/ezyzy/p/6784872.html #include<iostream> #include<cstdio> ...
- bzoj 4240: 有趣的家庭菜园【树状数组+贪心】
以为是逆序对数-- 实际上,原数组移动若干次后我们会得到一个新的下标序列,需要的移动次数是这个新下标序列的逆序对数 然后我们要让这个最小,考虑贪心先按h把下标排一遍序,然后每次询问到一种值的时候,对每 ...
- Luogu P2278 [HNOI2003]操作系统【优先队列/重载运算符/模拟】 By cellur925
题目传送门 本来是照着二叉堆的题去做的...没想到捡了个模拟...不过模拟我都不会...我好弱啊... 其实核心代码并不长,比辰哥的标程短到不知哪里去...但是思路需要清晰. 读题的时候我明白,当有优 ...
- Jmeter之一个请求获取上一个请求的参数
刚开始有这个需求,网上都是一些使用正则表达式的例子,苦于自己看不好正式的表达式,且响应结果稍微变一下,自己就不会写了,于是谷歌上各种搜,也阅读官网上文档,后来发现一个好的插件 Json path Ex ...