vaadin7 - 将 Vaadin 表转换为 Vaadin 网格

Question

我们在我们的网站 (Vaadin Table) 中使用了很多表格，但我们的客户刚刚告诉我们他们希望能够在表格内部进行编辑。现在，我知道这在 Table 中是可能的(我已经让它工作了)，但我更喜欢 Grid 的编辑机制。有没有一种简单的方法可以将 Vaadin Table 转换为 Vaadin Grid？由于 Grid 不是替代品，我知道它需要一些转换工作。只是想知道人们发现它有多难，以及是否有关于进行此类转换的任何文档。

这是我们正常的表用法:

public final class ReplenishmentOrderMgmtView extends VerticalLayout implements View {

    private final Table table;
    private static final String[] DEFAULT_COLLAPSIBLE = {
    "contactFirstName",
    "contactLastName",
    "supplierName",
    "carrier", "carrierService", "trackingNumber"
    };
    private static final Object[] VISIBLE_COLUMNS = {
    "barcode",
    "contactUserId",
    "contactFirstName",
    "contactLastName",
    "PO",
    "orderId",
    "cellId",
    "cellName",
    "wmsItem",
    "description",
    "supplierId",
    "supplierName",
    "statusDesc",
    "resizedBinQty",
    "expectedOnDockDate",
    "shipQuantity",
    "receivedQty",
    "lastReceiptDate",
    "carrier",
    "carrierService",
    "trackingNumber",
    "creationDate"
    };
    private static final String[] COLUMN_NAMES = {
    "Barcode",
    "Contact User",
    "First Name",
    "Last Name",
    "PO Number",
    "Replenishment Order Id",
    "Cell Id",
    "Cell Name",
    "Part",
    "Description",
    "Supplier Id",
    "Supplier Name",
    "Status",
    "Resized Bin Qty",
    "Expected On Dock Date",
    "Ship Quantity",
    "Received Qty",
    "Last Receipt Date",
    "Carrier",
    "Carrier Service",
    "Tracking Number",
    "Creation Date"
    };


    private Table buildTable() {
        final Table table = new Table();
        table.setSizeFull();
        table.addStyleName(ValoTheme.TABLE_BORDERLESS);
        table.addStyleName(ValoTheme.TABLE_NO_HORIZONTAL_LINES);
        table.addStyleName(ValoTheme.TABLE_COMPACT);
        table.setSelectable(true);

        table.setColumnCollapsingAllowed(true);

        table.setColumnReorderingAllowed(true);

        updateList( table );

        table.setSortContainerPropertyId("creationDate");
        table.setSortAscending(true);

        table.setColumnHeaders( COLUMN_NAMES );

        // Allow dragging items to the reports menu
//        table.setDragMode(TableDragMode.MULTIROW);
        table.setMultiSelect(false);

        table.addActionHandler(new ReplenishmentOrdersActionHandler());

        table.addValueChangeListener(event -> this.selectItemFromTable());

        table.setImmediate(true);

        return table;
    }
}

其中还涉及一些绑定(bind)——我的数据源是一个 java bean。显然，我只包含会影响表本身的代码。任何建议或意见将不胜感激。

Answer 1

Is there an easy way to convert Vaadin Table to Vaadin Grid?

否。您必须声明和应用 Grid 的属性，并且没有直接的方法在 Grid 和 Table 之间进行转换。两者都是不同的元素，不能通过所谓的 UI 方面的最小更改 进行切换。

因为切换涉及很多需要考虑的事情，例如，

• 表格的数据源是否可以与 Grid 一起正常工作。
• 应用于表格的样式不适用于网格(即 Valo 主题样式、响应式样式)
• 表格的事件与网格不同。表格有值变化事件，而网格有项目点击监听器。
• 等等...

但是，您可以为两个元素使用相同的容器。容器数据源可以在两个元素之间通用。请注意，Grid 有一些限制，例如它不支持 component in row 而 table 支持。另一方面，Grid 速度很快，通过一些额外的功能进行了优化，例如卡住列、标题中的支持组件等。相同的方式表是 Grid 的后代，并且不具有 Grid 支持的某些功能。