实时更新bwu_grid dataItems并删除选定的行

Question

我在我的项目中使用bwu_datagrid，发现很难解决两个问题。

1. 如何使用显示带有图标和单词的删除的上下文菜单删除通过网格中的复选框选择的行。

2. 实时更新网格dataItems。从之前的讨论中我已经看到需要调用editor.commitChanges（）的地方，但我没有成功这样做。事实上，我的包含commitChanges（）方法的代码会抛出一个无法找到该方法的错误。我怀疑我可能会错误地使用它。

如果可能的话，我会很感激.dart文件的整个更正代码。

.dart

import 'dart:html';
import 'package:polymer/polymer.dart';

//import 'package:epimss_clerking/epimss_clerking.dart';
//import 'package:epimss_shared/epimss_shared.dart';
//import 'package:epimss_shared/epimss_shared_import_ui.dart';

import 'package:bwu_datagrid/bwu_datagrid.dart';
//import 'package:bwu_datagrid/components/bwu_column_picker/bwu_column_picker.dart';
import 'package:bwu_datagrid/datagrid/helpers.dart';
//import 'package:bwu_datagrid/plugins/cell_selection_model.dart';
import 'package:bwu_datagrid/plugins/checkbox_select_column.dart';
import 'package:bwu_datagrid/editors/editors.dart';
import 'package:bwu_datagrid/formatters/formatters.dart';
import 'package:bwu_datagrid/plugins/row_selection_model.dart';
import 'package:bwu_datagrid/core/core.dart';
//import 'package:bwu_datagrid/editors/editors.dart';

@CustomTag('medication-mediators-form')
class MedicationMediatorsForm extends PolymerElement {
  @observable String type = '';
  String topic = '';

  BwuDatagrid grid;
  List<Column> columns = <Column>[];

  var gridOptions = new GridOptions(
      editable: true,
      enableAddRow: true,
      enableCellNavigation: true,
      asyncEditorLoading: false,
      autoEdit: true,
      autoHeight: true);

  List<MapDataItem> _dataItems = <MapDataItem>[];
  MapDataItemProvider dataItemsProvider;
  CheckboxSelectColumn checkboxColumn =
      new CheckboxSelectColumn(cssClass: 'bwu-datagrid-cell-checkboxsel');

  @published
  String get color => readValue(#color);
  set color(String value) => writeValue(#color, value);

  MedicationMediatorsForm.created() : super.created() {
    dataItemsProvider = new MapDataItemProvider(_dataItems);

    columns.add(checkboxColumn);
    columns
      ..add(new Column(
          name: 'Medication',
          id: 'medication',
          field: 'medication',
          editor: new TextEditor(),
          //validator: new Bwu_RequiredNounValidator(),
          sortable: true, minWidth: 100))
      ..add(new Column(
          name: 'Precipitant',
          id: 'precipitant',
          field: 'precipitant',
          editor: new CheckboxEditor(),
          formatter: new CheckmarkFormatter(),
          minWidth: 50))
      ..add(new Column(
          name: 'Reliever',
          id: 'reliever',
          field: 'reliever',
          editor: new CheckboxEditor(),
          formatter: new CheckmarkFormatter(),
          minWidth: 50))
      ..add(new Column(
          name: 'Exacerbator',
          id: 'exacerbator',
          field: 'exacerbator',
          editor: new CheckboxEditor(),
          formatter: new CheckmarkFormatter(),
          minWidth: 60));
  }

  void onMouseOutFired() {
    //grid.getEditController.commitCurrentEdit; //commitChanges();
    grid.deliverChanges();
    print('changes delivered');
  }

  @override
  void attached() {
    super.attached();
    topic = this.dataset['topic'];

    try {
      grid = $['grid'];

      grid
          .setup(
              dataProvider: dataItemsProvider,
              columns: columns,
              gridOptions: gridOptions)
          .then((_) {
        //grid.setSelectionModel = new CellSelectionModel();
        grid.setSelectionModel = (new RowSelectionModel(
            new RowSelectionModelOptions(selectActiveRow: false)));
        grid.registerPlugin(checkboxColumn);
        grid.onBwuAddNewRow.listen(addNewRowHandler);
        grid.onBwuCellChange.listen(onCellChangeHandler);
        grid.onBwuMouseLeave.listen(onBwuMouseLeaveHandler);
      });
    } on NoSuchMethodError catch (e) {
      print('$e\n\n${e.stackTrace}');
    } on RangeError catch (e) {
      print('$e\n\n${e.stackTrace}');
    } on TypeError catch (e) {
      print('$e\n\n${e.stackTrace}');
    } catch (e) {
      print('$e');
    }
  }

  void enableAutoEdit(MouseEvent e, dynamic details, HtmlElement target) {
    grid.setGridOptions = new GridOptions.unitialized()..autoEdit = true;
  }

  void disableAutoEdit(MouseEvent e, dynamic details, HtmlElement target) {
    grid.setGridOptions = new GridOptions.unitialized()..autoEdit = false;
  }

  void onBwuMouseLeaveHandler(MouseLeave e) {
    ///ERROR GENERATED THAT commitChanges CANNOT BE FOUND
    grid.getCellEditor().commitChanges();

    //_dataItems does not update in realtime -
    print(_dataItems);

    print('property changes delivered');
  }

  void onCellChangeHandler(CellChange e) {
    //print(_dataItems);

    _dataItems.forEach((MapDataItem item) {
      item.forEach((String key, dynamic value) {
        if (value == '') {
          print(key);
        }
      });
    });

    //eventBus.signal(new DaataEvent(_dataItems)..topic = this.topic);
  }

  void addNewRowHandler(AddNewRow e) {
    var item = e.item;
    grid.invalidateRow(dataItemsProvider.items.length);
    dataItemsProvider.items.add(item);
    grid.updateRowCount();
    grid.render();
  }
}

html的

<!DOCTYPE html>

<link href='../../../../packages/bwu_datagrid/bwu_datagrid.html' rel='import'>

<polymer-element name='medication-mediators-form'>

  <template>

    <style>#grid {width: 380px; height: 400px;}</style>

    <div layout vertical center color='{{color}}'>
      <bwu-datagrid id='grid' class='margin-5-lr'></bwu-datagrid>        
   </div>
  </template>
  <script type='application/dart' src='medication_mediators_form.dart'></script>
</polymer-element>

Answer 1

我不确定如何使用复选框和上下文菜单来执行此操作。

这是一个例子 - how a context menu can be implemented
- how to select rows using a checkbox

删除行可以像

一样完成

var selectedRows = grid.getSelectedRows();

List<core.ItemBase> rowsToDelete = <core.ItemBase>[];
selectedRows.forEach((r) {
  rowsToDelete.add(data.items[r]);
});
rowsToDelete.forEach((r) => data.items.remove(r));

grid.invalidate();
grid.render();