2016-05-06 11 views
0

SAPUI5にフロントエンドプログラムを作成しています。これは、ユーザーが(charや数字のような)データをテーブルに入力してから、さらにクリックするとデータを読み取ることができるはずですボタン上で "submit"sapui5のテーブルからユーザー入力を読み取る

私がこれまで見たことは、選択された行からデータを取得することに関連するすべてでした。

私はこの分野では本当に新しいので、何か助けに感謝します!

私はsap.ui.commons.table.Tableを使用しています。テーブルは最初にJSONファイルからデータを取得しますが、バインディングをテストするために行っています。

//data definition: 
var oPosData = [{PoItemI : "0010"}]; 

//Table: 
var oTable = new sap.ui.table.Table("PoData",{ 
    //title: "Positionsdetails", 
    visiblRowCount: 5, 
    firstVisibleRow: 3, 
    selectionMode: sap.ui.table.SelectionMode.Single 
}); 

// For simplicity, i will just ad 1 column to the table. but i have more 
//Positionsnummer: 
    var oColumn_PosNr = new sap.ui.table.Column("PosNr",{ 
    label: new sap.ui.commons.Label({text: "Position"}), 
    //template: new sap.ui.commons.TextView().bindProperty("text", "Positionsnummer"), 
    template: Input1 = new sap.ui.commons.TextField("PosNrTF",{ 
     key: "text", 
     value: "{PoItemI}" 
    }), 
    //sortProperty: "Positionsnummer", 
    //filterProperty: "Positionsnummer", 
    width: "200px" 
}); 

//Input1.setValue("Bla"); Input1.getValue()); 
//Input1.attachChange(function(oEvent) { 
    var output = oEvent.getSource().getBindingContext().getPath(); 
    alert('Text changed to : '+ output); 
    console.log(output) 
}); 
oTable.addColumn(oColumn_PosNr); 

//Create a model and bind the table rows to this model 
var oModel_Item = new sap.ui.model.json.JSONModel(); 
oModel_Item.setData({modelData: oPosData}); 
oTable.setModel(oModel_Item); 
oTable.bindRows("/modelData"); 

このテーブルコントロールでは間違っていますか?あるいは、私は拘束力のない間違っているのですか私はそれを読むことを試みるときに動作しません。

また、コントロールのバインディング部分を抽出する際に問題が発生しています。

// Submit button 
// I would be happy if this button prints me the value, that is stored in the 
//table 

var oButton1 = new sap.ui.commons.Button({ 
text : "Submit", 
style: sap.ui.commons.ButtonStyle.Emph, 
width: '50%', 
//tooltip : "", 
//press : function() {alert('Pressed me' +);} 
press : function() { 

var table_model = sap.ui.getCore().getControl("PoData").getModel();//.getPath();//.getPath(); 
var table_row = sap.ui.getCore().getControl("PoData").getRows()[1].getCells()[1];//.getValue(); 
var table_path = sap.ui.getCore().getControl("PosNrTF").getBindingContext(table_model);//.getPath(); 
var table_column_LABEL = oTable.getColumns()[0].getLabel().mProperties.text; 
var table_column_template = oTable.getColumns()[0][1];//getBindingContext(); 

alert(table_column_LABEL); 
alert(table_model); 
alert(table_row); 
alert(table_path); 
alert(table_column_template); 

}, 
layoutData : new sap.ui.layout.GridData({ 
    indent: "L5 M5", 
    span: "L1 M6 S12" 
}) 

}); 

カラムのテンプレート部分に格納されている値を取得できません。

列の代わりに表に行を追加するようなやり方でやりますか?私はCustomDataまたはの内容のコンテンツを入手しましたが、これを使用する方法がわからなくて、これが問題を解決するかどうかわかりませんでしたか?ユーザーが入力またはバインディングするデータに興味があるだけであれば、バインディングを使用すべきかどうかは、双方向バインディング(これを行う方法が分かりません)によって「値を自動的に更新する」ことによって助けになります。

答えて

0

私はあなたの説明が明確ではないので、少し困惑している、しかし、のは、あなたのコードにいくつかの貴重なコメントを見てみましょう:すべての

  • まず、私はのためにsap.m.Tableオブジェクトを使用することをお勧めします生産的な使用になるとテーブルが作成されます。これは応答性が高く、モバイルデバイスをサポートしており、公式のFioriアプリケーションでも広く使用され、維持されています。
  • バインディングが機能しています。 JSONModelはデフォルトで双方向バインディングに設定されています(ただし、プロジェクトのブートストラップセクションが表示されていることを確認してください)。入力に入力されたデータは、モデルで自動的に更新されます。したがって、情報を転送する送信ボタンを作成する場合は、表、行、または列にアクセスする必要はありません。 JSONモデルを処理するだけです。
  • //Input1.attachChange(function(oEvent) { var output = oEvent.getSource().getBindingContext().getPath(); alert('Text changed to : '+ output); console.log(output) }); このイベントハンドラは、新しい値自体(oEvent.getParameter("newValue"))を含むoEventオブジェクトを提供します。フィールドに割り当てられたモデルからオブジェクトを取得する場合は、次のコードスニペットを使用します。oTable.getModel().getProperty(output);

  • テーブルに列を追加する必要はありません。これは、行の集計に作成された集約バインディングによって行われます。

  • CustomDataは、(UI)要素にデータを添付し、後で(非表示のプロパティのように)取得するために使用されます。このシナリオでは、これを使用する必要はありません。
  • ほとんどの場合、バインディングが適しています。後で、バインディングとデータ型を使用してフォームを検証できます。集計(テーブル行、リスト要素など)にも最適なソリューションです。だから私はそれを使用することをお勧めします。
+0

こんにちはnistv4nと助けてくれてありがとう!!! 私は値を印刷/警告したとき、それは空白でした。私は昨日の夜、私がここに置く回避策を見つけました。私が行った変更は、最初のテーブル自身を編集できるようにすることでした(カラムだけでなく)。私はこれがどのように影響を受けているのか分かりませんが、その後、私は単に追加するボタンを追加しました。私は単に新しい初期データをデータフィールドにプッシュするためにプッシュを使用しました。 –

0

こんにちはnistv4nと助けてくれてありがとう!

私は値を印刷した/警告したとき、それは空白でした。私は昨日の夜、私がここに置く回避策を見つけました。私が行った変更は、最初のテーブル自身を編集できるようにすることでした(カラムだけでなく)。私はこれがどのように影響を受けているのかわかりませんが、その後、データフィールドに新しい初期データをプッシュするために単純にプッシュを使用する「追加」ボタンを追加しました

oPosData.push PosItemA: "init"}); それから私はそれをテーブルに結合するモデルを更新しました oModel_Item.setData({modelData:oPosData}); これは、私が好きな方法を編集できる新しい行を作成することを余儀なくされ、単純にoPosData [作成した行のインデックス]でデータを取得することができました.PosItemI

私は、 oPosData内のすべてのデータにアクセスできるようにするには、追加ボタンをクリックしてください。

関連する問題