AEM中xtype tableedit2对应的Touch UI替代组件是什么？

替代组件说明 #

Classic UI 的 tableedit2 对应的 Touch UI 替代组件就是 granite/ui/components/coral/foundation/table，以下是可直接复用的完整实现示例。

Granite Table 完整配置示例 #

可直接将这段配置写入组件的 dialog.xml 文件中，实现带增删行、多类型列的可编辑表格：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
          jcr:primaryType="nt:unstructured"
          sling:resourceType="granite/ui/components/coral/foundation/container">
    <items jcr:primaryType="nt:unstructured">
        <editable-table
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/table"
            emptyText="暂无数据，请添加行"
            selectionMode="none">
            <!-- 定义表格列 -->
            <columns jcr:primaryType="nt:unstructured">
                <!-- 文本输入列 -->
                <title-column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/table/column"
                    headerText="标题">
                    <items jcr:primaryType="nt:unstructured">
                        <title-input
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                            name="./items/{item}/title"
                            emptyText="输入标题"/>
                    </items>
                </title-column>
                <!-- 下拉选择列 -->
                <type-column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/table/column"
                    headerText="内容类型">
                    <items jcr:primaryType="nt:unstructured">
                        <type-select
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                            name="./items/{item}/type">
                            <items jcr:primaryType="nt:unstructured">
                                <article-option
                                    jcr:primaryType="nt:unstructured"
                                    text="文章"
                                    value="article"/>
                                <video-option
                                    jcr:primaryType="nt:unstructured"
                                    text="视频"
                                    value="video"/>
                            </items>
                        </type-select>
                    </items>
                </type-column>
                <!-- 数字输入列 -->
                <order-column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/table/column"
                    headerText="排序值">
                    <items jcr:primaryType="nt:unstructured">
                        <order-input
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                            name="./items/{item}/order"
                            min="0"
                            value="0"/>
                    </items>
                </order-column>
                <!-- 删除操作列 -->
                <action-column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/table/column"
                    type="actions">
                    <items jcr:primaryType="nt:unstructured">
                        <delete-action
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/table/action/delete"
                            icon="delete"
                            text="删除"/>
                    </items>
                </action-column>
            </columns>
            <!-- 添加行按钮 -->
            <actions jcr:primaryType="nt:unstructured">
                <add-action
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/table/action/add"
                    icon="add"
                    text="添加行"/>
            </actions>
        </editable-table>
    </items>
</jcr:root>

核心配置要点 #

• {item} 占位符：AEM会自动将其替换为唯一标识（如递增索引），确保每行数据存储的唯一性
• 列类型扩展：可根据需求替换列内的表单组件，比如日期选择器、富文本编辑器等
• 操作列：通过 type="actions" 定义操作列，除了删除还可扩展自定义操作
• 空状态提示：emptyText 属性用于设置无数据时的提示文本

数据存储结构 #

提交对话框后，数据会以如下JCR结构存储：

your-component-node
├── items
│   ├── item-1
│   │   ├── title = "产品介绍"
│   │   ├── type = "article"
│   │   └── order = 1
│   └── item-2
│       ├── title = "演示视频"
│       ├── type = "video"
│       └── order = 2
└── ...

内容的提问来源于stack exchange，提问作者Thomas A Mathew