Question

我想在appcelerator应用程序中插入一个Expandable TableView。所以我找到了这段代码：

var FoodBank = [];


function Food(head, backgroundColor, parentIndex, expand, childs){//Food object
    this.title =                 head;
    this.backgroundColor =         backgroundColor;
    this.parentIndex =             parentIndex;
    this.expand =                 expand;
    this.childs =                 childs;
    this.rightImage =             "/images/rowArrowRight.png";
}

function EmptyRow(){//EmptyRow object
    this.backgroundColor = "green";//change this to transparent to make the rows invisible
    this.selectedBackgroundColor = "transparent";
    this.ignore = true;
}

var fruit = new Food("Fruit", "transparent", 0, true, [
    {name:"Apple"},
    {name:"Mango",},
    {name:"Banana"},
    {name:"Orange"}]
);

var vegetable = new Food("Vegetable", "transparent", 1, true, [
    {name:"Carrot"},
    {name:"Potatoe"},
    {name:"Bringal"},
    {name:"Cabbage"}]
);

FoodBank.push(fruit);
FoodBank.push(vegetable);

for(var i = 0; i <= 4; i++)//add EmptyRow objects to the FoodBank. It needs 5 EmptyRow objects to escape the ugly animation which you get with too few tableViewRows
    FoodBank.push(new EmptyRow());//this also bypasses the no row found error

var table = Ti.UI.createTableView({
  data:                    FoodBank,
  height:                 Ti.UI.FILL,
  layout:                 "vertical",
  separatorColor:         "transparent",
  backgroundColor:        "transparent"
});  

 /**
  * Event listener on table which handles the expanding/ collapsing of the childs. 
  * Parsing to int because the event callback is String. Int is needed to define next row index in insertRowAfter(); 
  * Also handles child clicks.
  */
table.addEventListener("click", function(e){
    if(e.rowData.ignore){//empty row click
        console.log("Ignored");  
        return;//do nothing
    }
    var index = parseInt(e.index);//e callback is String, parse to int        
    var tableItem = e.rowData;//get table data    
    var parentIndex = parseInt(tableItem.parentIndex);//get parent index and parse to int
    if(!parentIndex && index > 0){//clicked child
        console.log("You've clicked child " + index);
        return;
    }
    if(tableItem.expand){//if expand is true expand the elements
        tableItem.expand = false;//will collapse on next click       
        tableItem.rightImage = "/images/rowArrowDown.png";
        for(var i in tableItem.childs){//loop through childs
            var child = tableItem.childs[i];//fetch child
            var row = Ti.UI.createTableViewRow({
                layout:             "vertical",
                height:             44,
                backgroundColor:     "pink"
            });
            var label = Ti.UI.createLabel({
                text:                 child.name,//set name
                height:                Ti.UI.SIZE,
                color:                "red",
                font:                 {
                                        fontWeight:"bold",
                                    }
            });             
            row.add(label);       
            table.insertRowAfter(parseInt(i) + index, row);
        }        
        console.log("Expanded parent " + index);
    }else if(!tableItem.expand){//if expand is false collapse the elements
        tableItem.expand = true;//will expand on next click
        tableItem.rightImage = "/images/rowArrowRight.png";
        for(var i in tableItem.childs)//loop through childs
            table.deleteRow(index + 1);   
        console.log("Collapsed parent " + index);     
    }
}); 

$.container.add(table);

如果我尝试运行我的应用程序，我可以看到两行，如果我尝试点击其中一行，我可以看到这一行的孩子，这没关系。但是，如果我尝试重新单击父行，则不会删除子项，但代码会插入其他子项，这是不正确的。

我已在此行中进行调试：

if(tableItem.expand){//if expand is true expand the elements
        tableItem.expand = false;//will collapse on next click

之后是execute，值为expand = false，但如果我尝试单击此行，则tableItem.expand的值为true。所以对于这个，行不会崩溃，但每次都会扩展

Answer 1

我有一个针对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) {

//这是父细胞吗？ 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();

如何在appcelerator中折叠tableview

1 个答案: