AEM中xtype=tableedit2的Touch UI替代组件及实现咨询

替代组件说明 #

Classic UI 的 xtype="tableedit2" 对应的 Touch UI 替代组件就是 granite/ui/components/coral/foundation/table，你之前配置未成功大概率是数据源绑定、列定义或编辑控件的配置细节缺失。下面是完整的可运行实现示例。

Granite Table 完整实现示例 #

以下是基于 JCR 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">
        <table
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/table"
            emptyText="暂无数据，请添加条目"
            selectionMode="none">
            <!-- 列定义 -->
            <columns jcr:primaryType="nt:unstructured">
                <!-- 名称列 -->
                <name
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/table/column"
                    headerText="名称"
                    sortable="{Boolean}true">
                    <items jcr:primaryType="nt:unstructured">
                        <nameField
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                            fieldLabel="名称"
                            name="./items/{itemName}/name"/>
                    </items>
                </name>
                <!-- 描述列 -->
                <description
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/table/column"
                    headerText="描述"
                    sortable="{Boolean}false">
                    <items jcr:primaryType="nt:unstructured">
                        <descriptionField
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
                            fieldLabel="描述"
                            name="./items/{itemName}/description"/>
                    </items>
                </description>
                <!-- 操作列 -->
                <actions
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/table/column"
                    type="actions">
                    <items jcr:primaryType="nt:unstructured">
                        <delete
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/table/action/delete"
                            icon="delete"
                            text="删除"/>
                    </items>
                </actions>
            </columns>
            <!-- 顶部操作按钮 -->
            <actions jcr:primaryType="nt:unstructured">
                <add
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/table/action/add"
                    icon="add"
                    text="添加条目"/>
            </actions>
            <!-- 数据源绑定：读取./items下的子节点作为表格行数据 -->
            <dataSource
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/datasource/children"
                path="./items"/>
        </table>
    </items>
</jcr:root>

关键配置说明 #

• 数据源：通过 dataSource 绑定到存储行数据的节点路径（示例中为 ./items），已有的子节点会自动加载为表格行
• 列与表单控件：每个列下的 items 定义单元格内的表单控件，name 属性中的 {itemName} 是动态占位符，用于生成每行数据的子节点名称
• 操作按钮：顶部的add按钮用于新增行，每行的delete按钮用于删除当前行，无需额外逻辑
• 扩展能力：可替换单元格内的表单控件（如下拉框、日期选择器），只需修改对应的sling:resourceType即可

内容的提问来源于stack exchange，提问作者Hitesh Choudhary