【笔记】Flutter的PaginatedDataTable分页表格

发表于 更新于 阅读次数：

前言

Flutter的PaginatedDataTable分页表格（前端分页）

分页表格

定义实体类

1
2
3
4
5
6
7
8
9
class User {
    late int id;
    late String name;
    
    User({
        required this.id,
        required this.name,
    });
}

定义数据渲染类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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].id}')),
                DataCell(Text('${data[index].name}')),
            ],
        );
    }

    @override
    int get selectedRowCount {
        return 0;
    }

    @override
    bool get isRowCountApproximate {
        return false;
    }

    @override
    int get rowCount {
        return data.length;
    }
}

定义数据

1
2
3
4
5
6
List<User> userList = <User>[
    User(id: 1, name: "张三"),
    User(id: 2, name: "李四"),
    User(id: 3, name: "王五"),
    User(id: 4, name: "赵六"),
];

渲染分页表格

columns：定义表头
source：定义表体
rowsPerPage：定义PageSize，缺省值为10

1
2
3
4
5
6
7
8
9
PaginatedDataTable(
    header: Text("表头"),
    columns: <DataColumn>[
        DataColumn(label: Text("id")),
        DataColumn(label: Text("name")),
    ],
    source: MyDataTableSource(userList),
    rowsPerPage: 10,
)

左下角自定义PageSize

定义默认的PageSize
1
int? _rowsPerPage = 10
渲染表格

rowsPerPage：定义PageSize
availableRowsPerPage：定义左下角PageSize可选项，集合中必须包含默认的PageSize也就是rowsPerPage
onRowsPerPageChanged：定义左下角切换PageSize的回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
PaginatedDataTable(
    header: Text("表头"),
    columns: <DataColumn>[
        DataColumn(label: Text("id")),
        DataColumn(label: Text("name")),
    ],
    source: MyDataTableSource(userList),
    rowsPerPage: _rowsPerPage!,
    availableRowsPerPage: const [5, 10],
    onRowsPerPageChanged: (v) {
        setState(() {
            _rowsPerPage = v;
        });
    },
)

行可选的分页表格

  • 全选按钮只全选当前页数据而不是所有数据

实体类中添加属性

1
2
3
4
5
6
7
8
9
10
11
class User {
    late int id;
    late String name;
    late bool selected; // 选中状态

    User({
        required this.id,
        required this.name,
        required this.selected,
    });
}

定义数据渲染类

selected：当前行默认的选中状态

false：缺省值，没被选中
true：被选中

onSelectChanged：在第一列之前新增一列复选框，同时在行被点击时执行回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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].id}')),
                DataCell(Text('${data[index].name}')),
            ],
            selected: data[index].selected,
            onSelectChanged: (selected) {
                data[index].selected = selected!;
                notifyListeners();
            },
        );
    }

    @override
    int get selectedRowCount {
        return 0;
    }
    
    @override
    bool get isRowCountApproximate {
        return false;
    }
    
    @override
    int get rowCount {
        return data.length;
    }
}

定义数据

1
2
3
4
List<User> userList = <User>[
    User(id: 1, name: "张三", selected: false),
    User(id: 2, name: "李四", selected: false),
];

渲染表格

1
2
3
4
5
6
7
8
DataTable(
    header: Text("表头"),
    columns: <DataColumn>[
        DataColumn(label: Text("id")),
        DataColumn(label: Text("name")),
    ],
    source: MyDataTableSource(userList),
)

可排序的分页表格

  • 对所有数据排序而不仅仅是单页数据

定义实体类

1
2
3
4
5
6
7
8
9
class User {
    late int id;
    late String name;

    User({
        required this.id,
        required this.name,
    });
}

定义数据渲染类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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].id}')),
                DataCell(Text('${data[index].name}')),
            ],
        );
    }

    @override
    int get selectedRowCount {
        return 0;
    }

    @override
    bool get isRowCountApproximate {
        return false;
    }

    @override
    int get rowCount {
        return data.length;
    }
}

定义数据

1
2
3
4
5
6
List<User> userList = <User>[
    User(id: 1, name: "张三"),
    User(id: 2, name: "李四"),
    User(id: 3, name: "王五"),
    User(id: 4, name: "赵六"),
];

定义默认的排序方式

1
bool _sortAscending = true;

渲染分页表格

sortColumnIndex：定义被排序的列，该列会多出一个箭头图标，向上表示正序，向下表示倒序
sortAscending：定义排序方式

true：缺省值，正序（从小到大）
false：倒序（从大到小）

onSort：点击表头后执行排序回调函数，函数内实现排序算法进行排序

columnIndex：当前列索引
ascending：排序方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
PaginatedDataTable(
    header: Text("表头"),
    sortColumnIndex: 0,
    sortAscending: _sortAscending,
    columns: <DataColumn>[
        DataColumn(
            label: Text("id"),
            onSort: (int columnIndex, bool ascending) {
                setState(() {
                    _sortAscending = ascending;
                    if (ascending) {
                        // 正序
                        userList.sort((a, b) => a.id.compareTo(b.id));
                    } else {
                        // 倒序
                        userList.sort((a, b) => b.id.compareTo(a.id));
                    }
                });
            }
        ),
        DataColumn(label: Text("name")),
    ],
    source: MyDataTableSource(userList),
    rowsPerPage: 10,
)

解决数据显示不全的问题

  • 通过SingleChildScrollView包裹分页表格
1
2
3
4
SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: PaginatedDataTable()
)

完成

参考文献