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

bs_flutter_datatable_2 是一个简单的方式来展示通过服务器端处理的数据。它支持自定义样式、搜索功能、分页、每页长度、排序和服务器端处理等功能。

功能

• 自定义样式
• 可搜索数据
• 分页
• 每页长度
• 排序
• 服务器端处理

开始使用

在 pubspec.yaml 文件中添加依赖：

dependencies:
  ...
  bs_flutter_datatable_2: any

数据表格

示例代码位于 main.dart

要创建一个数据表格，你需要导入以下包：

import 'package:bs_flutter_datatable_2/bs_flutter_datatable.dart';

创建数据源

class ExampleSource extends BsDatatableSource {
  static List<BsDataColumn> get columns => [
    BsDataColumn(label: Text('No'), orderable: false, searchable: false, width: 100.0),
    BsDataColumn(label: Text('Code'), columnName: 'typecd', width: 200.0),
    BsDataColumn(label: Text('Name'), columnName: 'typenm'),
  ];

  @override
  BsDataRow getRow(int index) {
    return BsDataRow(index: index, cells: [
      BsDataCell(Text('${controller.start + index + 1}')),
      BsDataCell(Text('${response.data[index]['typecd']}')),
      BsDataCell(Text('${response.data[index]['typenm']}')),
    ]);
  }
}

添加行事件监听器

class ExampleSource extends BsDatatableSource {
  ValueChanged<dynamic> onEditListener = (value) {};
  ValueChanged<dynamic> onDeleteListener = (value) {};

  @override
  BsDataRow getRow(int index) {
    return BsDataRow(index: index, cells: [
      BsDataCell(Row(
        children: [
          TextButton(
            onPressed: () => onEditListener(response.data[index]['typeid']), 
            child: Container(child: Text('Edit'))
          ),
          TextButton(
            onPressed: () => onDeleteListener(response.data[index]['typeid']),
            child: Container(child: Text('Delete'))
          )
        ],
      ))
    ]);
  }
}

处理事件

在请求数据成功后更新事件处理器：

Future loadApi(Map<String, dynamic> params) {
  return http.post(
    Uri.parse('http://localhost/flutter_crud/api/public/types/datatables'),
    body: params,
  ).then((value) {
    Map<String, dynamic> json = jsonDecode(value.body);
    setState(() {
      _source.response = BsDatatableResponse.createFromJson(json['data']);
      _source.onEditListener = (typeid) {
        /// 执行编辑操作
      };
      _source.onDeleteListener = (typeid) {
        /// 执行删除操作
      };
    });
  });
}

声明数据源和控制器

class _MyAppState extends State<MyApp> {
  ExampleSource _source = ExampleSource();

  @override
  void initState() {
    _source.controller = BsDatatableController();
    super.initState();
  }

  // 其他代码...
}

创建表格视图

BsDatatable(
  source: _source,
  title: Text('Datatables Data'),
  columns: ExampleSource.columns,
  serverSide: loadApi,
)

服务器端函数

Future loadApi(Map<String, dynamic> params) {
  return http.post(
    Uri.parse('http://localhost/flutter_crud/api/public/types/datatables'),
    body: params,
  ).then((value) {
    Map<String, dynamic> json = jsonDecode(value.body);
    setState(() {
      _source.response = BsDatatableResponse.createFromJson(json['data']);
      _source.onEditListener = (typeid) {
        /// 执行编辑操作
      };
      _source.onDeleteListener = (typeid) {
        /// 执行删除操作
      };
    });
  });
}

注意事项

在从服务器请求数据成功后，需要更新数据源的响应数据：

Future loadApi(Map<String, dynamic> params) {
  return http.post(
    // ...
  ).then((value) {
    // ...
    setState(() {
      _source.response = BsDatatableResponse.createFromJson(json['data']);
      // ...
    });
  });
}

重新加载数据

你可以使用 reload 函数来重新加载数据：

_source.controller.reload();

显示本地数据

如果想显示本地数据，可以在构造函数中传递 data 列表：

class ExampleSource extends BsDatatableSource {
  ExampleSource({List? data}) : super(data: data);
  // 其他代码...
}

然后在你的组件中设置数据源：

class Datatables extends StatefulWidget {
  @override
  _DatatablesState createState() => _DatatablesState();
}

class _DatatablesState extends State<Datatables> {
  ExampleSource _source1 = ExampleSource(
    data: [
      {'typecd': 'TP1', 'typenm': 'Type 1'},
      {'typecd': 'TP2', 'typenm': 'Type 2'},
      {'typecd': 'TP3', 'typenm': 'Type 3'},
      {'typecd': 'TP4', 'typenm': 'Type 4'},
      {'typecd': 'TP5', 'typenm': 'Type 5'},
    ]
  );

  // 其他代码...
}

动态添加数据

你可以使用 add 或 addAll 方法动态添加数据，使用 put 方法更新数据，使用 remove 或 removeAt 方法移除数据：

TextButton(
  onPressed: () {
    _source1.add({'typecd': 'TP1', 'typenm': 'Type ${_source1.datas.length}'});
  },
  child: Text('Add Row'),
)