0

appcelerator studio で簡単なアプリケーションを作成しています。次に、ウィンドウに TableView を作成します。ユーザーが 1 つの行をクリックすると、その行を他の行で展開したいと考えています。

だから私は Android のような Expandable List Row を実装したい。

これは私の .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 で展開および折りたたみ可能なテーブルビュー行に対して以下のコードを試すことができます。

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 に答える