web页面树形表格的实现
2015-02-08 14:47
148 查看
在做web项目的时候,我们通常会遇到这样的情况,一些数据需要用树形的结构来表示他们之间的关系,那么要怎么来实现呢?这里介绍使用插件jquery-treetable来实现的方法。
1 下载源码,地址:http://ludo.cubicphuse.nl/jquery-treetable/,也可以在线查看Api。
2 在自己的页面里面引入js文件和css文件,如何要结合jqueryUI使用则要引入jqueryUI的js文件。
<link rel="stylesheet" type="text/css" href="treetable/css/jquery.treetable.css">
<link rel="stylesheet" type="text/css" href="treetable/css/jquery.treetable.theme.default.css">
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<!-- jquery-ui -->
<script type="text/javascript" src="treetable/js/jquery-ui.js"></script>
<script type="text/javascript" src="treetable/js/jquery.treetable.js"></script>
3 定义标签<table id="example-basic" class="treetable"></table>,class属性必须为treetable,这个跟样式有关,注意<tbody><tr></tr></tbody>,同样的道理。
当然你也可以去样式文件修改自定义样式。
<table id="example-basic" class="treetable">
<thead>
<tr>
<th>类别名称</th>
<th>类别编号</th>
<th>增加时间</th>
<th>操作</th>
</tr>
</thead>
<tbody class="json-list">
<tr data-tt-id="1" class="expanded">
<td><span class="indenter" style="padding-left: 0px;"><a href="#" title="Collapse"> </a></span>零食</td>
<td>1</td>
<td>2015-01-26 11:05:35</td>
<td><a href="javascript:void(0);" onclick="getModifyPageAndJump(1)">修改</a>|<a href="javascript:void(0);" onclick="deleteById(1);">删除</a>|<a href="javascript:void(0);" onclick="getPageAndJump(1);">查看商品信息</a></td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="1" class="collapsed" style="display: table-row;">
<td><span class="indenter" style="padding-left: 19px;"></span>酸类零食</td>
<td>4</td>
<td>2015-01-26 14:08:07</td>
<td><a href="javascript:void(0);" onclick="getModifyPageAndJump(4)">修改</a>|<a href="javascript:void(0);" onclick="deleteById(4);">删除</a>|<a href="javascript:void(0);" onclick="getPageAndJump(4);">查看商品信息</a></td>
</tr>
</tbody>
</table>
4 调用jquery.treetable.js脚本。相关动作和事件请查api。
$("#example-basic").treetable({ expandable: true });
$("#example-basic tbody tr").mousedown(function() {
$("tr.selected").removeClass("selected");
$(this).addClass("selected");
});
5 效果如下:
1 下载源码,地址:http://ludo.cubicphuse.nl/jquery-treetable/,也可以在线查看Api。
2 在自己的页面里面引入js文件和css文件,如何要结合jqueryUI使用则要引入jqueryUI的js文件。
<link rel="stylesheet" type="text/css" href="treetable/css/jquery.treetable.css">
<link rel="stylesheet" type="text/css" href="treetable/css/jquery.treetable.theme.default.css">
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<!-- jquery-ui -->
<script type="text/javascript" src="treetable/js/jquery-ui.js"></script>
<script type="text/javascript" src="treetable/js/jquery.treetable.js"></script>
3 定义标签<table id="example-basic" class="treetable"></table>,class属性必须为treetable,这个跟样式有关,注意<tbody><tr></tr></tbody>,同样的道理。
当然你也可以去样式文件修改自定义样式。
<table id="example-basic" class="treetable">
<thead>
<tr>
<th>类别名称</th>
<th>类别编号</th>
<th>增加时间</th>
<th>操作</th>
</tr>
</thead>
<tbody class="json-list">
<tr data-tt-id="1" class="expanded">
<td><span class="indenter" style="padding-left: 0px;"><a href="#" title="Collapse"> </a></span>零食</td>
<td>1</td>
<td>2015-01-26 11:05:35</td>
<td><a href="javascript:void(0);" onclick="getModifyPageAndJump(1)">修改</a>|<a href="javascript:void(0);" onclick="deleteById(1);">删除</a>|<a href="javascript:void(0);" onclick="getPageAndJump(1);">查看商品信息</a></td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="1" class="collapsed" style="display: table-row;">
<td><span class="indenter" style="padding-left: 19px;"></span>酸类零食</td>
<td>4</td>
<td>2015-01-26 14:08:07</td>
<td><a href="javascript:void(0);" onclick="getModifyPageAndJump(4)">修改</a>|<a href="javascript:void(0);" onclick="deleteById(4);">删除</a>|<a href="javascript:void(0);" onclick="getPageAndJump(4);">查看商品信息</a></td>
</tr>
</tbody>
</table>
4 调用jquery.treetable.js脚本。相关动作和事件请查api。
$("#example-basic").treetable({ expandable: true });
$("#example-basic tbody tr").mousedown(function() {
$("tr.selected").removeClass("selected");
$(this).addClass("selected");
});
5 效果如下:
相关文章推荐
- 在Web页面中实现数据表格的排序功能(全部数据,非当前页)
- 利用TDC组件实现对WEB页面的交互操作
- 利用flash与.net下socket通信实现WEB页面的“推”(二)Flash和服务器间的通信核心:XMLSocket对象
- WEB页面同时实现两种打印(下载Excel,页面直接打印)
- 巧妙实现隐藏不想打印的web页面元素
- WEB页面内实现可编辑选择框的方法
- 编写web打印程序,实现打印预览,直接打印 ,页面设置 ,关闭
- 实现Web页面内容动态改变的dhtml操作
- 用WebService实现web页面的局部刷新
- 用JavaScript脚本实现Web页面信息交互
- WEB页面内实现可编辑选择框的方法
- web打印,巧妙实现隐藏不想打印的页面元素,以及页眉和页脚
- web中,如何读取Word内容(包含表格,但不包含图片)并且显示在页面中或保存进数据库中
- 用ISAPI方式实现Web页面的自动更新
- 实现Web页面上的右键快捷菜单
- 在web页面中打印功能的实现问题集锦
- Web页面loading的实现方法
- 关于web页面表格列拖动的解决方法
- 基于视觉的Web页面分页算法VIPS的实现源代码下载
- 用DHTML在Web页面实现多媒体显示效果