0

我正在使用 appcelerator studio 构建一个简单的应用程序。然后我想在我的窗口中创建一个 TableView，当用户单击一行时，我想用其他行展开该行。

所以我想实现像 Android 这样的可扩展列表行。

这是我的 .js 代码：

var ds = arguments[0] || {};
//header table

      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+"kinship")));
      view2.add(createHeader(L(lang+"sex")));
      view3.add(createHeader(L(lang+"date_of_birthday")));
      view4.add(createHeader(L(lang+"observation")));

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

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


//CONTENUTO DELLA TABELLA
var argsView = [];
var row;

//1 COLONNA
var argView = {
    left : 0,     width : "35%", height: Ti.UI.Size, backgroundColor : "#44b7e3"   
};
row = {
    view : argView,
    text: "Gastric fundectomy"
};
argsView.push(row);
//2 COLONNA
argView = {
    left : "35%", width : "25%", height: Ti.UI.Size, backgroundColor : "#44b7e3"   
};
row = {
    view : argView,
    text: "13-06-2016"
};
argsView.push(row);
//3 COLONNA
argView = {
    left : "60%", width : "25%", height: Ti.UI.Size, backgroundColor : "#44b7e3"  
};
row = {
    view : argView,
    text: "16-06-2016"
};
argsView.push(row);
//4 COLONNA
argView = {
    left : "85%", width : "15%", height: Ti.UI.Size, backgroundColor : "#44b7e3" 
};
row = {
    view : argView,
    text: "procedure"
};
argsView.push(row);

//stampo la riga in pagina
rowData.push(createRow(argsView));

$.table.data=rowData;



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;
}


function createRow(arrayViewRow)
{
    // Create Table Row
    var tableRow = Ti.UI.createTableViewRow({ height: 50 });

    for (i=0; i<arrayViewRow.length; i++) {
        //a questo punto conosco quante colonne avrà la mia tabella
        var view = arrayViewRow[i];     
            //creo le colonne
            var colonnaView   = Ti.UI.createView(view.view);
            colonnaView.add($.UI.create("Label", {
               classes: 'bodyTableLabel',
               text : view.text
           }));
            tableRow.add(colonnaView);
    } 
    return tableRow;
}

因此，使用此代码，我可以看到带有行的表，但我无法插入可扩展列表行。

我该如何解决？

4

1 回答 1

0

您可以在 iOS 中尝试以下代码以获取可展开和可折叠的 tableview 行。

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

});

var layout = [{
title : "Parent 1",
isparent : true,
opened : false,
sub : [{
    title : "Child 1"
}, {
    title : "Child 2"
}]
}, {
title : "Parent 2",
isparent : true,
opened : false,
sub : [{
    title : "Child 3"
}, {
    title : "Child 4"
}]
}];
var tableView = Ti.UI.createTableView({
style : Titanium.UI.iPhone.TableViewStyle.GROUPED,
top : 0,
height : Ti.Platform.displayCaps.platformHeight,
data : layout

});

tableView.addEventListener("click", function(e) {

//Is this a parent cell?
if (e.row.isparent) {

    //Is it opened?
    if (e.row.opened) {
        for (var i = e.row.sub.length; i > 0; i = i - 1) {
            tableView.deleteRow(e.index + i);
        }
        e.row.opened = false;
    } else {
        //Add teh children.
        var currentIndex = e.index;
        for (var i = 0; i < e.row.sub.length; i++) {
            tableView.insertRowAfter(currentIndex, e.row.sub[i]);
            currentIndex++;
        }
        e.row.opened = true;
    }

}

});

container.add(tableView);
win.add(container);
win.open();
于 2016-06-20T20:25:56.403 回答