Question

我有一个sap.ui.table，其中visibleRowCountMode =“ Auto”与JSON模型绑定。

在我的ColumnBinding中，我使用sap.m.text元素作为模板来包装文本（如果它对于columnWidth而言太长）。

如果将行重新绑定到表，似乎该表不会刷新实际高度和行数。

如果行数超过实际屏幕大小，则不会在表中添加滚动条。

我创建了一个bin以显示表的示例代码：

https://jsbin.com/noxaqofeci/edit?html,js,output

->如果您调整列的大小并且表格不适合屏幕，则会出现问题。

我错过了什么吗？或者有什么办法可以解决这个问题？

谢谢！

我的问题的示例代码：

<!DOCTYPE html>
<html><head>
<meta name="description" content="UI5 table example with local JSON 
 model" />
 <meta http-equiv='X-UA-Compatible' content='IE=edge' />
 <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

<title>SAPUI5 Dynamic Table</title>

<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.table'></script>

<script>

var columnData = [{
    columnName: "firstName"
}, {
    columnName: "lastName"
}, {
    columnName: "department"
}];
var rowData = [{
    firstName: "3lines3lines3lines3lines3lines3lines",
    lastName: "empty",
    department: "empty"
}, {
    firstName: "3lines3lines3lines3lines3lines3lines",
    lastName: "empty",
    department: "empty"
},{
    firstName: "3lines3lines3lines3lines3lines3lines",
    lastName: "empty",
    department: "empty"
},{
    firstName: "3lines3lines3lines3lines3lines3lines",
    lastName: "empty",
    department: "empty"
},{
    firstName: "3lines3lines3lines3lines3lines3lines",
    lastName: "empty",
    department: "empty"
},{
    firstName: "3lines3lines3lines3lines3lines3lines",
    lastName: "empty",
    department: "empty"
},{
    firstName: "3lines3lines3lines3lines3lines3lines",
    lastName: "empty",
    department: "empty"
},{
    firstName: "3lines3lines3lines3lines3lines3lines",
    lastName: "empty",
    department: "empty"
},{
    firstName: "3lines3lines3lines3lines3lines3lines",
    lastName: "empty",
    department: "empty"
}];
        var oTable = new sap.ui.table.Table({
    visibleRowCountMode: "Auto"
});
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
    rows: rowData,
    columns: columnData
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(sId, oContext) {
    var columnName = oContext.getObject().columnName;
    return new sap.ui.table.Column({
                width: "120px",
        label: columnName,
        template: new sap.m.Text({text: {path:columnName}})
    });
});
oTable.bindRows("/rows");
      page = new sap.m.Page({content:[
        oTable,new sap.m.Link({text:"Click For More Info",target:"_blank"})
      ]});
      app = new sap.m.App();
app.addPage(page);
app.placeAt("content");
</script>

</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>

Answer 1

问题可以关闭。 Sap.ui.table.table并非旨在动态更改其行高。

https://experience.sap.com/fiori-design-web/grid-table/

->节单元格级别，搜索键：包装

带有文本换行的sap.ui.table.table（呈现问题）

1 个答案: