0

我正在寻找用于表字段的树表示的组件。

我正在寻找的是带有列的表格,但可以选择像树一样折叠单元格。

4

1 回答 1

2

Scout 中没有内置的树表,但可以滥用表使其看起来像树表。我刚刚在这个 Gist中提出了一个实现。

AbstractTreeTable是在表格中添加 2 列的表格模板:

  • KeyColumn: 表的主键
  • ParentKeyColumn: 父行的键,如果该行位于树根,则为 null。

AbstractTreeTable处理每个节点行的折叠状态。它还装饰第一列(节点上的缩进和[+]&[-]标记)。它处理行动作 ( execRowAction(..))。

如果在表格页面中使用它,建议使用TablePageData而不是Object[][]. 如果您在表字段中使用它,它仅在表字段使用基于bean 的表数据时才有效。

我的原型可以改进:

  • 不支持排序(对于一列,可以定义行需要如何排序:如果它们具有不同的父级 -> 比较两个父级值;如果它们具有相同的父级 -> 单元格值)。
  • 如果您尝试对其应用过滤器,我没有测试内容的行为方式(也可以改进)。
  • 需要检查大量行的性能。
  • execMethods 不应在模板级别使用

例子:

带有 Eclipse Scout 的汽车树表

@Order(10.0)
@FormData(value = AbstractTableFieldBeanData.class, sdkCommand = SdkCommand.USE, defaultSubtypeSdkCommand = DefaultSubtypeSdkCommand.CREATE)
public class CarsTableField extends AbstractTableField<CarsTableField.Table> {

  @Override
  protected int getConfiguredGridH() {
    return 8;
  }

  @Override
  protected int getConfiguredGridW() {
    return 2;
  }

  @Override
  protected String getConfiguredLabel() {
    return TEXTS.get("Cars");
  }

  @Order(10.0)
  public class Table extends AbstractTreeTable {

    /**
     * @return the PriceFromColumn
     */
    public PriceFromColumn getPriceFromColumn() {
      return getColumnSet().getColumnByClass(PriceFromColumn.class);
    }

    /**
     * @return the NameColumn
     */
    public NameColumn getNameColumn() {
      return getColumnSet().getColumnByClass(NameColumn.class);
    }

    @Override
    protected boolean execIsNode(ITableRow row) {
      return getParentKeyColumn().getValue(row) == null;
    }

    @Override
    protected void execDecorateRow(ITableRow row) throws ProcessingException {
      if (execIsNode(row)) {
        row.setFont(FontSpec.parse("BOLD"));
      }
    }

    @Override
    public void importFromTableBeanData(AbstractTableFieldBeanData source) throws ProcessingException {
      super.importFromTableBeanData(source);

      toggleExpandedState(getRows());
    }

    @Order(10.0)
    public class NameColumn extends AbstractStringColumn {

      @Override
      protected String getConfiguredHeaderText() {
        return TEXTS.get("CarModel");
      }
    }

    @Order(20.0)
    public class PriceFromColumn extends AbstractIntegerColumn {

      @Override
      protected String getConfiguredHeaderText() {
        return TEXTS.get("PriceFrom");
      }
    }
  }
}

带有 Eclipse Scout 的文件树表

@Order(10.0)
@FormData(value = AbstractTableFieldBeanData.class, sdkCommand = SdkCommand.USE, defaultSubtypeSdkCommand = DefaultSubtypeSdkCommand.CREATE)
public class FilesTableField extends AbstractTableField<FilesTableField.Table> {

  @Override
  protected int getConfiguredGridH() {
    return 8;
  }

  @Override
  protected int getConfiguredGridW() {
    return 2;
  }

  @Override
  protected String getConfiguredLabel() {
    return TEXTS.get("Files");
  }

  @Order(10.0)
  public class Table extends AbstractTreeTable {

    @Override
    protected boolean execIsNode(ITableRow row) {
      Long type = getTypeColumn().getValue(row);
      return FileTypeCodeType.FolderCode.ID.equals(type);
    }

    @Override
    public void importFromTableBeanData(AbstractTableFieldBeanData source) throws ProcessingException {
      super.importFromTableBeanData(source);

      toggleExpandedState(getRows());
    }

    @Override
    protected void execDecorateRow(ITableRow row) throws ProcessingException {
      Long type = getTypeColumn().getValue(row);
      if (FileTypeCodeType.FolderCode.ID.equals(type)) {
        row.setIconId(Icons.FOLDER);
      }
      else if (FileTypeCodeType.FileCode.ID.equals(type)) {
        row.setIconId(Icons.DOCUMENT);
      }
      else if (FileTypeCodeType.EmailCode.ID.equals(type)) {
        row.setIconId(Icons.EMAIL);
      }
      else if (FileTypeCodeType.VCardCode.ID.equals(type)) {
        row.setIconId(Icons.VCARD);
      }
    }

    /**
     * @return the TypeColumn
     */
    public TypeColumn getTypeColumn() {
      return getColumnSet().getColumnByClass(TypeColumn.class);
    }

    /**
     * @return the ModifiedDateColumn
     */
    public ModifiedDateColumn getModifiedDateColumn() {
      return getColumnSet().getColumnByClass(ModifiedDateColumn.class);
    }

    /**
     * @return the NameColumn
     */
    public NameColumn getNameColumn() {
      return getColumnSet().getColumnByClass(NameColumn.class);
    }

    @Order(20.0)
    public class NameColumn extends AbstractStringColumn {

      @Override
      protected String getConfiguredHeaderText() {
        return TEXTS.get("Name");
      }

      @Override
      protected int getConfiguredWidth() {
        return 400;
      }
    }

    @Order(30.0)
    public class ModifiedDateColumn extends AbstractDateColumn {

      @Override
      protected String getConfiguredFormat() {
        return "dd.MM.yyyy hh:mm";
      }

      @Override
      protected String getConfiguredHeaderText() {
        return TEXTS.get("DateModified");
      }

      @Override
      protected int getConfiguredWidth() {
        return 200;
      }
    }

    @Order(40.0)
    public class TypeColumn extends AbstractSmartColumn<Long> {

      @Override
      protected Class<? extends ICodeType<?, Long>> getConfiguredCodeType() {
        return FileTypeCodeType.class;
      }

      @Override
      protected String getConfiguredHeaderText() {
        return TEXTS.get("Type");
      }

      @Override
      protected int getConfiguredWidth() {
        return 200;
      }
    }
  }
}

当然,这只是解决实际问题的一种解决方法:scout 缺少模型级别的树表表示。如果有类似的东西,就可以在不同的 UI 中使用真正的树表小部件。

于 2014-12-18T05:44:13.440 回答