父子表格 详细参见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的一个扩展组件，...
在IT领域，树形表格（TreeTable）是一种特殊的数据展示方式，它结合了表格和树状结构的优点，常用于组织层次分明、具有父子关系的数据。本文将深入探讨“树形表格treetable完整版”，包括它的特点、应用场景、二次...
这个插件允许我们在Bootstrap表格中展示层次结构的数据，这对于显示具有父子关系或者分类信息的数据非常有用。 首先，`treeTable.html`是演示如何使用该树形表格插件的HTML文件。在这个文件中，我们可以看到一个...
`Layui` 是一个轻量级的前端框架，提供了一系列的模块化组件，包括表格、按钮、表单等，方便开发者构建用户界面。本教程将深入讲解如何使用 `Layui` 实现父子页面之间的值传递。 首先，我们需要了解 `Layui` 的基本...
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
treeTable是跨浏览器、性能很高的... 接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以 组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等 提供两种风格: 通过参数来设置风格
BootstrapTable表格树是一种特殊的表格展示方式，它将数据以层次结构的形式展现，通常用于表示具有父子关系的数据。在网页设计中，这样的结构有助于用户更清晰地理解和操作复杂的数据集。 要创建一个BootstrapTable...
首先，树形表格是一种特殊的表格展示形式，它以层级结构显示数据，通常用于展示具有父子关系的数据。layui提供了方便的API和模板来构建这样的组件。在这个项目中，"Area.html"应该是展示树形表格的HTML页面，而"Area...
树形结构表格在展示层级关系数据时非常有用，例如组织架构、文件系统或者有父子关系的数据。 首先，Element UI 的表格组件支持树形数据的显示。当表格的每一行（row）包含 `children` 字段时，组件会自动识别并处理...
这个插件能够将传统的二维表格扩展为可折叠的树状结构，非常适合处理层次化数据，如组织结构、目录层级或者具有父子关系的数据。 在Bootstrap Treegrid中，每个行都可以展开或折叠，展示其子级数据。这种可视化方式...
复选框的选中状态管理需要精心设计，确保父子节点间的关联逻辑正确无误。 3. **样式定制**：组件应该支持CSS样式自定义，允许开发者通过改变CSS类或使用scss/less等预处理器来自定义组件外观，以符合项目整体风格。...
treeTable是跨浏览器、性能很高的...◦接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以 ◦组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等 ◦提供两种风格: 通过参数来设置风格