Jquery TreeTable使用的一个误区
2011-07-17 21:23
501 查看
说起树形结构,在.net下首先会想到TreeView控件。但是如果要在后台的table表格里面表示这个树形结构,我个人感觉不太方便。不过我们还可以使用Jquery.Jquery提供了一个TreeTable的插件,使用这个插件可以方便的表示树形表格。
使用Jquery TreeTable很简单,首先引入Jquery,然后在引入jquery.treeTable.min,CSS也是不可以缺少的。然后给要表示树形结构的Table表格加一个class属性,
然后在 $(".example").treeTable();就完成了。
贴一个官方的例子。
<table class="example">
<caption>Simple treeTable Example</caption>
<thead>
<tr>
<th>TreeColumn</th>
<th>Additional data</th>
</tr>
</thead>
<tbody>
<tr id="ex0-node-1">
<td>Node 1: Click on the icon in front of me to expand this branch.</td>
<td>I live in the second column.</td>
</tr>
<tr id="ex0-node-1-1" class="child-of-ex0-node-1">
<td>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
<td>Interesting.</td>
</tr>
<tr id="ex0-node-1-1-1" class="child-of-ex0-node-1-1">
<td>Node 1.1.1: I am part of the tree too!</td>
<td>That's it!</td>
</tr>
</tbody>
</table>
不过这里可以有一个误区,因为tr的ID写法,可能会被误导。
其实,tr的ID并不是最重要的,表示树形的关系的关键是class关系。
比如有两个<tr >,一个<tr id="tr1">,一个<tr id="tr2">,要表示<tr id="tr2">是属于<tr id="tr1">的,只需给<tr id="tr2">加一个class="child-of-tr1"。
也就是说,DEMO上ex0-node-1,ex0-node-1-1,ex0-node-1-1-1这种ID格式不是必须的。只要在后台使用递归函数的时候构造好class的格式就可以了。
使用Jquery TreeTable很简单,首先引入Jquery,然后在引入jquery.treeTable.min,CSS也是不可以缺少的。然后给要表示树形结构的Table表格加一个class属性,
然后在 $(".example").treeTable();就完成了。
贴一个官方的例子。
<table class="example">
<caption>Simple treeTable Example</caption>
<thead>
<tr>
<th>TreeColumn</th>
<th>Additional data</th>
</tr>
</thead>
<tbody>
<tr id="ex0-node-1">
<td>Node 1: Click on the icon in front of me to expand this branch.</td>
<td>I live in the second column.</td>
</tr>
<tr id="ex0-node-1-1" class="child-of-ex0-node-1">
<td>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
<td>Interesting.</td>
</tr>
<tr id="ex0-node-1-1-1" class="child-of-ex0-node-1-1">
<td>Node 1.1.1: I am part of the tree too!</td>
<td>That's it!</td>
</tr>
</tbody>
</table>
不过这里可以有一个误区,因为tr的ID写法,可能会被误导。
其实,tr的ID并不是最重要的,表示树形的关系的关键是class关系。
比如有两个<tr >,一个<tr id="tr1">,一个<tr id="tr2">,要表示<tr id="tr2">是属于<tr id="tr1">的,只需给<tr id="tr2">加一个class="child-of-tr1"。
也就是说,DEMO上ex0-node-1,ex0-node-1-1,ex0-node-1-1-1这种ID格式不是必须的。只要在后台使用递归函数的时候构造好class的格式就可以了。
相关文章推荐
- 使用jquery的 treetable插件实现树状结构 demo
- 一个基于jQuery的树型插件(OrangeTree)使用介绍
- 一个基于jQuery的树型插件(OrangeTree)使用介绍
- jQuery.treetable使用及异步加载
- jquery 插件treeTable使用
- jquery插件treetable使用
- JQuery.TreeTable基础使用
- 在母版页(MasterPage)中使用 jQuery 的一个小技巧
- 学习使用JQuery来制作一个动态表格
- Jquery easyui tree的使用
- 使用jQuery开发一个响应式超酷整合RSS信息阅读杂志
- 一个页面实现修改删除列表显示,ajax动态生成table(使用ajax,springmvc,jsp)
- 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的web应用
- [原创]jPagerBar1.2发布(一个适合Ajax+JSON+jQuery环境使用的多功能页码栏插件)(Demo、源文件下载已更新)
- android 使用tablelayout设计一个 天气 表格显示
- 一个简单的支持排序的双栏列表(使用jquery)
- 使用jQuery操作HTML的table表格的实例解析
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果
- mysql 外键(foreign key)的使用,同一个table的两个外键对应一个table的主键