PlutoGrid for flutter

PlutoGrid 是一个可以通过桌面和Web端的键盘控制的数据网格。
当然，它在Android和IOS上也能很好地工作。

演示Web端

在演示站点上尝试一些简单的功能。


Pub.Dev

从官方分发站点查看安装方法。


文档

文档中有更多详细信息。


问题反馈

报告任何问题或错误。


功能

  • 列
    • 拖动列标题即可左右移动列。
    • 拖动列标题右侧的图标可调整列的宽度。
    • 单击列标题右侧的图标可将列固定在左侧或右侧，或自动调整列宽度。
    • 单击列标题即可对列表进行升序或降序排序。
    • 文本、数字、日期、时间、下拉列表类型的列。
    • (待办) 过滤。
    • (待办) 多列排序。
    • (待办) 隐藏特定列。
  • 选择
    • 行模式 - 选择行。
    • 方块模式 - 选择类似Excel的方块区域。
    • 无模式 - 不可选择。
    • (行模式) - 按住Ctrl(Mac OS上为Meta) + 单击以选择行。
    • (行、方块模式) - 按住Shift + 方向键，或Shift + 单击，或长按并移动以进行选择。
    • 选择所有行或单元格。按住Ctrl(Mac OS上为Meta) + A。
  • 复制和粘贴
    • 按住Ctrl(Mac OS上为Meta) + C 或 V
    • 如果没有选中单元格，则基于当前单元格进行操作。
    • 如果在行模式下选中了行，则基于选中状态进行操作。
    • 在行模式下，即使行选择不规则，也能正常工作。
  • 移动
    • 使用方向键移动。
    • 按Enter键编辑单元格或向下移动。
    • 按Tab键移动到左右单元格。
    • 按Shift + (Enter, Tab) 则会反向操作。
  • 双屏模式
    • 在两侧使用不同的网格进行工作。
    • 在网格的末端，您可以使用左右方向键或Tab键在网格之间移动。
  • 移动端UI
    • (待办) - 方便在移动设备上使用的UI。
  • 国际化
    • (待办) - 支持多种语言。

屏幕截图

带有左右固定列

pluto_gridvv

下拉列表类型列的弹出窗口

pluto_griddd

日期类型列的弹出窗口

pluto_gridd

双屏网格

pluto_gridz

选择行

pluto_gridV

选择单元格

pluto_grid

示例

生成要在网格中使用的数据。


List<PlutoColumn> columns = [
  /// Text Column definition
  PlutoColumn(
    title: 'text column',
    field: 'text_field',
    type: PlutoColumnType.text(),
  ),
  /// Number Column definition
  PlutoColumn(
    title: 'number column',
    field: 'number_field',
    type: PlutoColumnType.number(),
  ),
  /// Select Column definition
  PlutoColumn(
    title: 'select column',
    field: 'select_field',
    type: PlutoColumnType.select(['item1', 'item2', 'item3']),
  ),
  /// Datetime Column definition
  PlutoColumn(
    title: 'date column',
    field: 'date_field',
    type: PlutoColumnType.date(),
  ),
  /// Time Column definition
  PlutoColumn(
    title: 'time column',
    field: 'time_field',
    type: PlutoColumnType.time(),
  ),
];

List<PlutoRow> rows = [
  PlutoRow(
    cells: {
      'text_field': PlutoCell(value: 'Text cell value1'),
      'number_field': PlutoCell(value: 2020),
      'select_field': PlutoCell(value: 'item1'),
      'date_field': PlutoCell(value: '2020-08-06'),
      'time_field': PlutoCell(value: '12:30'),
    },
  ),
  PlutoRow(
    cells: {
      'text_field': PlutoCell(value: 'Text cell value2'),
      'number_field': PlutoCell(value: 2021),
      'select_field': PlutoCell(value: 'item2'),
      'date_field': PlutoCell(value: '2020-08-07'),
      'time_field': PlutoCell(value: '18:45'),
    },
  ),
  PlutoRow(
    cells: {
      'text_field': PlutoCell(value: 'Text cell value3'),
      'number_field': PlutoCell(value: 2022),
      'select_field': PlutoCell(value: 'item3'),
      'date_field': PlutoCell(value: '2020-08-08'),
      'time_field': PlutoCell(value: '23:59'),
    },
  ),
];

使用上面创建的数据创建网格。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PlutoGrid Demo'),
      ),
      body: Container(
        padding: const EdgeInsets.all(30),
        child: PlutoGrid(
          columns: columns,
          rows: rows,
          onChanged: (PlutoOnChangedEvent event) {
            print(event);
          },
          onLoaded: (PlutoOnLoadedEvent event) {
            print(event);
          }
        ),
      ),
    );
  }

Pluto系列

开发易于使用 Flutter 开发管理页面或 CMS 的包。

GitHub

https://github.com/bosskmk/pluto_grid