父子表格 详细参见http://www.360ui.net
步骤1:引入父子表脚本
<!--树形表格start--> <script type="text/javascript" src="<%=path%>/libs//js/table/treeTable.js"></script> <!--树形表格end--> |
步骤2:构建父子表
<table class="detailTable" useColor="false" useHover="false" useClick="false"> <tr> <th width="30">操作</th><th width="100">姓名</th><th width="100">性别</th><th>备注</th> </tr> <tr> <td><span class="img_add2 hand" title="点击展开"></span></td><td>张小三</td><td>男</td><td>备注文字</td> </tr> <tr> <td></td> <td colspan="3"> <table class="tableStyle"> <tr> <th>日期</th><th>栏目1</th><th>栏目2</th><th>栏目3</th><th>栏目4</th> </tr> <tr> <td>2010-9-1</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-2</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-3</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-4</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-5</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> </table> </td> </tr>
<tr> <td><span class="img_add2 hand" title="点击展开"></span></td><td>张小三</td><td>男</td><td>备注文字</td> </tr> <tr> <td></td> <td colspan="3"> <table class="tableStyle"> <tr> <th>日期</th><th>栏目1</th><th>栏目2</th><th>栏目3</th><th>栏目4</th> </tr> <tr> <td>2010-9-1</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-2</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-3</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-4</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-5</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> </table> </td> </tr> </table> |
代码解读:
Ø 这里table设置class="detailTable"让表格拥有父子表功能,虽然class为detailTable,但仍然保留tableStyle所具有的特性,例如这里设置的useColor、 useHover、 useClick参数;
Ø 展开一行后,之前展开的自动收缩;
Ø 点击按钮进行展开和收缩
相关推荐
虽然layui已经下架了,但是相信还是有很多伙伴在使用,但是layui table表格没有分组显示功能。 本资源对原layui table控件进行了扩展,增加了分组展示功能。 * layui分组表格控件,用于实现页面数据分组,并以树形...
在本篇中,我们将探讨Bootstrap Table的两个高级特性:父子表和行列调序。 首先,我们来看父子表的实现。在Bootstrap Table中,通过设置`detailView`属性为`true`,可以在每一行前添加一个展开图标。当用户点击这个...
Bootstraptable建立父子表 detailView: true 的折叠使用
在使用过程中,有时我们可能会遇到一个特定的需求,即实现父子表的功能,也就是在一个表格中嵌套另一个表格,用于展示更详细的信息。"完美解决bootstraptable父子表子表渲染问题"的标题表明我们将探讨如何处理子表...
本话题主要关注"GridView父子节点异步折叠"这一特性,这是一种提高用户体验,使数据组织更加清晰有效的方法。 首先,GridView的折叠功能允许用户以层次结构方式查看数据,特别是对于具有复杂关系的数据集,如树状...
自动生成父子表单据应用程序 通过 Visual Studio 强大的数据库编程自动生成功能,可以自动生成父子表单据应用程序。以下是实现该应用程序的关键知识点: 一、创建表及关系 在创建父子表单据应用程序时,需要创建...
本文将详细介绍如何在Layui的表格模板中,实现layer父页面与子页面之间的数据交互。 首先,我们需要理解Layui的table组件。在示例中,表格`#role_tb`是通过Layui的`table`模块动态渲染的,它从服务器获取数据并显示...
Bootstrap Tree Table通常用于那些需要展示具有父子关系或者分类层次的数据场景,如组织结构、文件目录、产品分类等。 在Bootstrap Tree Table中,每个表格行可以展开或折叠,显示其下级节点。通过使用Bootstrap的...
在IT行业中,HTML表格是网页布局中不可或缺的一部分,尤其在数据展示时,高效且美观的表格设计至关重要。layui是一款优秀的前端框架,它以其简洁、强大的特性受到开发者的喜爱。而soul-table是layui的一个扩展组件,...
这个插件允许我们在Bootstrap表格中展示层次结构的数据,这对于显示具有父子关系或者分类信息的数据非常有用。 首先,`treeTable.html`是演示如何使用该树形表格插件的HTML文件。在这个文件中,我们可以看到一个...
在IT领域,树形表格(TreeTable)是一种特殊的数据展示方式,它结合了表格和树状结构的优点,常用于组织层次分明、具有父子关系的数据。本文将深入探讨“树形表格treetable完整版”,包括它的特点、应用场景、二次...
`Layui` 是一个轻量级的前端框架,提供了一系列的模块化组件,包括表格、按钮、表单等,方便开发者构建用户界面。本教程将深入讲解如何使用 `Layui` 实现父子页面之间的值传递。 首先,我们需要了解 `Layui` 的基本...
使用bootstrap,配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后,显示+号,再次点击,伸展表格中的内容,并显示-号
treeTable是跨浏览器、性能很高的... 接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以 组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等 提供两种风格: 通过参数来设置风格
BootstrapTable表格树是一种特殊的表格展示方式,它将数据以层次结构的形式展现,通常用于表示具有父子关系的数据。在网页设计中,这样的结构有助于用户更清晰地理解和操作复杂的数据集。 要创建一个BootstrapTable...
树形结构表格在展示层级关系数据时非常有用,例如组织架构、文件系统或者有父子关系的数据。 首先,Element UI 的表格组件支持树形数据的显示。当表格的每一行(row)包含 `children` 字段时,组件会自动识别并处理...
首先,树形表格是一种特殊的表格展示形式,它以层级结构显示数据,通常用于展示具有父子关系的数据。layui提供了方便的API和模板来构建这样的组件。在这个项目中,"Area.html"应该是展示树形表格的HTML页面,而"Area...
这个插件能够将传统的二维表格扩展为可折叠的树状结构,非常适合处理层次化数据,如组织结构、目录层级或者具有父子关系的数据。 在Bootstrap Treegrid中,每个行都可以展开或折叠,展示其子级数据。这种可视化方式...
复选框的选中状态管理需要精心设计,确保父子节点间的关联逻辑正确无误。 3. **样式定制**:组件应该支持CSS样式自定义,允许开发者通过改变CSS类或使用scss/less等预处理器来自定义组件外观,以符合项目整体风格。...
treeTable是跨浏览器、性能很高的...◦接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以 ◦组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等 ◦提供两种风格: 通过参数来设置风格