Question

我正在使用控制器中的sap.m.Table创建一个表。如何调整表格的行大小？

我正在使用sap.m.ColumnListItem添加每一行，但是表格没有提供任何选项，或者ColumnListItem没有提供调整行高的选项

onDataGotFromServer : function(data){
    var table = new sap.m.Table({
        showSeparators: "None"
    });
    var column1 = new sap.m.Column();
    var column2 = new sap.m.Column();
    table.addColumn(column1);
    table.addColumn(column2);
    for( var i=0; i < data.length; i++ ) {
        var eachData = data[i];
        var columnListItem = new sap.m.ColumnListItem({
            cells:[
                new sap.m.Text({
                    text: eachData.key
                }),
                new sap.m.Text({
                    text: eachData.value
                })
            ]
        });
        table.addItem(columnListItem);
    }
    this._layout.addContent(table);         
}

以下是演示代码：https://plnkr.co/edit/sKYK9R5a5fFJdJ8D68GF?p=preview

Answer 1

这是解决此问题的另一种快速方法：

您可以使用HBox或VBox放置文本，然后在HBox上应用高度。以下是您的窃听器示例。

var columnListItem = new sap.m.ColumnListItem({
  cells: [

    new sap.m.HBox({
      height: "60px",
      items: [
        new sap.m.Text({
          text: "Test1"
        })
      ]
    }),
    new sap.m.HBox({
      items: [
        new sap.m.Text({
          text: "Test2"
        })
      ]
    })
  ]
});

让我知道这是否有帮助！

Answer 2

根据sap.m.ColumnListItem的API参考，没有提供用于宽度设置的属性。

但是您可以将css与唯一的IDs一起用于columnListItems，以控制单个单元格。

sap.ui.define([
  "sap/m/Text", "sap/m/Column", "sap/m/ColumnListItem", "sap/m/Table"

], function(Text, Column, ColumnListItem, Table) {
  "use strict";

  var table = new Table({
    width: "50%",
    showSeparators: "None"
  }).placeAt("content");

  var column1 = new Column();
  var column2 = new Column();
  table.addColumn(column1);
  table.addColumn(column2);

  for (var i = 0; i < 10; i++) {

    var columnListItem = new ColumnListItem("cols" + i, {
      vAlign: "Middle",
      cells: [
        new Text({
          text: "Test1",
          width: "3rem"

        }),
        new Text({
          text: "Test2",
          width: "3rem"
        })
      ]
    });
    table.addItem(columnListItem);
  }
});

/* Styles go here */

.sapMListTbl {
  width: 70% !important
}

.sapMListTblRow {
  height: 2rem !important;
}

.sapMListTblCell {
  text-align: center !important;
}

#cols0 { /* Row 1 */
  text-align: left !important;
  background: aqua;
  height: 5rem !important;
}

#cols1_cell1 { /* Row 2, cell2 */
   background: yellow;
}

<title>SAPUI5 Walkthrough</title>
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge" data-sap-ui-async="true" data-sap-ui-resourceroots='{
			"sap.ui.demo.walkthrough": "./"
		}'>
</script>

<body class="sapUiBody" id="content">
</body>

希望有帮助。

我们如何调整sap.m.table中行的高度？

2 个答案: