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扩展 ...
随机推荐
- bzoj2676
二分概率+矩乘+dp 也是二分概率,然后dp[i][j][k]表示当前到了i,有j条命,下一次的收益是k,然后矩乘转移,但是我自己的似乎wa了,抄了liu_runda的才行,具体不知道为什么 注释的是 ...
- bzoj1996
区间dp 其实我们发现对于一段区间我们是这样构造的,每次我们会向两端放数,这样就有四种情况,且必须满足题意,初值是dp[i][i][0]=1,因为第一个人只有一种放法,不分左右.其实看见dp[i][i ...
- DELL R730服务器配置RAID及安装服务器系统 以及域的控制
https://wenku.baidu.com/view/ad45d85a9ec3d5bbfd0a74d9.html
- git提交历史不显示自己账户的问题
其实这个问题本身也不大好描述.还是上图好了 问题就如同途中倒数第二次提交.明明就是我提交的,却不显示我的账号.个人页面也不反映这次提交. 后来发现问题所在,要想正确显示,必须要把对这个项目的邮箱设 ...
- Thrift 使用TNonblockingServer模型时调用PosixThreadFactory出错。
Thrift 使用TNonblockingServer模型时调用PosixThreadFactory出错. 我定位到shared_ptr<PosixThreadFactory> thr ...
- 笔记：JavaScript闭包
闭包 闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰.直观的说就是形成一个不销毁的栈环境. 对于闭包,当外部函数返回之后,内部函数依然可以访问外部函数的变量 ...
- Django学习:模板继承和配置静态文件
一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...
- NOIp2017真题模拟赛 By cellur925
果然我还是最菜的==不接受反驳 (先考了day2喵喵喵) Day2 T1:奶酪 期望得分:100分 实际得分:100分 考察:并查集 思路:这题其实之前做过了==.思路还是比较清晰的,读入时预处理出可 ...
- bzoj3343 教主的魔法【分块入门】By cellur925
题意:维护一个数列,给出维护区间加法,询问区间内大于等于某个值的元素个数. 算法:分块.因为本题第二问显然可以用二分的思想,但是这貌似并不符合区间可加性,线段树好像就不好用了呢.所以本蒟蒻学习了分块. ...
- Lucky Array Codeforces - 121E && Bear and Bad Powers of 42 Codeforces - 679E
http://codeforces.com/contest/121/problem/E 话说这题貌似暴力可A啊... 正解是想出来了,结果重构代码,调了不知道多久才A 错误记录: 1.线段树搞混num ...