AEM中xtype tableedit2的Touch UI替代组件咨询

一、Granite Table 正确实现示例 #

你尝试的sling:resourceType="granite/ui/components/coral/foundation/table"是正确的替代方向，以下是完整的可编辑表格配置示例（适用于AEM 6.5+），包含添加/删除行、多类型编辑控件：

<items jcr:primaryType="nt:unstructured">
    <editableTable
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/table"
        emptyText="暂无数据"
        selectionMode="multiple">
        <!-- 列定义 -->
        <columns jcr:primaryType="nt:unstructured">
            <!-- 文本输入列 -->
            <productName
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/table/column"
                headerText="产品名称"
                width="250">
                <items jcr:primaryType="nt:unstructured">
                    <nameField
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        name="./productName"
                        required="{Boolean}true"
                        placeholder="输入产品名称"/>
                </items>
            </productName>
            <!-- 下拉选择列 -->
            <productCategory
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/table/column"
                headerText="产品分类"
                width="180">
                <items jcr:primaryType="nt:unstructured">
                    <categorySelect
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                        name="./productCategory">
                        <items jcr:primaryType="nt:unstructured">
                            <electronics
                                jcr:primaryType="nt:unstructured"
                                text="电子产品"
                                value="electronics"/>
                            <appliances
                                jcr:primaryType="nt:unstructured"
                                text="家用电器"
                                value="appliances"/>
                        </items>
                    </categorySelect>
                </items>
            </productCategory>
            <!-- 日期选择列 -->
            <launchDate
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/table/column"
                headerText="发布日期">
                <items jcr:primaryType="nt:unstructured">
                    <datePicker
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                        name="./launchDate"
                        displayFormat="YYYY-MM-DD"/>
                </items>
            </launchDate>
            <!-- 操作列（删除） -->
            <actionsColumn
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/table/column"
                type="actions">
                <items jcr:primaryType="nt:unstructured">
                    <deleteRow
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/table/action/delete"
                        icon="delete"
                        text="删除"/>
                </items>
            </actionsColumn>
        </columns>
        <!-- 顶部操作（添加行） -->
        <actions jcr:primaryType="nt:unstructured">
            <addRow
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/table/action/add"
                icon="add"
                text="添加产品"/>
        </actions>
    </editableTable>
</items>

关键配置说明 #

• 每个column节点下的items定义对应列的编辑控件，name属性需指定存储路径（如./productName），确保数据能正确保存到JCR节点
• 通过table/action/add和table/action/delete实现行的增删操作，与Classic UI TableEdit2的核心功能对齐
• selectionMode支持single/multiple，可配合批量操作需求调整

二、替代方案：Multifield 模拟表格布局 #

如果Granite Table的样式或交互不符合需求，也可以使用granite/ui/components/coral/foundation/multifield结合自定义布局实现表格效果：

<items jcr:primaryType="nt:unstructured">
    <productList
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/multifield"
        composite="{Boolean}true"
        fieldLabel="产品列表"
        emptyText="添加产品">
        <field
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container"
            layout="table">
            <items jcr:primaryType="nt:unstructured">
                <name
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                    fieldLabel="产品名称"
                    name="./productName"
                    required="{Boolean}true"/>
                <category
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                    fieldLabel="产品分类"
                    name="./productCategory">
                    <items jcr:primaryType="nt:unstructured">
                        <electronics
                            jcr:primaryType="nt:unstructured"
                            text="电子产品"
                            value="electronics"/>
                    </items>
                </category>
            </items>
        </field>
    </productList>
</items>

这种方式通过layout="table"将multifield的子控件排列成表格样式，适合简单的可编辑列表场景。

内容的提问来源于stack exchange，提问作者Aayushmaan Sharma