活动
最新
False
在“编辑网格”中自定义列宽 - 其他
横幅背景图像
徽标
工作流活动
上次更新日期 2024年2月23日

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

本教程演示如何修改“编辑网格”中最后一列的宽度。
先决条件:要执行本教程中的步骤,请创建一个数据表。 确保表格最后一列的内容长度超过五到六个单词。
  1. 在工作流中添加“ 构建数据表” 活动。
  2. 打开“ 构建数据表 ”向导,然后为表添加所需的列。
    注意: 确保列中没有空格或特殊字符,因为稍后您将使用这些名称通过 属性名称来链接表单中的列。
  3. 将数据表保存到变量中。 对于此示例,您可以将其命名为 dataTable


  1. 在表单中添加“ 编辑网格 ”,然后使用数据表变量的名称 (dataTable) 作为组件的 属性名称
  2. 根据数据表中的列及其值,将组件添加到“ 编辑网格”中。 这些组件的 属性名称 是数据表中列的确切名称。
    在此示例中,添加三个 文本字段 组件。 对组件使用以下 属性名称column1column2column3
  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><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><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. 保存组件和表单。
支持和服务图标
获取您需要的帮助
UiPath Academy 图标
了解 RPA - 自动化课程
UiPath 论坛图标
UiPath Community 论坛
Uipath 白色徽标
信任与安全
© 2005-2024 UiPath. All rights reserved.