Flutter数据表格展示插件common_data_table的使用

Flutter数据表格展示插件common_data_table的使用

common_data_table 是一个用于Flutter平台的插件，它提供了一个通用的数据表格组件，类似于传统的数据表格，具备搜索过滤、设置分页限制、导出Excel/PDF以及编辑和删除行等功能。以下是关于如何使用该插件的详细说明和完整示例代码。

功能特性

• 编辑/删除行：可以对表格中的行进行编辑或删除操作。
• 搜索和分页：支持类似Bootstrap或Ajax DataTable的搜索功能和分页下拉选择。
• 导出文件：可以将表格数据导出为PDF或Excel文件。
• 自定义操作：可以添加更多的自定义操作按钮。

安装

首先，在 pubspec.yaml 文件中添加 common_data_table 依赖：

dependencies:
  common_data_table: {latest_version}

然后在Dart代码中导入该包：

import 'package:common_data_table/common_data_table.dart';

示例代码

以下是一个完整的示例代码，展示了如何使用 common_data_table 插件创建一个带有搜索、排序、导出和自定义操作的数据表格。

import 'package:common_data_table/common_data_table.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:url_launcher/url_launcher.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Common Data Table Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Common Data Table Example'),
      ),
      body: CommonDataTable(
        // 是否启用搜索功能
        isSearchAble: true,
        
        // 排序列索引
        sortColumn: [1],
        
        // 表格标题
        title: "测试表格",
        
        // 标题背景颜色
        titleBgColor: Colors.black,
        
        // 标题样式
        titleStyle: TextStyle(
          fontSize: 16,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
        
        // 表头列名
        heading: [
          '编号',
          '标题',
          '副标题',
        ],
        
        // 行操作按钮
        rowActionButtons: [
          RowActionButton(
            tooltip: "查看图片",  // 悬停提示
            icon: Icons.remove_red_eye,  // 图标
            isDisabled: (index) {
              if (index == 3) {
                return true;  // 禁用第4行的操作按钮
              }
              return null;
            },
            onTap: (index) {
              // 点击操作
              print("点击了第 $index 行的查看图片按钮");
            },
            color: Colors.blue,  // 按钮颜色
          )
        ],
        
        // 表格操作按钮
        tableActionButtons: [
          TableActionButton(
            child: Text("添加高亮"),  // 按钮文本
            onTap: () {
              print("添加高亮");
            },
            shortcuts: SingleActivator(
              LogicalKeyboardKey.keyA,  // 快捷键组合 (Ctrl + A)
              control: true,
            ),
            icon: Icon(
              FontAwesomeIcons.addressBook,  // 图标
              size: 20,
            ),
          )
        ],
        
        // 行背景颜色
        rowBGColor: (index) {
          if (index.isOdd) {
            return Colors.red;  // 奇数行背景为红色
          }
          return null;
        },
        
        // 表格数据
        data: [
          for (int i = 1; i <= 100; i++) ...[
            [
              '$i.',  // 编号
              '标题 $i',  // 标题
              '副标题 $i',  // 副标题
            ],
          ]
        ],
        
        // 表头对齐方式
        headingAlign: {
          0: TblAlign.center,  // 编号列居中
          1: TblAlign.center,  // 标题列居中
        },
        
        // 数据对齐方式
        dataAlign: {
          0: TblAlign.center,  // 编号列居中
        },
        
        // 编辑行回调
        onEdit: (index) {
          print("编辑了第 $index 行");
        },
        
        // 删除行回调
        onDelete: (index) {
          print("删除了第 $index 行");
        },
        
        // 禁用的删除按钮行
        disabledDeleteButtons: [1, 3, 5],
        
        // 禁用的编辑按钮行
        disabledEditButtons: [0, 2, 4],
        
        // 自定义行样式
        dataTextStyle: (row) {
          if (row[0] == '4.') {
            return {
              1: TextStyle(
                color: Colors.red,  // 标题列文字颜色为红色
                fontSize: 20,  // 字体大小为20
              )
            };
          }
          return null;
        },
        
        // 导出Excel回调
        onExportExcel: (file) async {
          await launchUrl(Uri.file(file.path));  // 打开导出的Excel文件
        },
        
        // 导出PDF回调
        onExportPDF: (file) async {
          await launchUrl(Uri.file(file.path));  // 打开导出的PDF文件
        },
      ),
    );
  }
}