自定义编辑网格模板

本教程可帮助您自定义“编辑网格”的“标头”和“行”模板，以增强其视觉吸引力。您将学习如何扩展特定列的宽度以及如何对其应用bg-success CSS 类。

Prerequisites:

• 安装 Persistence.Activities 版本 1.4.8 或更高版本。
• 为创建表单任务活动选择高级表单。

教程

1. 转到“编辑网格”的“模板”选项卡。

2. 在标头模板中，将内容替换为以下代码片段：

   <div class="row">
         <div class="col-sm-2">{{ components[0].label }}</div>
         <div class="col-sm-6 bg-success">{{ components[1].label }}</div>
         <div class="col-sm-2">{{ components[2].label }}</div>
   </div>
   

   在代码片段中，我们修改了<div class="col-sm-2">{{ component.label }}</div>行，以表示“编辑网格”中的第一列。我们将component替换为components[0] ，因此我们可以通过列的索引号来识别列。我们为“编辑网格”中的每一列复制了这一行。然后，我们将bg-success类添加到所需的组件，并将col-sm-2类更改为col-sm-6 ，以使外观更宽。

3. 在行模板中，将内容替换为以下代码片段：

   <div class="row">
             <div class="col-sm-2">
               {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}}
             </div>
           <div class="col-sm-6 bg-success">
             {{ isVisibleInRow(components[1]) ? getView(components[1], row[components[1].key]) : ''}}
             <div class="col-sm-2">
             {{ isVisibleInRow(components[2]) ? getView(components[2], row[components[2].key]) : ''}}
            
           <div class="row">
         {% util.eachComponent(components, function(component) { %}
           {% if (displayValue(component)) { %}
             <div class="col-sm-2">
               {{ isVisibleInRow(component) ? getView(component, row[component.key]) : ''}}
             </div>
           {% } %}
         {% }) %}
         {% if (!instance.options.readOnly && !instance.disabled) { %}
           <div class="col-sm-2">
             <div class="btn-group pull-right">
               <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
               {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
                 <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
               {% } %}
             </div>
           </div>
         {% } %}
       </div>
   

   在代码片段中，我们更新了<div class="col-sm-2" {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}} </div>行以表示第一列。然后将component替换为components[0] ，这样我们就可以通过列的索引号来识别列。我们为“编辑网格”中的每一列复制了这一行。然后，对于在“标头模板”中修改的同一列，我们将col-sm-2类更改为col-sm-6 ，并在“行模板”中添加了bg-success类。

   

   这些步骤将扩展指定列的宽度并应用bg-success类，使该列占据编辑网格空间的 60％，并提供绿色背景。

工作流示例

要按照这些步骤自行尝试本教程，请在此处下载示例工作流 。