如何以编程方式将行添加到 appcelerator 中的 TableView

Question

我正在 appcelerator studio 中构建一个应用，并且我使用了合金。

我想从我的控制器向我的 TableView 中插入数据。

所以这是我的 .xml 类

<Alloy>
    <View class="container" >
        <TableView id="table" class="table">
            <TableViewSection id="table" >

            </TableViewSection>
        </TableView>

       <!-- <Button id="button" onClick="doClick"></Button>-->
    </View>
</Alloy>

这是我的控制器

的代码

var view1 = Ti.UI.createView({
          left : 0,
          width : "35%",
          top: "30px"
      });
      var view2 = Ti.UI.createView({
          left : "35%",
          width : "25%",
          top: "30px"
      });
      var view3 = Ti.UI.createView({
          left : "60%",
          width : "25%",
          top: "30px"
      });
      var view4 = Ti.UI.createView({
          left : "85%",
          width : "15%",
          top: "30px"
      });

      view1.add(createHeader(L(lang+"social_history")));
      view2.add(createHeader(L(lang+"start_date")));
      view3.add(createHeader(L(lang+"end_date")));
      view4.add(createHeader(L(lang+"quantity_um")));

var row = Ti.UI.createTableViewRow();
var rowData = [];

row.add(view1);
row.add(view2);
row.add(view3);
row.add(view4);

rowData.push(row);

$.table.data=rowData;

for(var i=0; i<3; i++){
    var myRow = Ti.UI.createTableViewRow({
        id: 'overview',
        height: '47dip'
    });
    var myLabel = Ti.UI.createLabel({
        text: 'Overview',
        top: "0dip",
        height: "47dip",
        left: "5dip",
        right: "5dip",
        font: {
            fontSize: "14dp",
            fontWeight: "bold"
        }
    });

    myRow.add(myLabel);
    // this is working, but directly after displaying this row,
    // the collection is overwriting it again
    $.table.appendRow(myRow);
}




function createHeader(headerText){
   var heading = Ti.UI.createView({
      backgroundColor : "#0c7b84"
   });

   var headingText = $.UI.create("Label", {
       classes: 'headerTableLabel'
   });
   headingText.text = headerText;

   heading.add(headingText);

   return heading;
}

现在在 for 循环中，我想在表中插入 3 行，但如果我尝试运行我的应用程序，我看不到其他行。

我该如何解决？

Answer 1

您应该尝试使用控制器而不是在 JS 中创建行，因为您使用的是 Alloy，例如：

行.xml

<Alloy>
    <TableViewRow id="row">
        <Label id="title"/>
        <ImageView id="icon"/>
    </TableViewRow>
</Alloy>

row.js

var args = arguments[0] || {};

$.row.myValue = args.title;

$.title.text = args.title;

$.icon.image = args.icon;

table.js

var data = [];

var yourArray = [
    {title:'england',icon:'en.png'},
    {title:'portugal',icon:'pt.png'},
    {title:'france',icon:'fr.png'}
];

for(var i in yourArray) data.push(Alloy.createController('row',{
    title:yourArray[i].title,
    icon:yourArray[i].icon
}).getView());

$.table.setData(data);

当你添加行（appendRow）时，之前的TableView数据消失了吗？这很奇怪，您可以这样做作为一种解决方法：

data.push(Alloy.createController('row',{
    title:'spain',
    icon:'es.png'
}).getView());

//data.length = 4
$.table.setData(data);

获取行数据：

$.table.addEventListener('click',function(e) {

    selected_index = e.index;
    selected_row = e.row;
    selected_my_value = e.row.myValue; //see the alloy row controller
});

API Docs: TableView