gwt - GWT データグリッドの列タイトルの上にヘッダーを追加する

Question

CellTableBuilder を使用して GWT datagird にこのようなものを追加するにはどうすればよいですか?

Answer 1

これは、提供されたケースの単純な解決策として機能するはずです。「YourPage」を実際のページに、「YourClass」をクラスに、「yourColumn1」、「yourColumn2」を実際の列に、「object.getYourColumnValue」を実際の get value メソッドに置き換えてください。また、データをテーブルにバインドすることも忘れないでください (ショーケースで提供されている「ContactDatabase.get().addDataDisplay(dataGrid1);」を使用するか、「dataGrid1.setRowData(0, yourData);」を使用)。

public class YourPage extends Composite {

    ...

    // attributes 
    private Column<YourClass, String> yourColumn1;
    private Column<YourClass, String> yourColumn2;

    ...

    public DataGrid<YourClass> buildGrid() {
        dataGrid1 = new DataGrid<YourClass>();

        dataGrid1.setWidth("100%");
        dataGrid1.setHeight("100%");

        dataGrid1.setAutoHeaderRefreshDisabled(true);

        // Generating columns
        yourColumn1 = new Column<YourClass, String>(new TextCell()) {
              @Override
              public String getValue(YourClass object) {
                return object.getYourColumnValue();
              }
            };
        dataGrid1.addColumn(yourColumn1, "Column 1");
        dataGrid1.setColumnWidth(0, 50, Unit.PCT);

        yourColumn2 = new Column<YourClass, String>(new TextCell()) {
              @Override
              public String getValue(YourClass object) {
                return object.getYourColumnValue();
              }
            };
        dataGrid1.addColumn(yourColumn2, "Column 2");
        dataGrid1.setColumnWidth(1, 50, Unit.PCT);

        // setHeaderBuilder
        dataGrid1.setHeaderBuilder(
                new dataGrid1HeaderBuilder(
                        dataGrid1, false));
        ...

        return dataGrid1;
    }

    // your private header builder class 
    private class dataGrid1HeaderBuilder extends AbstractHeaderOrFooterBuilder<YourClass> {

        public tblValidatorsGroupsAnalysisResultsHeaderBuilder(
                AbstractCellTable<YourClass> table, boolean isFooter) {
            super(table, false);
            setSortIconStartOfLine(false);
        }

        @Override
        protected boolean buildHeaderOrFooterImpl() {
            Style style = dataGrid1.getResources().style();
            TableRowBuilder tr = startRow();
            TableCellBuilder th = tr.startTH().colSpan(1);
            th.style().trustedProperty("border-right", "10px solid yellow").cursor(Cursor.POINTER).endStyle();
            th.text("Name").endTH();

            // Your "Header" for 2 column
            th = tr.startTH().colSpan(2);
            th.text("Header").endTH();

            // Add Column1 and Column2 headers
            tr = startRow();
            buildHeader(tr, new TextHeader("Column1"), yourColumn1, null, false, false, false);
            buildHeader(tr, new TextHeader("Column2"), yourColumn2, null, false, false, false);
            tr.endTR();

            return true;
        }

        private void buildHeader(TableRowBuilder out, Header<?> header, Column<YourClass, ?> column,
                Column<?, ?> sortedColumn, boolean isSortAscending, boolean isFirst, boolean isLast) {
              Style style = dataGrid1.getResources().style();

              boolean isSorted = (sortedColumn == column);
              StringBuilder classesBuilder = new StringBuilder(style.header());

              // Create the table cell.
              TableCellBuilder th = out.startTH().className(classesBuilder.toString());

              // Render the header.
              Context context = new Context(0, 0, header.getKey());
              renderSortableHeader(th, context, header, isSorted, isSortAscending);

              // End the table cell.
              th.endTH();
        }
    }
}