开源前端框架 OpenUI5 SmartTable column 的个性化设置使用概述

举报
Jerry Wang 发表于 2023/03/16 23:44:59 2023/03/16
【摘要】 SmartTable 控件根据 OData 元数据和指定的配置创建一个表。 必须指定 entitySet 属性才能使用该控件。 此属性用于从 OData 元数据中获取字段,从中生成列; 它还可以用于获取实际的表数据。基于 tableType 属性,此控件运行时将被渲染成标准、分析、树或响应表等实际控件。SmartTable 控件支持相关实体集引用的货币和单位自定义。Open UI5 框架会自...

SmartTable 控件根据 OData 元数据和指定的配置创建一个表。 必须指定 entitySet 属性才能使用该控件。 此属性用于从 OData 元数据中获取字段,从中生成列; 它还可以用于获取实际的表数据。
基于 tableType 属性,此控件运行时将被渲染成标准、分析、树或响应表等实际控件。

SmartTable 控件支持相关实体集引用的货币和单位自定义。Open UI5 框架会自动请求这些相关的代码列表,然后用于格式化货币和单位单元格模板。

SmartTable 控件提供了一个名为 preserveDecimals 的全局 customData 设置,可用于配置 preserveDecimals 格式选项。

customData 的默认值为 preserveDecimals=true。 然后,此 customData 用于格式化 Edm.Decimal 类型以及货币和单位单元格模板。

如果小数位数与代码列表返回的值不同,则无法保证货币和单位值的小数点对齐。
包含空白字符的字符串类型的单元格数据被替换为 unicode 字符,以在 UI 上可视化空白。 这是默认启用的。

有朋友咨询:

如何为自定义列启用个性化,它们与常规列有何不同,尤其是在与个性化设置或电子表格导出一起使用时?

You can specify custom data for the personalization of the columns in your table as shown in the examples.

可以通过指定 custom data 的方式,来实现 table column 的定制化。

<table:Column id="Ledger" minScreenWidth="Tablet" demandPopin="true">
    <table:customData>
        <core:CustomData key="p13nData"
            value='\{"columnKey": "Ledger", "leadingProperty":"Ledger",
            "additionalProperty":"LedgerName", "sortProperty": "Ledger",
            "filterProperty": "Ledger", "type":"numeric"}' />
    </table:customData>
    <Label text="Ledger" />
    <table:template>
        <Text text="{Ledger}" />
    </table:template>
</table:Column>

为了使用 OpenUI5 shortcut notation, 将下列命名空间片段添加到 XML view 里:

xmlns:customData="http://schemas.Open.com/Openui5/extension/Open.ui.core.CustomData/1"

使用 shortcut notation 之后的版本:

<table:Column id="CompanyCode" minScreenWidth="Tablet" demandPopin="true"
    customData:p13nData='\{"columnKey": "CompanyCode", "leadingProperty":"CompanyCode", "additionalProperty":"CompanyName","sortProperty": "CompanyCode", "filterProperty": "CompanyCode", "type":"numeric", "maxLength":"4"}'>
    <Label text="Company Code" />
    <table:template>
        <Text text="{CompanyCode}" />
    </table:template>
</table:Column>

p13nData object 里可以指定下列属性:

  • columnKey:用于保存、检索或应用列个性化的唯一键。
  • leadingProperty:当列可见时,从后端系统检索此处指定的 OData 属性的数据。 必须使用 OData 模型属性名称。
  • additionalProperty:如果列可见,则必须请求属性。 必须使用 OData 模型属性名称。 可以在此处将多个属性名称指定为逗号分隔值 (CSV)。
  • sortProperty:根据指定的列对表进行排序。 必须使用 OData 模型属性名称。 此属性类似于网格表的 Open.ui.table.Column 的 sortProperty,只有在后者不支持此功能时才必须使用。
  • filterProperty:使用已定义的条件过滤表。 必须使用 OData 模型属性名称。 此属性类似于网格表的 Open.ui.table.Column 的 filterProperty,只有在后者不支持此功能时才必须使用。
  • isGroupable:自动在“视图设置”对话框的“组”面板中显示一个字段; 否则,只有在表(行)绑定后,字段才可能变得可见。 只有 AnalyticalTable 类型需要此属性。如果字段可排序、可筛选和维度,则 SmartTable 会自动将此属性设置为 true。
  • type:确定控件的类型; 它的值可以是日期、时间、布尔值、数字、字符串日期、字符串或未定义。 控件将根据类型进行调整。 stringdate 用于导出带有 IsCalendarDate 注释的字段。
  • maxLength:用于限制输入字段中的条目数的数值
  • precision:精度的数值
  • scale:比例的数值
  • nullable:定义一个字段是否可以没有值(然后与空值过滤相关)。 控件的使用者可以使用字符串值 false 来指示该字段不可为空。 默认值可以为空。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。