表格编辑

使用表格编辑数据。

参考

• 表格 Widget
• com.sencha.gxt.widget.core.client.grid.editing.GridEditing Javadoc

演示

• 内联编辑
• 行编辑

编辑选项

提供两种 Grid 编辑选项：内联或行编辑。

内联编辑

• 内联编辑演示

行编辑

• 行编辑演示

内联编辑配置

在行中单独编辑表格输入。

• 内联编辑初始化

    GridEditing<Plant> editing = new GridInlineEditing<Plant>(Grid<M> editableGrid);
  

• 设置内联编辑的示例

    private void createInlineEditingGrid() {
      // Define the column(s).
      ColumnConfig<Plant, String> colName = new ColumnConfig<Plant, String>(properties.name(), 220, "Name");
      ColumnConfig<Plant, Boolean> colIndoor = new ColumnConfig<Plant, Boolean>(properties.indoor(), 55, "Indoor");
  
      // Initialize the columns.
      List<ColumnConfig<Plant, ?>> columns = new ArrayList<ColumnConfig<Plant, ?>>();
      columns.add(colName);
      columns.add(colIndoor);
      ColumnModel<Plant> columnModel = new ColumnModel<Plant>(columns);
  
      // Initialize the Store.
      ListStore<Plant> store = new ListStore<Plant>(properties.key());
      store.addAll(TestData.getPlants());
  
      // Initialize the Grid.
      Grid<Plant> grid = new Grid<Plant>(store, columnModel);
      grid.getView().setAutoExpandColumn(colName);
  
      // Setup the editors. Designate the input type per column.
      GridEditing<Plant> editing = new GridInlineEditing<Plant>(grid);
      editing.addEditor(colName, new TextField());
      editing.addEditor(colIndoor, new CheckBox());
  
      // Put the grid in a container.
      FramedPanel framedPanel = new FramedPanel();
      framedPanel.setHeadingText("Editing Inline");
      framedPanel.setPixelSize(300, 200);
      framedPanel.add(grid);
  
      widget.add(framedPanel);
    }
  

• 内联编辑的示例

行编辑配置

一次编辑整个表格行。

• 行编辑初始化

    GridEditing<Plant> editing = new GridRowEditing<Plant>(Grid<M> editableGrid);
  

• 设置行编辑的示例

    private void createRowEditingGrid() {
      // Define the column(s).
      ColumnConfig<Plant, String> colName = new ColumnConfig<Plant, String>(properties.name(), 220, "Name");
      ColumnConfig<Plant, Boolean> colIndoor = new ColumnConfig<Plant, Boolean>(properties.indoor(), 55, "Indoor");
  
      // Initialize the columns.
      List<ColumnConfig<Plant, ?>> columns = new ArrayList<ColumnConfig<Plant, ?>>();
      columns.add(colName);
      columns.add(colIndoor);
      ColumnModel<Plant> columnModel = new ColumnModel<Plant>(columns);
  
      // Initialize the Store.
      ListStore<Plant> store = new ListStore<Plant>(properties.key());
      store.addAll(TestData.getPlants());
  
      // Initialize the Grid.
      Grid<Plant> grid = new Grid<Plant>(store, columnModel);
      grid.getView().setAutoExpandColumn(colName);
  
      // Setup the editors. Designate the input type per column.
      GridEditing<Plant> editing = new GridRowEditing<Plant>(grid);
      editing.addEditor(colName, new TextField());
      editing.addEditor(colIndoor, new CheckBox());
  
      // Put the grid in a container.
      FramedPanel framedPanel = new FramedPanel();
      framedPanel.setHeadingText("Editing Row");
      framedPanel.setPixelSize(300, 200);
      framedPanel.add(grid);
  
      widget.add(framedPanel);
    }
  

• 行编辑的示例

单元格编辑更改通知

单元格更改通知默认开启，并以红色三角形显示在左上角。

单元格字段编辑验证

每个单元格都可以有字段验证器，用于在值更改时测试验证。

• 使用行编辑最适合显示验证器通知。

• 更多关于 字段验证 的信息。

• 文本字段验证器

      // Add field validators to the text field
      TextField textField = new TextField();
      textField.addValidator(new EmptyValidator<String>()); // or textField.setAllowBlank(false);
      textField.addValidator(new RegExValidator("^[^a-z]+$", "Only uppercase letters allowed"));
  

• 添加到文本字段的字段验证器的示例

    private void createRowEditingGridWithValidation() {
      // Define the column(s).
      ColumnConfig<Plant, String> colName = new ColumnConfig<Plant, String>(properties.name(), 220, "Name");
      ColumnConfig<Plant, Boolean> colIndoor = new ColumnConfig<Plant, Boolean>(properties.indoor(), 55, "Indoor");
  
      // Initialize the columns.
      List<ColumnConfig<Plant, ?>> columns = new ArrayList<ColumnConfig<Plant, ?>>();
      columns.add(colName);
      columns.add(colIndoor);
      ColumnModel<Plant> columnModel = new ColumnModel<Plant>(columns);
  
      // Initialize the Store.
      ListStore<Plant> store = new ListStore<Plant>(properties.key());
      store.addAll(TestData.getPlants());
  
      // Initialize the Grid.
      Grid<Plant> grid = new Grid<Plant>(store, columnModel);
      grid.getView().setAutoExpandColumn(colName);
  
      // Add field validators to the text field
      TextField textField = new TextField();
      textField.addValidator(new EmptyValidator<String>()); // or textField.setAllowBlank(false);
      textField.addValidator(new RegExValidator("^[^a-z]+$", "Only uppercase letters allowed"));
  
      // Setup the editors. Designate the input type per column.
      GridEditing<Plant> editing = new GridRowEditing<Plant>(grid);
      editing.addEditor(colName, textField);
      editing.addEditor(colIndoor, new CheckBox());
  
      // Put the grid in a container.
      FramedPanel framedPanel = new FramedPanel();
      framedPanel.setHeadingText("Editing Row with TextField Validators");
      framedPanel.setPixelSize(300, 200);
      framedPanel.add(grid);
  
      widget.add(framedPanel);
    }
  

RegEx 单元格验证器

• RegExValidator 验证器的示例

    // Add field validators to the text field
    TextField textField = new TextField();
    textField.addValidator(new RegExValidator("^[^a-z]+$", "Only uppercase letters allowed"));
  

空单元格验证器

• EmptyValidator 的示例

    // Add field validators to the text field
    TextField textField = new TextField();
    textField.addValidator(new EmptyValidator<String>()); // or textField.setAllowBlank(false);
  

通过验证

• 验证通过的示例

修改

在提交修改后的记录之前，迭代并处理它们。这可以用于在将记录提交回存储之前将更改持久保存到远程服务器。

• 检索修改时，自动提交必须为 false。默认值为 false。

    store.setAutoCommit(false);
  

• 获取已修改的记录。

    Collection<Store<Plant>.Record> recordsModified = store.getModifiedRecords();
  

• 迭代修改后的记录。

    private void persistChanges() {
      Collection<Store<Plant>.Record> recordsModified = store.getModifiedRecords();
  
      for (Store<Plant>.Record record : recordsModified) {
        Plant unChangedPlantModel = record.getModel();
  
        // record.getValue(...) will return null if it has not been changed
        Date available = record.getValue(properties.available());
        Boolean indoor = record.getValue(properties.indoor());
        //...
  
        // Once the changes have been dealt with, commit them to the local store.
        // This will add the changed values to the model in the local store.
        record.commit(true);
      }
    }
  

• 一次提交所有更改。

    listStore.commitChanges();
  

• 获取已更改记录的所有更改。

    for (Store<LinkUserJso>.Record record : recordsModified) {
      // get all the changes for the record
      Collection<Change<LinkUserJso, ?>> changes = record.getChanges();
    }
  

事件

addBeforeStartEditHandler

• 在开始之前触发，除非 before 事件被取消

    editing.addBeforeStartEditHandler(new BeforeStartEditHandler<Plant>() {
      @Override
      public void onBeforeStartEdit(BeforeStartEditEvent<Plant> event) {
      }
    });
  

addCancelEditHandler

• 在取消时触发

    editing.addCancelEditHandler(new CancelEditHandler<Plant>() {
      @Override
      public void onCancelEdit(CancelEditEvent<Plant> event) {
      }
    });
  

addCompleteEditHandler

• 在完成时触发

    editing.addCompleteEditHandler(new CompleteEditHandler<Plant>() {
      @Override
      public void onCompleteEdit(CompleteEditEvent<Plant> event) {
      }
    });
  

addStartEditHandler

• 在开始时触发

    editing.addStartEditHandler(new StartEditHandler<Plant>() {
      @Override
      public void onStartEdit(StartEditEvent<Plant> event) {
        GridCell editingCell = event.getEditCell();
      }
    });
  

操作

• 编辑操作

    // Adds an editor for the given column.
    editing.addEditor(columnConfig, field)
  
    // Cancels an active edit.
    editing.cancelEditing();
  
    // Completes the active edit.
    editing.completeEditing();
  
    // Returns the converter for the given column.
    editing.getConverter(columnConfig);
  
    // Returns the target grid.
    editing.getEditableGrid();
  
    // Sets the target grid to be edited.
    editing.setEditableGrid(editableGrid);
  
    // Returns the editor for the given column.
    editing.getEditor(columnConfig);
  
    // Returns true if editing is active.
    editing.isEditing();
  
    // Removes the editor for the given column.
    editing.removeEditor(columnConfig);
  
    // Sets the target grid to be edited.
    editing.setEditableGrid(editableGrid);
  
    // Starts editing for the given cell.
    editing.startEditing(cell);