gwt - 在 GWT 数据网格中的列标题上方添加标题

Question

如何使用 CellTableBuilder 在 GWT datagird 中添加类似的内容？

Answer 1

这应该作为提供案例的简单解决方案。请将“YourPage”替换为您的真实页面，将“YourClass”替换为您的班级，将“yourColumn1”、“yourColumn2”替换为您的真实列，并将“object.getYourColumnValue”替换为您的真实获取值方法。请不要忘记将您的数据绑定到表格（使用：“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();
        }
    }
}