在“编辑网格”中自定义列宽

本教程演示如何在“编辑网格”中修改最后一列的宽度。

先决条件：要按照本教程中的步骤操作，请创建数据表。确保表格最后一列的内容超过大约五到六个字。

1. 在工作流中添加“构建数据表”活动。

2. 打开“构建数据表”向导，并为表格添加所需的列。

   备注：

   确保列没有空格或特殊字符，因为您稍后将使用这些名称通过属性名称链接表单中的列。

3. 将数据表保存到变量中。 对于此示例，您可以将其命名为 dataTable。

   

4. 将“编辑网格”添加到表单中，并使用数据表变量的名称 ( dataTable ) 作为组件的属性名称。

5. 根据数据表中的列及其值，将组件添加到编辑网格中。这些组件的属性名称是数据表中列的确切名称。

   对于此示例，请添加三个“文本字段”组件。使用组件的以下属性名称： column1 、 column2和column3 。

6. 转到“模板”选项卡中的“编辑网格”组件设置。您可以选择使用 "Bootstrap 3" 或使用 CSS style属性来编辑列宽。

   • 使用引导程序 3
     1. 在“标头模板”部分中，使用以下模板更改默认生成的代码：

        <div class="row">
              {% util.eachComponent(components, function(component) { %}
                {% if (displayValue(component)) { %}
                {% if (component.key=== 'Column3') { %}
                      <div class="col-sm-8">
                    {% } %}
                    {% if (component.key !== 'Column3') { %}
                      <div class="col-sm-2">
                    {% } %}
                  {{ component.label }}</div>
                {% } %}
              {% }) %}
            </div>
        

     2. 在“行模板”部分中，使用以下模板更改默认生成的代码：

        <div class="row">
              {% util.eachComponent(components, function(component) { %}
               {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}
                    {% if (component.key=== 'Column3') { %}
                      <div class="col-sm-8">
                    {% } %}
                    {% if (component.key !== 'Column3') { %}
                      <div class="col-sm-2">
                    {% } %}
                    {{ 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>
        

     提示：

     • 请注意，您将component.key值与列的确切名称进行比较，该名称与用作每个文本组件的“属性名称”相同。
     • UiPath 表单使用的是 Bootstrap 3 框架。 表格的总宽度分为 12 个部分。 因此，请确保您所做的任何除法之和均为 12。 在此示例中，具有 col-sm-2 类的两列占用 4 个部分，剩余的 8 个部分用于第三列 (col-sm-8)。
   • 使用style属性：

     1. 在“标头模板”脚本中，识别所有<div class="col-sm-2">标签并添加自定义宽度，如下所示： style="width:{your_custom_width}px !important" 。宽度必须以像素为单位。

        

     2. 在“行模板”脚本中，识别所有<div class="col-sm-2">标签并添加自定义宽度，如下所示： style="width:{your_custom_width}px !important" 。宽度必须以像素为单位。

        

        "col-sm-2"元素表示默认列宽。您可以通过添加自定义样式标签来修改默认列宽。例如， style="width:70px !important"将 70 像素的宽度应用于所有“编辑网格”列。

7. 保存组件和表单。