开发批量编辑器

本节介绍如何开发批量编辑器工具以及如何扩展基于批量编辑器的产品列表组件。

批量编辑器查询参数

使用批量编辑器时，可以向URL添加多个查询参数，以通过特定配置调用批量编辑器。 如果您希望批量编辑器始终与特定配置一起使用（例如，在产品列表组件中），则需要修改bulkeditor.jsp（位于/libs/wcm/core/components/bulkeditor中）或使用特定配置创建组件。 使用查询参数所做的更改不是永久性的。

例如，如果您在浏览器的URL中键入以下内容：

https://<servername><port_number>/etc/importers/bulkeditor.html?rootPath=/content/geometrixx/en&queryParams=geometrixx&initialSearch=true&hrp=true

显示批量编辑器，但不显示 根路径 字段为hrp=true会隐藏字段。 当参数hrp=false时，将显示字段（默认值）。

以下是批量编辑器查询参数的列表：

开发基于批量编辑器的组件：产品列表组件

本节概述了如何使用批量编辑器，并介绍了基于批量编辑器的现有Geometrixx组件：产品列表组件。

产品列表组件允许用户显示和编辑数据表。 例如，您可以使用产品列表组件表示目录中的产品。 该信息将在标准HTML表中显示，并且任何编辑操作都将在 编辑 对话框，其中包含一个BulkEditor小组件。 (此批量编辑器与/etc/importers/bulkeditor.html上可访问的编辑器完全相同，或者与通过“工具”菜单访问的编辑器完全相同。) 产品列表组件已针对特定的有限批量编辑器功能进行配置。 可以配置批量编辑器的每个部分（或从批量编辑器派生的组件）。

使用批量编辑器，您可以添加、修改、删除、过滤和导出行、保存修改和导入一组行。 每行都作为节点存储在产品列表组件实例本身下。 每个单元格都是每个节点的属性。 这是一种设计选择，可以轻松更改它，例如，您可以将节点存储在存储库中的其他位置。 查询Servlet的作用是返回要显示的节点列表；搜索路径被定义为产品列表实例。

产品列表组件的源代码位于/apps/geometrixx/components/productlist的存储库中，由诸如所有AEM组件之类的几个部分组成：

• HTML渲染：渲染在JSP文件(/apps/geometrixx/components/productlist/productlist.jsp?lang=zh-Hans)中完成。 JSP读取当前产品列表组件的子节点，并将每个子节点显示为HTML表的行。
• 编辑对话框，您可在其中定义批量编辑器配置。 配置对话框以满足组件的需求：列，以及对网格或搜索执行的可能操作。 请参阅 批量编辑器配置属性 以了解有关所有配置属性的信息。

以下是对话框子节点的XML表示形式：

        <editor
            jcr:primaryType="cq:Widget"
            colsSelection="[ProductId,ProductName,Color,CatalogCode,SellingSku]"
            colsValue="[ProductId,ProductName,Color,CatalogCode,SellingSku]"
            contentMode="false"
            exportURL="/etc/importers/bulkeditor/export.tsv"
            extraCols="Selection"
            hideColsSelection="false"
            hideContentMode="true"
            hideDeleteButton="false"
            hideExportButton="false"
            hideExtraCols="true"
            hideImportButton="false"
            hideInsertButton="false"
            hideMoveButtons="false"
            hidePathCol="true"
            hideRootPath="true"
            hideSaveButton="false"
            hideSearchButton="false"
            importURL="/etc/importers/bulkeditor/import"
            initialSearch="true"
            insertedResourceType="geometrixx/components/productlist/sku"
            queryParams=""
            queryURL="/etc/importers/bulkeditor/query.json"
            saveURL="/etc/importers/bulkeditor/save"
            xtype="bulkeditor">
            <saveButton
                jcr:primaryType="nt:unstructured"
                text="Save modifications"/>
            <searchButton
                jcr:primaryType="nt:unstructured"
                text="Apply filter"/>
            <queryParamsInput
                jcr:primaryType="nt:unstructured"
                fieldDescription="Enter here your filters"
                fieldLabel="Filters"/>
            <searchPanel
                jcr:primaryType="nt:unstructured"
                height="200">
                <defaults
                    jcr:primaryType="nt:unstructured"
                    labelWidth="150"/>
            </searchPanel>
            <grid
                jcr:primaryType="nt:unstructured"
                height="275"/>
            <store jcr:primaryType="nt:unstructured">
                <sortInfo
                    jcr:primaryType="nt:unstructured"
                    direction="ASC"
                    field="CatalogCode"/>
            </store>
            <colModel
                jcr:primaryType="nt:unstructured"
                width="150"/>
            <colsMetadata jcr:primaryType="nt:unstructured">
                <Selection
                    jcr:primaryType="nt:unstructured"
                    checkbox="true"
                    forcedPosition="0"
                    headerText=""/>
                <ProductId
                    jcr:primaryType="nt:unstructured"
                    cellCls="productlist-cell-productid"
                    headerText="Product Id"/>
                <ProductName
                    jcr:primaryType="nt:unstructured"
                    cellStyle="background-color: #FFCC99;"
                    headerText="Product Name"/>
                <CatalogCode
                    jcr:primaryType="nt:unstructured"
                    cellStyle="background-color: #EDEDED;"
                    headerText="Catalog Code"/>
                <Color jcr:primaryType="nt:unstructured">
                    <editor
                        jcr:primaryType="nt:unstructured"
                        store="[Blue,Red,Yellow]"
                        triggerAction="all"
                        typeAhead="true"
                        xtype="combo"/>
                </Color>
                <SellingSku
                    jcr:primaryType="nt:unstructured"
                    headerText="Sku Id"/>
            </colsMetadata>
        </editor>

批量编辑器配置属性

可以配置批量编辑器的每个部分。 下表列出了批量编辑器的所有配置属性。

列元数据配置

您可以为每列配置：

• 显示属性：html样式、CSS类和只读

• 复选框

• 强迫职位

CSS和只读列

批量编辑器有三列配置：

• 单元格CSS类名称(cellCls):添加到已配置列每个单元格的CSS类名称。
• 单元格样式(cellStyle):HTML样式，将添加到已配置列的每个单元格。
• 只读（只读）：为已配置列的每个单元格设置只读。

配置必须定义为：

"colsMetadata": {
"Column name": {
     "cellStyle": "html style",
     "cellCls": "CSS class",
     "readOnly": true/false
}
}

以下示例可在产品列表组件(/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata?lang=zh-Hans)中找到：

            <colsMetadata jcr:primaryType="nt:unstructured">
                <Selection
                    jcr:primaryType="nt:unstructured"
                    checkbox="true"
                    forcedPosition="0"
                    headerText=""/>
                <ProductId
                    jcr:primaryType="nt:unstructured"
                    cellCls="productlist-cell-productid"
                    headerText="Product Id"/>
                <ProductName
                    jcr:primaryType="nt:unstructured"
                    cellStyle="background-color: #FFCC99;"
                    headerText="Product Name"/>
                <CatalogCode
                    jcr:primaryType="nt:unstructured"
                    cellStyle="background-color: #EDEDED;"
                    headerText="Catalog Code"/>
                <Color jcr:primaryType="nt:unstructured">
                    <editor
                        jcr:primaryType="nt:unstructured"
                        store="[Blue,Red,Yellow]"
                        triggerAction="all"
                        typeAhead="true"
                        xtype="combo"/>
                </Color>
                <SellingSku
                    jcr:primaryType="nt:unstructured"
                    headerText="Sku Id"/>
            </colsMetadata>

复选框

如果复选框配置属性设置为true，则列的所有单元格都将以复选框形式呈现。 复选框已发送 true 保存到服务器Servlet， false 否则。 在标题菜单中，您还可以 全选 或 选择无. 如果选定的标题是复选框列的标题，则会启用这些选项。

在前一个示例中，选择列仅包含复选框="true"。

强迫位置

forced position允许您指定列在网格中的位置：0是第一位， <number of="" columns="">-1是最后一个位置。 任何其他值将被忽略。

在前一个示例中，选择列是作为forcedPosition="0"的第一列。

查询Servlet

默认情况下，查询Servlet可在 /libs/wcm/core/components/bulkeditor/json.java. 您可以配置其他路径以检索数据。

查询Servlet的工作方式如下：它会接收GQL查询和要返回的列，对结果进行计算，并将结果作为JSON流发送回批量编辑器。

在产品列表组件示例中，发送到查询Servlet的两个参数如下所示：

• 查询："path:/content/geometrixx/en/customers/jcr:content/par/productlist多维数据集"
• cols:"Selection，ProductId，ProductName，Color，CatalogCode，SellingSku"

且返回的JSON流如下所示：

{
  "hits": [{
      "jcr:path": "/content/geometrixx/en/products/jcr:content/par/productlist/1258674828905",
      "ProductId": "21",
      "ProductName": "Cube",
      "Color": "Blue",
      "CatalogCode": "43244",
      "SellingSku": "32131"
    }
  ],
  "results": 1
}

每次点击都对应一个节点及其属性，并在网格中显示为一行。

您可以扩展查询Servlet以返回复杂的继承模型或返回存储在特定逻辑位置的节点。 查询Servlet可用于执行任何类型的复杂计算。 然后，网格可显示存储库中多个节点的聚合行。 在这种情况下，这些行的修改和保存必须由保存Servlet管理。

保存Servlet

在批量编辑器的默认配置中，每行都是一个节点，并且该节点的路径存储在行记录中。 批量编辑器通过jcr路径保留行与节点之间的链接。 用户编辑网格时，将生成所有修改的列表。 用户单击 保存，则会向每个路径发送一个包含更新属性值的POST查询。 这是Sling概念的基础，如果每个单元格都是节点的属性，则此概念非常有效。 但是，如果实现查询Servlet以进行继承计算，则此模型无法作为查询Servlet返回的属性从另一个节点继承。

保存Servlet的概念是，修改不会直接发布到每个节点，而是会发布到执行保存作业的一个Servlet。 这使此Servlet能够分析修改并将属性保存到正确的节点。

每个更新的属性都将以下格式发送到Servlet:

• 参数名称： <jcr path="">/<property name="">

  示例：/content/geometrixx/en/products/jcr:content/par/productlist/1258674859000/SellingSku

• 值： <value>

  示例: 12123

Servlet需要知道catalogCode属性的存储位置。

默认的保存Servlet实施位于/libs/wcm/bulkeditor/save/POST.jsp ，可在产品列表组件中使用。 它从请求中获取所有参数(使用 <jcr path="">/<property name=""> 格式)，并使用JCR API在节点上写入属性。 如果节点不存在（网格插入行），它也会创建节点。

不应按原样使用默认代码，因为它重新实施了服务器本机的功能(POST <jcr path="">/<property name="">)，因此只是构建将管理属性继承模型的保存Servlet的良好起点。