treeTable的简单用法
来源:互联网 发布:js if else 简写 编辑:程序博客网 时间:2024/06/05 18:16
treeTable也是一种很常用的插件,以数型table的形式来展示数据,效果图如下:
不多说了,直接贴代码吧:
需要引入的文件:
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.treetable.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.treetable.theme.default.css" />
<link rel="stylesheet" type="text/css" href="jquery.treetable.css" />
html代码:
<table id="example-advanced">
<tr data-tt-id="0">
<td>app</td>
</tr>
<tr data-tt-id="1" data-tt-parent-id="0">
<td>controllers</td>
</tr>
<tr data-tt-id="1-1" data-tt-parent-id="1">
<td>application_controller.rb</td>
</tr>
<tr data-tt-id="2">
<td>helpers</td>
</tr>
<tr data-tt-id="2-1" data-tt-parent-id="2">
<td>models</td>
</tr>
<tr data-tt-id="2-1" data-tt-parent-id="2">
<td>views</td>
</tr>
</table>
<a href="#" onclick="jQuery('#example-advanced').treetable('expandAll'); return false;">展开所有</a>
<a href="#" onclick="jQuery('#example-advanced').treetable('collapseAll'); return false;">关闭所有</a>
<br/>
双击可以看到选择的是哪个
js代码:
<script>
$(function(){
//加载treetable
$("#example-advanced").treetable({ expandable: true });
//选中高亮
$("#example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
//双击提示
$("#example-advanced tbody").on("dblclick", "tr", function() {
//console.log($(this).attr('data-tt-id'));
alert("你选择的是"+$(this).attr('data-tt-id'));
});
})
</script>
源码连接如下:
http://download.csdn.net/detail/s592652578/8520831
- treeTable的简单用法
- 关于TreeTable 的问题
- TreeTable的应用
- treetable的后台算法
- 菜鸟做的treetable的应用实例
- Jquery TreeTable使用的一个误区
- 基于jquery的treeTable树表组件
- Jquery的树形表格插件-treetable
- 层级设计以及算法,treetable的实现
- swing应用——带有复式表头的treetable
- 用javascript实现的TreeTable, 可以当做树(Tree)用
- 使用jquery的 treetable插件实现树状结构 demo
- JQuery TreeTable
- jquery treetable
- jquery-TreeTable
- vi的简单用法
- fstream的简单用法
- namespace的简单用法
- IOS数据持久化存储机制
- Caesar密码
- HDU 4027 Can you answer these queries(线段树 成段更新)
- 第3周项目类和对象5- 数组作数据成员
- 第二周课程实践 阅读程序
- treeTable的简单用法
- boundingRectWithSize计算高度不准确
- 好记性不如烂笔头(二)
- Java面试题集(1-50)
- 黑马程序员---java基础知识(三):面向对象
- android LayoutInflater的两种用法
- SDOI2009晨跑题解
- js 中 ==与===区别(两个等号与三个等号)
- 接口的成员特点