Wie zu implementieren erweiterbare Liste Zeile in appcelerator

Question

Ich baue eine einfache Anwendung mit appcelerator Studio. Dann möchte ich eine TableView in meinem Fenster erstellen, wenn der Benutzer auf eine Zeile klickt, möchte ich die Zeile mit anderen Zeilen erweitern.

Also ich möchte Expandable List Row wie Android implementieren.

Das ist mein js Code:

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

Also, mit diesem Code kann ich die Tabelle mit der Zeile sehen, aber ich bin nicht in der Lage erweiterbare Liste Zeile einzufügen.

Wie kann ich es reparieren?

Answer 1

Sie können den folgenden Code für erweiterbare und reduzierbare Tabellenansicht Zeile in iOS versuchen.

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();