Flutter高级数据表格插件advanced_datatable的使用

简介

advanced_datatable 是一个基于Flutter的 PaginatedDataTable Widget 构建的数据表格插件，它为原生表格添加了更多实用的功能。以下是该插件的主要特性：

新特性

• 不添加空行
• 支持异步加载行数据，连接到大型数据源并仅加载当前页面的数据
• 自定义加载和错误提示小部件
• 在页脚正确显示数据大小和位置（如：1 of 10 from 100）
• 自定义页脚

版本0.0.7中的重大变更

请注意代码清理带来的更改：

• 将旧的导入语句 import 'package:advanced_datatable/advancedDataTableSource.dart'; 更改为 import 'package:advanced_datatable/advanced_datatable_source.dart';
• 如果您之前使用了 AdvancedDataTableSource.loadNextPage()，请注意其签名已更改为带有命名布尔参数的形式，sortAscending 参数被移动为命名参数。

Web演示

您可以访问 在线演示 查看插件的实际应用效果，并通过网络监视器(F12)查看不同操作时实际加载的数据情况。

使用指南

隐藏空白行

addEmptyRows: false    

自定义页脚

customTableFooter: (source, offset) {
    // 自定义页脚逻辑...
}

异步加载支持

定义模型类用于表示行数据，并实现 getNextPage 函数来处理分页请求。

class RowData {
  final int index;
  final String value;
  RowData(this.index, this.value);
}

class ExampleSource extends AdvancedDataTableSource<RowData> {
  Future<RemoteDataSourceDetails<RowData>> getNextPage(NextPageRequest pageRequest) async {
    // 模拟从外部来源获取数据的过程
    await Future.delayed(Duration(seconds: 5));
    return RemoteDataSourceDetails(
      data.length,
      data.skip(pageRequest.offset).take(pageRequest.pageSize).toList(),
    );
  }
}

自定义加载和错误小部件

设置 loadingWidget 和 errorWidget 属性以提供自定义的小部件。

服务器端过滤

确保在返回给前端的数据中包含两个数字：未过滤总行数与当前过滤条件下的行数。当过滤条件发生变化时调用 setNextView() 方法重新加载数据。

自定义行号标签

覆盖默认的页脚文本以适应特定需求。

getFooterRowText: (startRow, pageSize, totalFilter, totalRowsWithoutFilter) {
  // 自定义行号标签逻辑...
}

示例代码

下面是一个完整的示例项目，展示了如何集成 advanced_datatable 插件：

import 'package:flutter/material.dart';
import 'package:advanced_datatable/advanced_datatable_source.dart';
import 'package:advanced_datatable/datatable.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var rowsPerPage = AdvancedPaginatedDataTable.defaultRowsPerPage;
  final source = ExampleSource();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: SingleChildScrollView(
        child: AdvancedPaginatedDataTable(
          addEmptyRows: false,
          source: source,
          showFirstLastButtons: true,
          rowsPerPage: rowsPerPage,
          availableRowsPerPage: [1, 5, 10, 50],
          onRowsPerPageChanged: (newRowsPerPage) {
            if (newRowsPerPage != null) {
              setState(() {
                rowsPerPage = newRowsPerPage;
              });
            }
          },
          columns: [
            DataColumn(label: Text('Row no')),
            DataColumn(label: Text('Value'))
          ],
        ),
      ),
    );
  }
}

class RowData {
  final int index;
  final String value;

  RowData(this.index, this.value);
}

class ExampleSource extends AdvancedDataTableSource<RowData> {
  final data = List<RowData>.generate(13, (index) => RowData(index, 'Value for no. $index'));

  @override
  DataRow? getRow(int index) {
    final currentRowData = lastDetails!.rows[index];
    return DataRow(cells: [
      DataCell(Text(currentRowData.index.toString())),
      DataCell(Text(currentRowData.value)),
    ]);
  }

  @override
  int get selectedRowCount => 0;

  @override
  Future<RemoteDataSourceDetails<RowData>> getNextPage(NextPageRequest pageRequest) async {
    return RemoteDataSourceDetails(
      data.length,
      data.skip(pageRequest.offset).take(pageRequest.pageSize).toList(),
    );
  }
}

此示例展示了如何创建一个简单的数据表，包括基本配置、自定义分页、排序以及异步加载等功能。根据您的具体需求，可以进一步扩展和完善这些功能。