Please refer below example code.it should be useful. refer this JS Bin - Collaborative JavaScript Debugging
and Add Row in a SAPUI5 Table using xmlModel | SCN
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Add Rows in Table without Data </title>
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
- <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_bluecrystal">
- </script>
- <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs'if required -->
- <script>
- // Model Data (local)
- var aData = [{ID: "1", lname: "Vijay", fname: "Kalluri"},
- {ID: "2", lname: "Shyamu", fname: "K"}];
- // Define a table
- var oTable = new sap.ui.table.Table({
- title: "Line Items",
- visibleRowCount: 7,
- firstVisibleRow: 3,
- selectionMode: sap.ui.table.SelectionMode.Single,
- toolbar: new sap.ui.commons.Toolbar({items: [
- new sap.ui.commons.Button({
- text: "Addnew",
- style: sap.ui.commons.ButtonStyle.Accept,
- press: function() {
- var modelData = oModel.getData();
- var rowCount = modelData.modelData.length;
- rowCount = rowCount + 1;
- aData.push({ID: rowCount, lname: " "}); // Push data to Model
- oModel.setData({modelData: aData}); // Set Model
- }})
- ]}),
- });
- oTable.addColumn(new sap.ui.table.Column({
- label: new sap.ui.commons.Label({
- text: "ID"
- }),
- template: new sap.ui.commons.TextField({
- value: '{ID}',
- }),
- sortProperty: "ID",
- filterProperty: "ID",
- width: "125px"
- }));
- oTable.addColumn(new sap.ui.table.Column({
- label: new sap.ui.commons.Label({
- text: "Last Name"
- }),
- template: new sap.ui.commons.TextField({
- value: '{lname}',
- }),
- sortProperty: "lname",
- filterProperty: "lname",
- width: "125px"
- }));
- oTable.addColumn(new sap.ui.table.Column({
- label: new sap.ui.commons.Label({
- text: "First Name"
- }),
- template: new sap.ui.commons.TextField({
- value: '{fname}',
- }),
- sortProperty: "fname",
- filterProperty: "fname",
- width: "125px"
- }));
- //Create a model and bind the table rows to this model
- var oModel = new sap.ui.model.json.JSONModel(); // created a JSON model
- oModel.setData({ // Set the data to the model using the JSON object defined already
- modelData: aData
- });
- oTable.setModel(oModel);
- oTable.bindRows("/modelData"); // binding all the rows into the model
- //Place the Table on the UI
- oTable.placeAt("MemTable");
- </script>
- </head>
- <body class="sapUiBody">
- <div id="MemTable"></div>
- </body>
- </html>
Kindly let me know if you need any more information