老孟导读:前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 分页功能表格控件的更多相关文章

  1. Ext入门学习系列(五)表格控件(1)

    上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...

  2. 自己实现的数据表格控件(dataTable),支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义

    一.前言 也没什么好说的嘛,用了蛮多github上开源的能够实现dataTable功能的表格插件,不过都默认绑定样式啊,数据格式也设定的比较死,所以忍不住自己实现了一个简单的可自定义样式和自定义数据返 ...

  3. 【新功能前瞻】SpreadJS 纯前端表格控件V12.2:打印增强、拖拽填充等六大特性

    新版本来袭:葡萄城 SpreadJS 纯前端表格控件的全新版本 V12.2 将于8月正式发布! 作为一款备受华为.招商银行.中国平安.苏宁易购等行业专家和前端开发者认可的纯 JavaScript 电子 ...

  4. 深入浅出ExtJS 第三章 表格控件

    3.1 表格的特性简介 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能; >.表格由类Ext.grid.GridPanel定义,继承自 ...

  5. Ext入门学习系列(五)表格控件(3)

    上节学习了Ext中如何绑定服务器端传递的数据.分别用asp.net和asp.net MVC.PHP.XML为例.本节主要介绍绑定之后的分页功能. 一.Ext的表格控件如何绑定? 分页是Ext自带的一个 ...

  6. tbl.js div实现的表格控件,完全免费,no jquery

    html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚 ...

  7. tbl.js div实现的表格控件,完全免费,不依赖jquery

    html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于&q ...

  8. 分享12款 JavaScript 表格控件(DataGrid)

    JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...

  9. 12款 JavaScript 表格控件(DataGrid)

    JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以很 ...

随机推荐

  1. Java复合优先于继承

    复合优于继承 继承打破了封装性(子类依赖父类中特定功能的实现细节) 合理的使用继承的情况: 在包内使用 父类专门为继承为设计,并且有很好的文档说明,存在is-a关系 只有当子类真正是父类的子类型时,才 ...

  2. 面试中常问的五种IO模型和BIO,NIO,AIO

    一,五种IO模型: 一个IO操作可以分为两个步骤:发起IO请求和实际的IO操作例如:1.操作系统的一次写操作分为两步:第一步,将数据从用户空间拷贝到系统空间:第二步,从系统空间往网卡写.2.一次读操作 ...

  3. while实现2-3+4-5+6...+100 的和

    while实现2-3+4-5+6...+100 的和 可以看到规律为2-100内所有奇数都为减法,偶数为加法 设定变量 total=0: count=2 当count为偶数时与total相加,反则相减 ...

  4. 剑指offer—单链表反转的三种实现方法

    单链表的反转可以用递归.非递归和栈的方法实现 链表节点定义: struct ListNode{ int val; Node* next; ListNode(int x):val(x),next(nul ...

  5. 搭建DHProxy服务器

                                                                               集群与存储    HAProxy简介        ...

  6. Java第三十天,I/O操作

    一.基本概念 输入输出一般是相对与内存.CPU寄存器.当前进程来说的 输入:从硬盘.键盘等外部设备读取数据到内存.当前进程或CPU寄存器中 输出:利用当前进程将数据写入到硬盘.终端显示屏等外部设备中 ...

  7. 计算机网络篇,基于UDP、TCP的应用层及其端口

  8. 28 api的使用2

    本文将讲解如下api的使用: Object.System.Date.DateFormat.Calendar.Integer-- int的包装类等 1. 类 Object 是类层次结构的根类.每个类都使 ...

  9. "二号标题"组件:<h2> —— 快应用组件库H-UI

     <import name="h2" src="../Common/ui/h-ui/text/c_h2"></import> < ...

  10. python3(八) function

    # Python 常用内置函数 https://docs.python.org/3/library/functions.html#abs print(help(abs)) # Return the a ...