Question

<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>OData Date Table Multiple Sorters</title>
    <link rel="stylesheet" type="text/css" href="">

    <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection">
    </script>
    <script>
    var aColumnData = [{
        columnId: "col1"
    }, {
        columnId: "col2"
    }, {
        columnId: "col3"
    }, {
        columnId: "col4"
    }, {
        columnId: "col5"
    }];


    var aData = [{
        col1: "Row 1 col 1",
        col2: "Row 1 col 2",
        col3: "Row 1 col 3",
        col4: "Row 1 col 4",
        col5: "Row 1 col 5"
    }, {
        col1: "Row 2 col 1",
        col2: "Row 2 col 2",
        col3: "Row 2 col 3",
        col4: "Row 2 col 4",
        col5: "Row 2 col 5"
    }];
    var oModel = new sap.ui.model.json.JSONModel();

    oModel.setData({
        columns: aColumnData,
        rows: aData
    });

    var oTable = new sap.ui.table.Table({
        title: "Table column and data binding",
        showNoData : true,  
        columnHeaderHeight : 10,
        visibleRowCount: 7
    });
    oTable.setModel(oModel);
    oTable.bindColumns("/columns", function(index, context) {
         var sColumnId = context.getObject().columnId;
         //alert(sColumnId.);
        return new sap.ui.table.Column({
            id : sColumnId,
            label: sColumnId, 
           // template: sColumnId, 
          template: new sap.ui.commons.Button({
                                text : sColumnId,
                                icon : 
                                     "sap-icon://accept",
                                enabled: true,
                                press: function(e) {

                      }}),
            sortProperty: sColumnId, 
            filterProperty: sColumnId
        });
    });
    oTable.bindRows("/rows");
    oTable.placeAt("content");
    </script>

</head>

<body class="sapUiBody" id="body" role="application">
    <div id="content"></div>
</body>

</html>

而不是列值作为Button文本，我得到列名称。但是，如果我将模板值从按钮更改为sColumnId，如下所述，我得到输出正确：

template: sColumnId,

以下是jsbin：http://jsbin.com/horozew/edit?html,output

的链接

Answer 1

您可以将文字字符串指定给按钮的text属性。相反，您必须将按钮的text属性绑定到模型，并将sColumnId绑定为绑定路径：

text: { path: sColumnId }

请参阅jsbin。

如果将字符串分配给列的模板聚合，该列将创建一个TextView，并将其text属性与给定的字符串绑定为路径in its setter。

编辑：评论中要求的更多信息。

您已将表的列绑定到数据源（来自模型路径 / columns 的aColumnData的数据）。在您将bindColumns()作为第二个参数的函数中，您可以为表创建Column个对象。为aColumnData中的每个项调用该函数。然后，您可以创建模板 - Button - 并将其值绑定到模型，指定相对路径（相对于 / rows ）。

然后将表的行绑定到数据源（来自模型路径 / rows 的aData的数据）。对于aData中的每个项目，将创建一行。每一行都有一个绑定Context，它指向相应的aData条目并启用该行内的相对路径。

将为每行克隆您之前创建的每个列的模板。此时，您可以访问单个单元格的数据。

一种非常简单的方法是格式化函数：

text: { 
  path: sColumnId, 
  formatter: function(value){ 
    return "Hi " + value ; 
  } 
}

编辑：同时访问值和列ID

感谢javascript闭包，您可以执行以下操作来访问两者 - sColumnId和单元格值（jsbin）：

     template: new sap.ui.commons.Button({
                            text : {path: sColumnId },
                            icon : {path: sColumnId, formatter: function(value) { if (sColumnId === "col2" && value > "Row 2") return "sap-icon://accept"; else return "" } },
                            enabled: true,
                            press: function(e) {

                  }}),

动态地在Openui5表中向列添加列和按钮

1 个答案: