自定义列宽

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

教程

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

构建数据表

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

1. 在工作流中，添加“ 构建数据表 ”活动。
2. 单击 “数据表...” 。 “ 构建数据表 ”向导将打开。

3. 为表格添加所需的列并编辑其属性。

   确保列名称 不包含空格或特殊字符，因为您可以使用这些名称通过“ 字段键 组件”选项卡链接表单中的列。

   
   

   

   
   
4. 单击“ 确定 ”以保存表格。
5. 在“构建数据表”活动的“ 属性 ”面板 >“ 输出 ”字段中，为表格设置变量名称（例如 myTable ）。

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

   
   

   

   
   

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

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

1. 在工作流中添加“ 创建表单” 活动。
2. 在“ 属性 ”面板 >“ 表单 字段集合”字段中，单击三点菜单 (fa-ellipsis-v:)。 “ 表单字段集合 ”向导随即打开。
3. 创建一个参数，并使用变量（即 myTable）将其链接到先前创建的表。 将参数 “方向” 设置为“ In/Out ”，将“ 类型 ”设置为“ DataTable”。 为参数 命名 ，例如 table。
   
   

   

   
   

4. 单击“确定”。

   确保未选中“ 生成输入 字段”框。

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

1. 从“ 创建表单” 活动中打开“表单设计器”。
2. 从“ 数据 ”类别中，拖放一个网格组件（即“ 编辑网格 ”和/或“ 数据网格”）。
3. 在网格的“ 字段键” 选项卡中，引用 表格参数 （即 table）。

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

   
   

   

   
   

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

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

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

   
   

   

   
   
5. 保存表单。

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

使用 Bootsrap 3

1. 转到“ 编辑网格组件 ”设置。

2. 在“ 模板 ” 选项卡 >“ 标头模板 ” 部分中，使用以下模板更改默认生成的代码：

   <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. 在“ 模板 ” 选项卡 >“ 行模板 ” 部分中，使用以下模板更改默认生成的代码：

   <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. 将鼠标悬停在“ 编辑网格 ”组件上，然后单击“ 编辑”。 配置页面随即打开。

2. 导航到“ 模板 ” 选项卡。

   2.1. 在 标头模板 脚本中，标识所有 <div class="col-sm-2"> 标签并添加自定义宽度，如下所示： style="width:{your_custom_width}px !important"。 宽度必须以像素为单位。
   2.2. 在行模板 脚本中，识别所有 <div class="col-sm-2"> 标签并添加自定义宽度，如下所示： style="width:{your_custom_width}px !important"。 宽度必须以像素为单位。
   "col-sm-2" 元素表示默认列宽。 您可以通过添加自定义样式标签来修改默认列宽。 例如， style="width:70px !important" 将 70 像素的宽度应用于所有“ 编辑网格 ”列。
   
   

   

   
   
   
   

   

   
   
3. 保存 组件和表单。

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

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. 在“创建表单”活动的“ 属性 ”面板 >“本地 CSS 文件 路径” 字段中，引用先前创建的 CSS 文件。 例如"/file://C:\User\Desktop\EditColumnWidth.css"。
3. 在“ 数据网格 ”组件 > “显示” 选项卡 > “自定义 CSS 类 ”字段中，输入 CSS 类的名称（例如 mygrid）。

示例工作流

要查看完整的工作流或供日后参考，请下载XAML 示例