自定义列宽

表单中的表格有时需要更宽或更窄的列，而不是具有相同宽度的列。 您可以在“编辑网格”和“数据网格”组件中为表格设置自定义宽度。

教程

下一教程将提供有关如何在另存为 myTable的表格中修改 Column3 宽度的步骤。

构建数据表

要创建要在表单中使用的表格，请执行以下操作：

1. Inside your workflow, add the Build Data Table activity.

2. Click DataTable... . The Build Data Table wizard opens.

3. 为表格添加所需的列并编辑其属性。当您使用这些名称通过“字段键”组件选项卡链接表单中的列时，请确保列名称中没有空格或特殊字符。

   

4. Click OK to save the table.

5. In the Properties panel > Output field of the Build Data Table activity, set a variable name for your table (for example, myTable ).

   使用此变量，您可以通过“创建表单”活动的“表单字段集合”属性将表绑定到表单。

   

将数据表绑定到表单和网格组件

要将数据表绑定到表单，请执行以下操作：

1. Add the Create Form activity in your workflow.

2. In the Properties panel > FormFieldsCollection field, click on the three dots menu (fa-ellipsis-v:) . The FormFieldsCollection wizard opens.

3. Create an argument and link it to the previously created table using the variable (i.e., myTable). Set the argument Direction to In/Out and the Type to DataTable. Give a Name to your argument, for example table.

   

4. 单击“确定” 。确保未选中“生成输入字段”框。

要将数据表绑定到“编辑网格”或“数据网格”组件，请执行以下操作：

1. Open the Form Designer from the Create Form activity.

2. From the Data category, drag and drop a grid component (i.e., Edit Grid and/or Data Grid).

3. 在网格的“字段键”选项卡中，引用表参数（即table ）。

   “字段键值”区分大小写。

   

4. 将文本组件添加到网格中，以复制表格中的列。 保存每个文本组件。

   例如，如果您的表格包含名为Column1 、 Column2和Column3的三个列，则将三个文本组件拖放到网格中，并确保在“字段键”选项卡中使用表格中的列名称。

   “字段键值”区分大小写。

   

5. 保存表单。

在编辑网格组件中自定义列宽

使用 Bootsrap 3

1. 转到“编辑网格组件”设置 。
2. In the Templates tab > Header Template section, change the default generated code with the following template:

   <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>
   

3. In the Templates tab > Row Template section, change the default generated code with the following template:

   <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值与列的确切名称进行比较，该名称与每个文本组件的“字段键”选项卡中使用的列（将数据表绑定到“编辑网格”或“数据网格”组件 中的第 4 步）。
   • UiPath 表单使用的是 Bootstrap 3 框架。 表格的总宽度分为 12 个部分。 因此，请确保您所做的任何除法之和均为 12。 在此示例中，具有 col-sm-2 类的两列占用 4 个部分，剩余的 8 个部分用于第三列 (col-sm-8)。

使用“样式”属性

1. Hover over the Edit Grid component and click Edit. The configuration page opens.
2. Navigate to the Templates tab.

   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 像素的宽度应用于所有“编辑网格”列。

      

      

3. Save your component and the form.

自定义数据网格组件中的列宽

1. 创建具有所需列宽的本地 CSS 文件。 在我们的示例中，以下模板创建了一个更宽的 Column3 （即 nth-child(3)）：

   .mygrid tbody>tr>:nth-child(1){ 
   width: 70px;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }
   

2. In the Properties panel > LocalCSSFilePath field of the Create Form activity, reference the previously created CSS file. For example,"/file://C:\User\Desktop\EditColumnWidth.css".
3. In the Data Grid component > Display tab > Custom CSS Class field, enter the name of the CSS class (for example, mygrid).

示例工作流

要查看完整的工作流或以备后用，请下载XAML 示例