0

テーブル フィールドのツリー表現のコンポーネントを探しています。

私が探しているのは、列を持つテーブルですが、ツリーのようなセルを折りたたむオプションがあります。

4

1 に答える 1

2

Scout には組み込みのツリー テーブルはありませんが、テーブルを悪用してツリー テーブルのように見せることができます。この Gistで実装を提案しました。

AbstractTreeTableテーブルに 2 つの列を追加するテーブル テンプレートです。

  • KeyColumn: テーブルの主キー
  • ParentKeyColumn: 親行のキー、または行がツリー ルートにある場合は null。

AbstractTreeTable各ノード行の折りたたまれた状態を処理するかどうか。また、最初の列を装飾します (ノードのインデントと[+]&[-]マーカー)。行アクション ( execRowAction(..)) を処理します。

これをテーブル ページで使用する場合は、 ではなくTablePageDataObject[][]を使用することをお勧めします。これをテーブル フィールドで使用する場合、テーブル フィールドがBean ベースのテーブル データを使用している場合にのみ機能します。

私のプロトタイプは改善される可能性があります：

  • 並べ替えのサポートなし (1 つの列について、行を並べ替える方法を定義することができます。親が異なる場合 -> 2 つの親の値の比較、親が同じ場合 -> セルの値)。
  • フィルターを適用しようとした場合にコンテンツがどのように動作するかはテストしていません (改善される可能性もあります)。
  • 行数が多い場合のパフォーマンスを確認する必要があります。
  • execMethods はテンプレート レベルで使用しないでください

例:

Cars TreeTable と 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 に答える