Flutter 分页功能表格控件
老孟导读:前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析来来。
PaginatedDataTable
PaginatedDataTable是一个带分页功能的DataTable,生成一批数据,项目中此一般通过服务器获取,定义model类:
class User {
User(this.name, this.age, this.sex);
final String name;
final int age;
final String sex;
}
生成数据:
List<User> _data = [];
@override
void initState() {
List.generate(100, (index) {
_data.add(User('老孟$index', index % 50, index % 2 == 0 ? '男' : '女'));
});
super.initState();
}
PaginatedDataTable的基础用法如下:
PaginatedDataTable(
header: Text('header'),
columns: [
DataColumn(label: Text('姓名')),
DataColumn(label: Text('性别')),
DataColumn(label: Text('年龄')),
],
source: MyDataTableSource(_data),
)
header
表示表格顶部控件。
columns
表示每一列的列头控件。
source
表示数据源,需要继承DataTableSource,用法如下:
class MyDataTableSource extends DataTableSource {
MyDataTableSource(this.data);
final List<User> data;
@override
DataRow getRow(int index) {
if (index >= data.length) {
return null;
}
return DataRow.byIndex(
index: index,
cells: [
DataCell(Text('${data[index].name}')),
DataCell(Text('${data[index].sex}')),
DataCell(Text('${data[index].age}')),
],
);
}
@override
int get selectedRowCount {
return 0;
}
@override
bool get isRowCountApproximate {
return false;
}
@override
int get rowCount {
return data.length;
}
}
效果如下:
getRow
是根据index获取每一行的数据,通常使用DataRow.byIndex返回数据,cells表示每一个表格的数据,cells
的数量需要与PaginatedDataTable中columns
数量保持一致。
selectedRowCount
是选中的行数,注意这里不是索引,是总共选中的行数。
isRowCountApproximate
:如果isRowCountApproximate
设置为true,行数将会无尽大,所以正常情况下isRowCountApproximate
设置为false。
rowCount
表示行数,如果isRowCountApproximate
设置为true,此属性无效。
设置actions
,显示在header
的右端,用法如下:
PaginatedDataTable(
header: Text('header'),
actions: <Widget>[
IconButton(icon: Icon(Icons.add),onPressed: (){},),
IconButton(icon: Icon(Icons.delete),onPressed: (){},),
],
...
)
效果如下:
rowsPerPage
表示每页显示的行数,默认10行,设置5行如下:
PaginatedDataTable(
rowsPerPage: 5,
...
)
onRowsPerPageChanged
不为null时,在左下角出现每页显示多少行数的选项,用法如下:
var _rowsPerPage = 5;
PaginatedDataTable(
onRowsPerPageChanged: (v) {
setState(() {
_rowsPerPage = v;
});
},
availableRowsPerPage: [5,10,15,16],
rowsPerPage: _rowsPerPage,
...
)
效果如下:
点击出现availableRowsPerPage
设置的数组,onRowsPerPageChanged
为选择其中一项后回调,用于更新rowsPerPage
属性。
显示的数据过多时,需要将PaginatedDataTable包裹在SingleChildScrollView中,滚动显示数据:
SingleChildScrollView(
child: PaginatedDataTable()
)
onPageChanged
是翻页时回调,返回当前页第一条数据的索引:
PaginatedDataTable(
onPageChanged: (page){
print('onPageChanged:$page');
},
打印数据为:
flutter: onPageChanged:10
flutter: onPageChanged:20
flutter: onPageChanged:30
flutter: onPageChanged:40
排序
生序降序设置:
PaginatedDataTable(
sortColumnIndex: 1,
sortAscending: false,
...
)
效果如下:
生序降序的设置仅仅显示相应图标,数据并不会实际排序,对数据进行排序可以当用户点击表头时对数据按照本列数据进行排序,用法如下,
var _sortAscending = true;
_buildPaginatedDataTable() {
return PaginatedDataTable(
header: Text('header'),
sortColumnIndex: 2,
sortAscending: _sortAscending,
columns: [
DataColumn(label: Text('姓名')),
DataColumn(label: Text('性别')),
DataColumn(
label: Text('年龄'),
onSort: (index, sortAscending) {
setState(() {
_sortAscending = sortAscending;
if (sortAscending) {
_data.sort((a, b) => a.age.compareTo(b.age));
} else {
_data.sort((a, b) => b.age.compareTo(a.age));
}
});
}),
],
source: MyDataTableSource(_data),
);
}
效果如下:
选中
可以在每一行的前面添加复选框,表示当前行是否选中,在User中添加是否选中属性,用法如下:
class User {
User(this.name, this.age, this.sex, {this.selected = false});
final String name;
final int age;
final String sex;
bool selected;
}
添加勾选框:
@override
DataRow getRow(int index) {
if (index >= data.length) {
return null;
}
return DataRow.byIndex(
index: index,
selected: data[index].selected,
onSelectChanged: (selected) {
data[index].selected = selected;
notifyListeners();
},
cells: [
DataCell(
Text('${data[index].name}'),
),
DataCell(Text('${data[index].sex}')),
DataCell(Text('${data[index].age}')),
],
);
}
效果如下:
全选控制:
PaginatedDataTable(
header: Text('header'),
onSelectAll: (all) {
setState(() {
_data.forEach((f){
f.selected = all;
});
});
},
处理数据显示不全问题
当表格列比较多的时候,使用SingleChildScrollView包裹,显示不全时滚动显示,用法如下:
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: PaginatedDataTable()
)
效果如下:
交流
老孟Flutter博客地址(近200个控件用法):http://laomengit.com
欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:
Flutter 分页功能表格控件的更多相关文章
- Ext入门学习系列(五)表格控件(1)
上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...
- 自己实现的数据表格控件(dataTable),支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义
一.前言 也没什么好说的嘛,用了蛮多github上开源的能够实现dataTable功能的表格插件,不过都默认绑定样式啊,数据格式也设定的比较死,所以忍不住自己实现了一个简单的可自定义样式和自定义数据返 ...
- 【新功能前瞻】SpreadJS 纯前端表格控件V12.2:打印增强、拖拽填充等六大特性
新版本来袭:葡萄城 SpreadJS 纯前端表格控件的全新版本 V12.2 将于8月正式发布! 作为一款备受华为.招商银行.中国平安.苏宁易购等行业专家和前端开发者认可的纯 JavaScript 电子 ...
- 深入浅出ExtJS 第三章 表格控件
3.1 表格的特性简介 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能; >.表格由类Ext.grid.GridPanel定义,继承自 ...
- Ext入门学习系列(五)表格控件(3)
上节学习了Ext中如何绑定服务器端传递的数据.分别用asp.net和asp.net MVC.PHP.XML为例.本节主要介绍绑定之后的分页功能. 一.Ext的表格控件如何绑定? 分页是Ext自带的一个 ...
- tbl.js div实现的表格控件,完全免费,no jquery
html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚 ...
- tbl.js div实现的表格控件,完全免费,不依赖jquery
html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于&q ...
- 分享12款 JavaScript 表格控件(DataGrid)
JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...
- 12款 JavaScript 表格控件(DataGrid)
JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以很 ...
随机推荐
- 记录---java中jsp页面引入jquery路径的问题
今天在jsp页面中引入jquery的时候因为路径不对总是报404,网上的方法找到几种试了试但是最后结果还是不生效,遂想起原先的项目中有引入外部jquery的例子,所以立马看了看,发现当时的项目中是用$ ...
- Java面试金典
1,将构造函数声明为私有的作用 构造函数私有化,保证类以外的地方不能直接实例化该类,这种情况下,要创建这个类的实例,只能提供一个公共静态方法,像工厂方法模式,由于构造函数私有化,不能被继承. 2,在t ...
- Eclipse打包jar
对一个包打jar包 右键包名-Export-Jar File-选择所在包的class文件(注意),如果选择java文件会失败-然后Finish 检查jar包是否正确,使用如jd-gui这样的反编译工具 ...
- VUE开发之异常篇
1.WebStorm 编译器报错: Unresolved function or method require() 解决办法: 打开WebStorm 按照以下路径寻找 Preferences -& ...
- C/C++知识总结 二 C/C++基础知识
C/C++基础知识 C/C++基本格式说明 C/C++基本常识说明 C/C++基本格式说明 C语言基本格式 #include<stdio.h> //预处理文件 int main() //自 ...
- C、Guard the empire(贪心)
链接:https://ac.nowcoder.com/acm/contest/3570/C 来源:牛客网 题目描述 Hbb is a general and respected by the enti ...
- CAS / ABA
CAS / ABA 标签(空格分隔): 操作系统 1. CAS 解决 Volatile 不保证原子性的问题 /** * Atomically increments by one the current ...
- PTA数据结构与算法题目集(中文) 7-37 模拟EXCEL排序 (25 分)
PTA数据结构与算法题目集(中文) 7-37 模拟EXCEL排序 (25 分) 7-37 模拟EXCEL排序 (25 分) Excel可以对一组纪录按任意指定列排序.现请编写程序实现类似功能. ...
- IIC驱动学习笔记,简单的TSC2007的IIC驱动编写,测试
IIC驱动学习笔记,简单的TSC2007的IIC驱动编写,测试 目的不是为了编写TSC2007驱动,是为了学习IIC驱动的编写,读一下TSC2007的ADC数据进行练习,, Linux主机驱动和外设驱 ...
- nginx产品环境安全配置-主配置文件
以下配置为产品环境的nginx基于安全和效率的主配置文件,不包含fastcgi相关配置 cat /etc/nginx/nginx.conf user nginx; worker_processes a ...