Openui5テーブルの列とボタンを動的に追加する

<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>

ボタンのテキストとしての列の値の代わりに、列の名前を取得します。下に述べたように、私は、出力が正しい取得ボタンからsColumnIdにテンプレートの値を変更した場合でも：Openui5テーブルの列とボタンを動的に追加する

template: sColumnId,

ここjsbinためのリンクです：http://jsbin.com/horozew/edit?html,output

出典

2016-03-22 SiddP

あなたののtextプロパティに文字列リテラルを代入ボタン。は、代わりに、結合パスとしてごsColumnIdとモデルに、ボタンのTextプロパティをバインドする必要があります。

text: { path: sColumnId }

はjsbinを参照してください。

列のテンプレート集約に文字列を割り当てる場合、列はTextViewを作成し、テキストプロパティを指定された文字列でパスin its setterとしてバインドします。

編集：コメントでさらに詳しい情報が必要です。

テーブルの列をデータソース（モデルパス/のaColumnDataのデータ）にバインドしました。 2番目のパラメータとしてbindColumns()に与える関数では、テーブルのオブジェクトをColumn作成します。この関数はaColumnDataの各項目に対して呼び出されます。これでテンプレート（Button）が作成され、相対パス（/行からの相対パス）を指定してその値がモデルにバインドされます。

次に、テーブルの行をデータソース（aDataのモデルパス/行のデータ）にバインドします。 aDataの各項目に対して行が作成されます。各行は対応するaDataエントリを指すバインドContextを取得し、行内の相対パスを有効にします。

以前に作成した各列のテンプレートは、各行ごとに複製されます。この時点で、単一のセルのデータにアクセスできます。

それを行うには非常に簡単な方法は、フォーマッタ関数です：

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) { 

        }}),

出典

2016-03-22 11:32:04 schnoedel

ありがとうございました！これはうまくいきました – SiddP

もし 'sColumnId.get（）'が私に値 'Col1Row1'を与えるような値を得たいのであれば、そうすることが可能です。 – SiddP

'oText = sap.ui.table.TableHelper.createTextView（{テキスト：{パス：sColumnId}}）; alert（oText.getText（））; 'なぜこのようなものは動作しません。 – SiddP

Openui5テーブルの列とボタンを動的に追加する

答えて

関連する問題