活动
最新
False
横幅背景图像
工作流活动
上次更新日期 2024年2月23日

自定义列宽

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

教程

下一教程将提供有关如何在另存为 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. 将文本组件添加到网格中,以复制表格中的列。 保存每个文本组件。

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

    字段键 ”值区分大小写。



  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><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><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%;
    }.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 示例

此页面是否有帮助?

获取您需要的帮助
了解 RPA - 自动化课程
UiPath Community 论坛
Uipath 白色徽标
信任与安全
© 2005-2024 UiPath. All rights reserved.