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

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

先决条件：要执行本教程中的步骤，请创建一个数据表。 确保表格最后一列的内容长度超过五到六个单词。

1. 在工作流中添加“ 构建数据表” 活动。
2. 打开“ 构建数据表 ”向导，然后为表添加所需的列。
   注意： 确保列中没有空格或特殊字符，因为稍后您将使用这些名称通过 属性名称来链接表单中的列。
3. 将数据表保存到变量中。 对于此示例，您可以将其命名为 dataTable。
   
   

   

   
   

1. 在表单中添加“ 编辑网格 ”，然后使用数据表变量的名称 (dataTable) 作为组件的 属性名称 。
2. 根据数据表中的列及其值，将组件添加到“ 编辑网格”中。 这些组件的 属性名称 是数据表中列的确切名称。
   在此示例中，添加三个 文本字段 组件。 对组件使用以下 属性名称 ： column1、 column2和 column3。
3. 转到“ 模板 ”选项卡中的“ 编辑网格 组件设置”。您可以选择使用引导 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 像素的宽度应用于所有“ 编辑网格 ”列。
4. 保存组件和表单。