Чтение пользовательского ввода из таблицы в sapui5

Question

Я пишу интерфейсную программу в SAPUI5, которая должна позволять пользователю вводить данные (например, char или числа) в таблицу, а затем, кроме того, читать данные после нажатия на кнопку «отправить»

То, что я видел до сих пор, было связано с получением данных из выбранной строки.

Я действительно новичок в этом поле, поэтому я ценю любую помощь!

Я использую 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 или Контент, но не знаю, как его использовать, и если это решает проблему ?! Должен ли я использовать привязку вообще, если меня просто интересуют данные, которые пользователь вводит или привязывает, поможет мне «автоматически обновлять значение» с помощью двусторонней привязки (не знаю, как это сделать).

Answer 1

Я немного смущен, потому что ваше объяснение не понятно, но давайте рассмотрим некоторые ценные комментарии в коде:

• Прежде всего, я бы рекомендовал использовать 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, который содержит новое значение (oEvent.getParameter("newValue")). Если вы хотите получить объект из модели, назначенной этому полю, вы получите этот фрагмент кода: oTable.getModel().getProperty(output);

• Вам не нужно добавлять столбцы в таблицу; это делается путем привязки агрегации, созданной для агрегации строк.

• CustomData используется для присоединения данных к элементу (UI) и получения его позже (например, скрытых свойств). Вы не должны использовать его в этом сценарии.
• Связывание является хорошим выбором в большинстве случаев. Позже вы можете использовать привязки и типы данных для проверки формы; это также отличное решение для агрегации (строки таблицы, элементы списка и т. д.). Поэтому я бы рекомендовал его использовать.

Answer 2

Hi nistv4n и спасибо за помощь!

Когда я печатал/предупреждал значение, оно было пустым. Я нашел вчера вечером обходной путь, который я стану здесь. Изменения, которые я внес, заключались в том, чтобы сделать первую мою таблицу самой редактируемой (и не только столбцами). Я не знаю, как это повлияло на это, но затем я добавил кнопку «добавить», где я просто использовал push для ввода новых исходных данных в свое поле данных,

что-то вроде oPosData.push ({ PosItemA: «init»}); , а затем я обновил модель, которая привязывает ее к таблице oModel_Item.setData ({modelData: oPosData}); Это заставило его создать новую строку, которую я мог бы изменить, как мне понравилось, и я смог получить данные просто oPosData [индекс созданной строки] .PosItemI

Я использовал счетчик каждый раз, когда я нажал добавить кнопку, чтобы иметь доступ ко всем данным в oPosData