Flutter网页数据表格展示插件flutter_web_data_table的使用

flutter_web_data_table 是一个专门为Flutter Web设计的数据表格插件，支持排序、文本过滤和选择功能。以下是该插件的基本用法及示例代码。

功能特性

• 排序：支持列排序。
• 文本过滤：支持基于输入文本进行过滤。
• 选择：支持行选择。

使用方法

排序

1. 设置 WebDataTableSource().sortColumnName 和 WebDataTableSource().sortAscending。
2. 实现 WebDataTable().onSort 方法。
3. 将需要排序的列的 WebDataColumn().sortable 属性设置为 true。

文本过滤

1. 设置 WebDataTableSource().filterTexts。

选择

1. 设置 WebDataTableSource().primaryKeyName。
2. 实现 WebDataTableSource().onSelectRows 方法。

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_web_data_table 插件：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_web_data_table/web_data_table.dart';

// 假设有一个 SampleData 类提供示例数据
class SampleData {
  List<Map<String, dynamic>> data = [
    {'id': 1, 'renderingEngine': 'Trident', 'browser': 'Internet Explorer 4.0', 'platform': 'Win 95+', 'engineVersion': '4', 'cssGrade': 'A', 'dateTime': DateTime.now()},
    // 更多数据...
  ];
}

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late String _sortColumnName;
  late bool _sortAscending;
  List<String>? _filterTexts;
  bool _willSearch = true;
  Timer? _timer;
  int? _latestTick;
  List<String> _selectedRowKeys = [];
  int _rowsPerPage = 10;

  @override
  void initState() {
    super.initState();
    _sortColumnName = 'browser';
    _sortAscending = false;
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (!_willSearch) {
        if (_latestTick != null && timer.tick > _latestTick!) {
          _willSearch = true;
        }
      }
      if (_willSearch) {
        _willSearch = false;
        _latestTick = null;
        setState(() {
          if (_filterTexts != null && _filterTexts!.isNotEmpty) {
            _filterTexts = _filterTexts;
            print('filterTexts = $_filterTexts');
          }
        });
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    _timer?.cancel();
    _timer = null;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('WebDataTable Sample'),
        ),
        body: SingleChildScrollView(
          child: Container(
            padding: const EdgeInsets.all(8.0),
            child: WebDataTable(
              header: Text('Sample Data'),
              actions: [
                if (_selectedRowKeys.isNotEmpty)
                  SizedBox(
                    height: 50,
                    width: 100,
                    child: RaisedButton(
                      color: Colors.red,
                      child: Text(
                        'Delete',
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ),
                      onPressed: () {
                        print('Delete!');
                        setState(() {
                          _selectedRowKeys.clear();
                        });
                      },
                    ),
                  ),
                Container(
                  width: 300,
                  child: TextField(
                    decoration: InputDecoration(
                      prefixIcon: Icon(Icons.search),
                      hintText: 'increment search...',
                      focusedBorder: const OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Color(0xFFCCCCCC),
                        ),
                      ),
                      border: const OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Color(0xFFCCCCCC),
                        ),
                      ),
                    ),
                    onChanged: (text) {
                      _filterTexts = text.trim().split(' ');
                      _willSearch = false;
                      _latestTick = _timer?.tick;
                    },
                  ),
                ),
              ],
              source: WebDataTableSource(
                sortColumnName: _sortColumnName,
                sortAscending: _sortAscending,
                filterTexts: _filterTexts,
                columns: [
                  WebDataColumn(
                    name: 'id',
                    label: const Text('ID'),
                    dataCell: (value) => DataCell(Text('$value')),
                  ),
                  WebDataColumn(
                    name: 'renderingEngine',
                    label: const Text('Rendering engine'),
                    dataCell: (value) => DataCell(Text('$value')),
                  ),
                  WebDataColumn(
                    name: 'browser',
                    label: const Text('Browser'),
                    dataCell: (value) => DataCell(Text('$value')),
                  ),
                  WebDataColumn(
                    name: 'platform',
                    label: const Text('Platform(s)'),
                    dataCell: (value) => DataCell(Text('$value')),
                  ),
                  WebDataColumn(
                    name: 'engineVersion',
                    label: const Text('Engine version'),
                    dataCell: (value) => DataCell(Text('$value')),
                  ),
                  WebDataColumn(
                    name: 'cssGrade',
                    label: const Text('CSS grade'),
                    dataCell: (value) => DataCell(Text('$value')),
                    sortable: false,
                  ),
                  WebDataColumn(
                    name: 'dateTime',
                    label: const Text('DateTime'),
                    dataCell: (value) {
                      if (value is DateTime) {
                        final text =
                            '${value.year}/${value.month}/${value.day} ${value.hour}:${value.minute}:${value.second}';
                        return DataCell(Text(text));
                      }
                      return DataCell(Text(value.toString()));
                    },
                    filterText: (value) {
                      if (value is DateTime) {
                        return '${value.year}/${value.month}/${value.day} ${value.hour}:${value.minute}:${value.second}';
                      }
                      return value.toString();
                    }),
                ],
                rows: SampleData().data,
                selectedRowKeys: _selectedRowKeys,
                onTapRow: (rows, index) {
                  print('onTapRow(): index = $index, row = ${rows[index]}');
                },
                onSelectRows: (keys) {
                  print('onSelectRows(): count = ${keys.length} keys = $keys');
                  setState(() {
                    _selectedRowKeys = keys;
                  });
                },
                primaryKeyName: 'id',
              ),
              horizontalMargin: 100,
              onPageChanged: (offset) {
                print('onPageChanged(): offset = $offset');
              },
              onSort: (columnName, ascending) {
                print('onSort(): columnName = $columnName, ascending = $ascending');
                setState(() {
                  _sortColumnName = columnName;
                  _sortAscending = ascending;
                });
              },
              onRowsPerPageChanged: (rowsPerPage) {
                print('onRowsPerPageChanged(): rowsPerPage = $rowsPerPage');
                setState(() {
                  if (rowsPerPage != null) {
                    _rowsPerPage = rowsPerPage;
                  }
                });
              },
              rowsPerPage: _rowsPerPage,
            ),
          ),
        ),
      ),
    );
  }
}

关键点说明

• 排序：通过 _sortColumnName 和 _sortAscending 来控制排序。
• 文本过滤：通过 _filterTexts 来存储过滤条件，并在 TextField 中实现增量搜索。
• 选择：通过 _selectedRowKeys 来存储选中的行键值，并在点击删除按钮时清除选中状态。

希望这个示例能够帮助你更好地理解和使用 flutter_web_data_table 插件。