自定义编辑网格模板

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

先决条件：

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

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％，并为其提供绿色背景。

工作流示例

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