如何將文本字段值動態添加到數組中？

Question

我有兩個領域像產品和數量。在字段中輸入值之後，它必須存儲在相應的多維數組中。這可以發生多次，因爲無論何時輸入新值，都必須添加現有值並在表格視圖中表示。

Answer 1

鍵入Apple或Orange，然後輸入數字。點擊添加，它會更新表格視圖。如果您沒有在數量中鍵入數字，我不確定會發生什麼，因爲我沒有測試它。

要添加新產品，如香蕉，請鍵入不存在的產品。它會將它添加到數組中，然後再累加所有添加的產品。

本示例始終針對產品名稱的特定情況。

由於這是Titanium代碼，並且只使用基本對象，它應該可以在Android和IOS中工作，但我只測試IOS。

var win = Ti.UI.createWindow({ 
    layout: 'vertical', 
    backgroundColor: "white" 
}); 

var products = [{ 
     productName: "Apple", 
     quantity: 5 
    }, 
    { 
     productName: "Orange", 
     quantity: 10 
    }]; 

var view = Ti.UI.createView({ 
    top: 0, 
    layout: "horizontal", 
    height: Ti.UI.SIZE 
}); 

var productView = Ti.UI.createView({ 
    width: "50%", 
    height: Ti.UI.SIZE, 
    layout: "vertical" 
}); 
view.add(productView); 

var productName = Ti.UI.createLabel({ 
    text: "Product Name:" 
}); 
productView.add(productName); 

var product = Ti.UI.createTextField({ 
    width: "90%", 
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED 
}); 
productView.add(product); 

var quantityView = Ti.UI.createView({ 
    width: "50%", 
    height: Ti.UI.SIZE, 
    layout: "vertical" 
}); 
view.add(quantityView); 

var productQuantity = Ti.UI.createLabel({ 
    text: "Quantity: " 
}); 
quantityView.add(productQuantity); 

var quantity = Ti.UI.createTextField({ 
    width: "90%", 
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED 
}); 

quantityView.add(quantity); 
win.add(view); 

var button = Ti.UI.createButton({ 
    title: "Add", 
    height: Ti.UI.SIZE, 
    width: Ti.UI.SIZE 
}); 
win.add(button); 

function createRow(params){ 
    var row = Ti.UI.createTableViewRow({ 
     height: "50dp", 
     layout: "horizontal" 
    }); 
    var product = Ti.UI.createLabel({ 
     text: params.productName 
    }); 
    row.add(product); 
    var quantity = Ti.UI.createLabel({ 
     left: "20dp", 
     text: params.quantity 
    }); 
    row.add(quantity); 
    return row; 
} 

button.addEventListener('click', function(e){ 
    var index = -1; 
    for(var i = 0; i < products.length; i++){ 
     if(products[i].productName === product.value){ 
      index = i; 
     } 
    } 
    if(index > -1){ 
     products[index].quantity = parseFloat(products[index].quantity) + parseFloat(quantity.value); 
     rows[index] = createRow(products[index]); 

    } else { 
     var newProduct = { 
      productName: product.value, 
      quantity: quantity.value 
     }; 
     products.push(newProduct); 
     rows.push(createRow(newProduct)); 
    } 
    table.setData(rows); 
}); 

var rows = []; 

var table = Ti.UI.createTableView({ 
    top: "10dp" 
}); 
win.add(table); 

for(var i = 0; i < products.length; i++){ 
    rows.push(createRow(products[i])); 
} 

table.setData(rows); 
win.open();