将 createLabel 函数转换为带有 JSON 数据的表视图

Question

使用 Titanium 进行课程。我有一个函数可以提取我的 JSON 数据并创建标签和事件监听器。我需要将这个项目制作成一个与标签相反的表格，但我很难做到这一点并且无法完全弄清楚。这是我的带有标签的工作代码。这只是我的第二门编码课程，因此非常感谢任何耐心和内部提示和技巧！

谢谢大家

Ti.UI.setBackgroundImage("347.png");

var bands = {
    "sevenfold": {
        "headTitle": "Avenged Sevenfold",
        "footTitle": "Orange County Metal Band",
        "members": [
            {
                "name": "M. Shadows", 
                "info": "Lead Singer.  Known for his raspy yet powerful vocals"
            }, 
            {
                "name": "Synyster Gates", 
                "info": "Lead guitarist and backup vocalist.  Known for technical        solos and melodic riffs."
            }, 
            {
                "name": "Zacky Vengeance",
                "info": "Rhythm guitarist and backup vocalist.  Capable of tight and fast riffs and harmonizing with lead guitar parts. "
            }, 
            {
                "name": "Johnny Christ",
                "info": "Bassist.  Contributes heavy grooves as well as intricate undertones to the rhythm section."
            }, 
            {
                "name": "Arin Iljey", 
                "info": "Drummer.  New-comer to the band.  Filled in for the late Jimmy 'The Rev' Sullivan."
            }, 
        ]
    },
    "adtr": {
        "headTitle": "A Day To Remember",
        "footTitle": "Ocala Based Pop-Punk Band",
        "members":  [
            {
                "name": "Jeremey McKinnon", 
                "info": "Lead Singer.  Capable of hitting clean high notes as well as low screams."
            }, 
            {
                "name": "Neil Westfall",
                "info": "Rhythm guitarist and backup vocalist.  Plays fast punk inspired rhythm sections while contributing back up screams during live shows."
            },
            {
                "name": "Joshua Woodard",
                "info": "Bassist.  Contributes to the heavy tones of the rhythm section."
            },
            {
                "name": "Kevin Skaff", 
                "info": "Lead guitarist and backup vocalist.  Plays the melodic section of songs and aids Jeremy with clean vocals both in the studio and on live shows."
            },
            {
                "name": "Alex Shelnut", 
                "info": "Drummer.  Adds fast punk fills with metal influenced double bass beats."
            }
        ]
    }
};


var mainWindow = Ti.UI.createWindow({
    title: "Band Members",
    backgroundImage: "347.png"
});

var navWindow = Ti.UI.iOS.createNavigationWindow({
    window: mainWindow  
});


var getDetail = function(){
    var detailWindow = Ti.UI.createWindow({
        title: this.text,
        backgroundColor: "white"
    });
    var detailText = Ti.UI.createLabel({
        text: this.details,
        top: 30,
        left: 15,
        right: 15
    });
    detailWindow.add(detailText);
    navWindow.openWindow(detailWindow);
};

var makeUI = function(){
    var spacing = 30;
    for(n in bands){
        var titleLabel = Ti.UI.createLabel({
            text: bands[n].headTitle,
            left: 30,
            right: 30,
            borderRadius: 5,
            top: spacing,
            height: 25,
            textAlign: "center",
            backgroundColor: "#333",
            font: {fontSize: 22, fontFamily: "Verdana", fontWeight: "bold"},
            color: "#fafafa"
        });
        spacing = titleLabel.top + titleLabel.height + 10;
        for(m in bands[n].members){
            var itemLabel = Ti.UI.createLabel({
                text: bands[n].members[m].name,
                details: bands[n].members[m].info,
                left: 30,
                right: 30,
                borderRadius: 5,
                textAlign: "center",
                top: spacing,
                height: 25,
                backgroundColor: "#ffffff",
                font: {fontSize: 22, fontFamily: "Verdana"},
                color: "#333"
            });
            mainWindow.add(itemLabel);
            spacing = itemLabel.top + itemLabel.height + 10;
            itemLabel.addEventListener("click", getDetail);
        }
        mainWindow.add(titleLabel);
        spacing = itemLabel.top + itemLabel.height + 40;
    }
};



makeUI();


navWindow.open();

Answer 1

请参阅 Titanium Kitchen sink 应用程序，其中包含所有不同 UI 元素的模板和示例。该应用程序本身并不是如何构建整个应用程序的好示例，但它提供了一些关于如何构建 tableViews 的出色示例。

Titanium Kitchen Sink

下载它，将其作为现有项目导入 Ti Studio，构建它并在模拟器或设备上查看它。找到所需的控件，查看选项并按照代码示例进行操作。

在您现有的应用程序中，您正在向窗口添加标签，然后为下一个标签的布局位置保留一个间距计数器。

tableView 是要使用的正确 UI 控件。

• 创建一个 tableView 对象（位置、样式等）
• 创建一个 tableRow 对象数组（就像您现在使用标签的方式）
• tableView.data = myTableRowsArray;
• 将 tableView 添加到您的窗口
• 您已启动并运行