当前位置:网站首页>Problems encountered in using the Pluto table of the flutter plug-in

Problems encountered in using the Pluto table of the flutter plug-in

2022-06-13 12:00:00 Sindyue

  1. List data filtering and refresh Problem #438
    https://github.com/bosskmk/pluto_grid/issues/438

After filtering the list data, refresh and load the data again. How to make the previous filtering conditions effective?

import 'package:flutter/material.dart';
import 'package:pluto_grid/pluto_grid.dart';

class EmptyScreen extends StatefulWidget {
  static const routeName = 'empty';

  const EmptyScreen({Key? key}) : super(key: key);

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

class _EmptyScreenState extends State<EmptyScreen> {
  late List<PlutoColumn> columns;

  late List<PlutoRow> rows;

  late PlutoGridStateManager stateManager;

  final List<PlutoRow> filterRows = [];

  @override
  void initState() {
    super.initState();

    columns = [
      PlutoColumn(
        title: 'column1',
        field: 'column1',
        type: PlutoColumnType.text(),
      ),
      PlutoColumn(
        title: 'column2',
        field: 'column2',
        type: PlutoColumnType.text(),
      ),
      PlutoColumn(
        title: 'column3',
        field: 'column3',
        type: PlutoColumnType.text(),
      ),
    ];
    _initData();
  }

  _initData() {
    rows = [];
    rows.addAll([
      PlutoRow(
        cells: {
          'column1': PlutoCell(value: 'a1'),
          'column2': PlutoCell(value: 'b1'),
          'column3': PlutoCell(value: 'c1'),
        },
      ),
      PlutoRow(
        cells: {
          'column1': PlutoCell(value: 'a2'),
          'column2': PlutoCell(value: 'b2'),
          'column3': PlutoCell(value: 'c2'),
        },
      ),
      PlutoRow(
        cells: {
          'column1': PlutoCell(value: 'a3'),
          'column2': PlutoCell(value: 'b3'),
          'column3': PlutoCell(value: 'c3'),
        },
      ),
    ]);
  }

  void handleSaveFilter() {
    filterRows.clear();

    final List<PlutoRow> filters = stateManager.filterRows
        .map(
          (e) => PlutoRow(cells: {
            FilterHelper.filterFieldColumn: PlutoCell(
              value: e.cells[FilterHelper.filterFieldColumn]!.value,
            ),
            FilterHelper.filterFieldType: PlutoCell(
              value: e.cells[FilterHelper.filterFieldType]!.value,
            ),
            FilterHelper.filterFieldValue: PlutoCell(
              value: e.cells[FilterHelper.filterFieldValue]!.value,
            ),
          }),
        )
        .toList();

    filterRows.addAll(filters);
  }

  void handleLoadFilter() {
    stateManager.gridFocusNode?.unfocus();
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      stateManager.setFilterWithFilterRows(filterRows);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(15),
        child: PlutoGrid(
          columns: columns,
          rows: rows,
          onChanged: (PlutoGridOnChangedEvent event) {
            print(event);
          },
          onLoaded: (PlutoGridOnLoadedEvent event) {
            stateManager = event.stateManager;
            stateManager.setShowColumnFilter(true);
          },
          configuration: const PlutoGridConfiguration(),
          createHeader: (_) {
            return Row(
              children: [
                TextButton(
                  onPressed: handleSaveFilter,
                  child: const Text('save filter'),
                ),
                TextButton(
                  onPressed: handleLoadFilter,
                  child: const Text('load filter'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

The core is the above method of saving and loading filter conditions . Function can be realized , All data will be loaded first in the middle , Then display the filtered data list .
2. update the single rowData #439

solution:
	Would you like to use the below method of stateManager ?
	void insertRows(int rowIdx, List<PlutoRow> rows);
	void removeRows(List<PlutoRow> rows);

another solution:

    PlutoRow newRow = PlutoRow(
      cells: {
    
        'column_1': PlutoCell(value: value.toString()),
        'column_2': PlutoCell(value: value.toString()),
        'column_3': PlutoCell(value: value.toString()),
        'column_4': PlutoCell(value: value.toString()),
        'column_5': PlutoCell(value: value.toString()),
      },
    );

    stateManager.prependRows([newRow]);
    stateManager.moveScrollByRow(PlutoMoveDirection.up, 1);
    stateManager.setCurrentCell(newRow.cells.entries.first.value, 0);
	
	
	stateManager.changeCellValue(
      stateManager.currentRow!.cells['column_1']!,
      value,
      force: true,
    );
	
	var newValue = {
    };
	newValue['tag'] = cell.value['tag'];
	newValue['ctime'] = cell.value['ctime'];
	newValue['confirmstate'] = cell.value['confirmstate'];
	List<String> list = [];
	list.add(_inputDispose);
	newValue['dispose'] = list;
	stateManager!.changeCellValue(cell, newValue, force: true);

https://weblaze.dev/pluto_grid/build/web/#feature/listing-mode – For this example, please refer to

原网站

版权声明
本文为[Sindyue]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/164/202206131145236208.html