如何在 SAPUI5 中的 table 列上创建链接

Question

谁能告诉我如何在 table 列内容（仅两列）上创建 links，这些内容来自 ODATA 服务，在按下任何内容后，它应该转到特定的 link?

例如。假设每个 table 内容都有 {mainUrl} 和

对于第 1 列：深 Link: /bb/ccc/eee?reqid = 示例 URL：{mainUrl}/bb/ccc/eee?reqid=6000

对于第 2 列：深 Link: /bb/cc/fff?jobid= 示例：{mainUrl}/bb/cc/fff?jobid=4000

我尝试了几个示例：ex-1, 。但我不确定如何为这种情况修复它。如果可能的话，如果您能提供一些示例代码，我将不胜感激。

提前致谢。

Answer 1

如何在 table 列上创建 link 的简单示例基于 Link - Subtle 示例。

在/mockdata/products.json中为每个'ProductPicUrl'字段值删除一个主机名'https://openui5.hana.ondemand.com'.
因此列中的 link 得到了开发服务器的 host，例如 'http://localhost:8081/test-resources/sap/ui/documentation/sdk/images/HT-2001.jpg'

在 Link.view.xml 视图中通过添加更改第一列内容格式化函数见 Walkthrough Step 22: Custom Formatters:

<ColumnListItem>
  <Link
    text="{Name}"
    href="{
      path: 'ProductPicUrl',
      formatter: '.hrefFormatter'
    }" />

并在 Link.view.xml 控制器文件中实现格式化程序：

hrefFormatter: function(sUrl) {
    var mainUrl = 'https://openui5.hana.ondemand.com';
    return mainUrl + sUrl;
}

使用格式化程序提供修改后的 link URL: 'https://openui5.hana.ondemand.com/test-resources/sap/ui/documentation/sdk/images/HT-1002.jpg'

Answer 2

我已经通过在 JS 文件中编写代码解决了这个问题：

createAllColumns: function () {
.....
.....
 var oTemplate = new Text({
                        text: sText,
                        wrapping: false
                    }); // for default columns

                    if (oChar.charId === "columnID") {
                        oTemplate = new Link({
                            text: sText,
                            press: this.readTheID
                        });
                    }
......
......
},

readTheID: function (oEvent) {
            const oBind = oEvent.getSource().getParent().getBindingContext("service name");
            const obj = oBind.getObject().columnID;
            const value = oEvent.getSource().getProperty("text");

            return models.getInstance().getOdataWrapper().getEntitySet({
                path: "/OdataServiceEntitySet",
                filters: [new Filter({ path: "name", operator: FilterOperator.EQ, value1: "mainUrl" }),
                new Filter({ path: "columnID", operator: FilterOperator.EQ, value1: obj })],
                And: true
            }).then((odata) => {
                if (odata.length > 0) {
                    var mainLink = odata[0].getObject().value;
                    sap.ui.require([
                        "sap/m/library"
                    ], sapMLib => sapMLib.URLHelper.redirect(mainLink + "/bb/ccc/eee?reqid=" + value, /*new window*/true));
                }
            }).catch((err) => {
                sap.m.MessageToast.show("Failed");
            });

        },

注意：“sap/m/Link”产生动态links。在那种情况下，我们不能将 link 保留到列内容中，这就是为什么用户不能直接从内容中复制 link。

如何在 SAPUI5 中的 table 列上创建链接

How to create links on the column of table in SAPUI5

javascript

sapui5