表格分组标签:表格行分组中的隐藏功能

119 篇文章 3 订阅
91 篇文章 0 订阅

在程序员的认知中,表格中存在行分组标签,也就是thead,tbody,tfoot三个行分组标签。也许你会认为我在这里还是为大家继续讲解thead,tbody,tfoot三个标签,那就大错特错了
今天除了要讲解他的基础作用之外,还要为大家带来一个开发中经常使用他的小妙招,在以后的开发中你绝对会爱上表格的分组标签
一、表格分组标签的作用:
thead、tfoot 以及 tbody 元素对表格中的行进行分组。当您创建某个表格时,需要数据进行分区进行显示的时候,我们可以使用行分组标签
Thead代表的则是表格的头部,简称为表头
Tbody代表的则是表格的主体,主要应用在数据显示区域内容
Tfoot代表的则是表格的尾部,简称表尾
在使用表格组开发的时候,如果不对表格行进行分组的话,那么默认都属于 tbody 中,如果想要查找表格内部的单元格(td)则不能直接使用table>tr>td去查找,因为浏览器中默认会为表格进行分组:如下图:默认表格结构中没有分组标签的使用,但是在浏览器中浏览器会自动添加tbody进行分组;
在这里插入图片描述
在这里插入图片描述

所以实际开发的时候我们为了避免与浏览器中的tbody造成冲突,需要添加分组标签;或者是查找元素的时候使用后代选择器(table td)或者是对应浏览器中的子代(table>tbody>tr>td)查找元素
二、添加不添加thead是否有影响呢?
如果我们单纯的只考虑开发效果,把东西做完,添加分组标签与否均可。但是添加thead和tfoot这些分组标签的另外一个小技巧,小作用是什么呢?就是方便我们打印的时候能出现我们的“页眉和页脚”
实际开发过程中,有些表格数据在浏览器中需要我们直接进行打印,但是打印的时候我们需要每一页上面均有表头,这就需要我们使用表格的分组标签来实现了
使用分组标签前在浏览器中打印显示效果:表头只在第一页显示,并且第一页数据结束没有表格横线;第二页没有任何信息表头;
在这里插入图片描述

为表格添加thead表头之后
在这里插入图片描述

显示效果如下:轻松搞定每一页都有表头信息
在这里插入图片描述

好了,有没有发现表格分组标签的强大之处,并且如果你要想添加表格的脚注,可以使用表格的尾部分组标签来完成哦;大家一起动手演示起来吧。需要源码的找我哦

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Flutter创建表格可以使用DataTables Widget,它支持全选和分组功能。以下是一个示例代码: ```dart import 'package:flutter/material.dart'; class DataTableExample extends StatefulWidget { @override _DataTableExampleState createState() => _DataTableExampleState(); } class _DataTableExampleState extends State<DataTableExample> { List<DataRow> _rows = List.generate( 10, (index) => DataRow(cells: [ DataCell(Text('cell ${index + 1}')), DataCell(Text('value ${index + 1}')), ])); bool _selectAll = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('DataTable Example'), ), body: SingleChildScrollView( scrollDirection: Axis.horizontal, child: DataTable( sortColumnIndex: 0, sortAscending: true, columns: [ DataColumn(label: Text('Cell')), DataColumn(label: Text('Value')), ], rows: _rows, onSelectAll: (isSelected) { setState(() { _selectAll = isSelected; _rows = _rows.map((row) => row.copyWith(selected: isSelected)).toList(); }); }, ), ), bottomNavigationBar: BottomAppBar( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( icon: Icon(_selectAll ? Icons.check_box : Icons.check_box_outline_blank), onPressed: () { setState(() { _selectAll = !_selectAll; _rows = _rows.map((row) => row.copyWith(selected: _selectAll)).toList(); }); }, ), IconButton( icon: Icon(Icons.group), onPressed: () { // TODO: Implement grouping logic }, ), ], ), ), ); } } ``` 在这个示例,我们使用`DataTables` Widget创建了一个表格,并且设置了两列`DataColumn`,分别是`Cell`和`Value`。我们通过`List.generate`方法生成了10数据,并将它们传递给了`DataTable`的`rows`属性。我们还设置了`onSelectAll`回调函数,用于处理全选功能。在底部的`BottomAppBar`,我们添加了两个按钮,一个用于全选/取消全选,另一个用于分组操作。请注意,分组操作需要实现自定义逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值