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扩展 ...
随机推荐
- POI2013 Bytecomputer
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3427 可以证明最终序列为-1...0....1 因为首先如果 a(i-1) 为-1或0,执行操 ...
- CodeForces 712C Memory and De-Evolution (贪心+暴力)
题意:现在有一个长度为 x 的正三角形,每次可以把一条边减小,然后用最少的时间变成长度为 y 的正三角形. 析:一开始,正着想,然后有一个问题,就是第一次减小多少才能最快呢?这个好像并不好确定,然后我 ...
- alternatives 命令学习
最经在捣鼓Cloudera的cdh ,发现里面使用了alternatives命令,由于不懂这个命令,让我走了好多弯路. 现在mark一下 ubuntu 12.04 系统的命令为:update-alte ...
- PJzhang:工作之余一起来看剧
猫宁!!! 最近几个月陆续看了4部电视剧,不错,分别来自4个国家或地区,英国.日本.中国香港.俄罗斯,是的,没有美剧,平时真的很少看美剧. 1-IT狂人,英剧,一共4季,每季6集,每集25分钟左右. ...
- Zeppelin的入门使用系列之创建新的Notebook
前期博客 hadoop-2.6.0.tar.gz + spark-1.6.1-bin-hadoop2.6.tgz + zeppelin-0.5.6-incubating-bin-all.tgz(mas ...
- PHP + jquery.validate remote的用法
[ 转 ] http://www.cnlvzi.com/index.php/Index/article/id/58 最近做验证功能时,用到jquery.validate.js中的remote远程验证方 ...
- htm5 + ajax 文件上传
好文 http://www.cnblogs.com/morlin/p/4930822.html 后台接收 FormData 的参数一直为空,将jquery改为最高版本,问题解决.测试发现IE10以上才 ...
- Hdu 5452 Minimum Cut (2015 ACM/ICPC Asia Regional Shenyang Online) dfs + LCA
题目链接: Hdu 5452 Minimum Cut 题目描述: 有一棵生成树,有n个点,给出m-n+1条边,截断一条生成树上的边后,再截断至少多少条边才能使图不连通, 问截断总边数? 解题思路: 因 ...
- DP+高精度 URAL 1036 Lucky Tickets
题目传送门 /* 题意:转换就是求n位数字,总和为s/2的方案数 DP+高精度:状态转移方程:dp[cur^1][k+j] = dp[cur^1][k+j] + dp[cur][k]; 高精度直接拿J ...
- codeblock 16.01
1.不希望for (int i = 1; i <= n; ++i) { } 中间按下去后,自动缩进到中间,只缩进到下一行. 可以去掉其中一个. 2.不自动完成,就是出现一个括号后不补充另一个. ...