在Titanium中单击行显示城市的详细信息

时间:2015-04-13 21:10:35

标签: titanium-mobile appcelerator titanium-android

您好我是编程的初学者,我正在尝试使用HTTPClient构建一个简单的Titanium应用程序。这段代码显示了完整的城市列表,我希望点击它将在另一个窗口中显示的每个城市,点击城市的照片。

这段代码显示完整的城市列表:

Ti.UI.backgroundColor = '#000';
    var url = "http://10.0.3.2:8000/cities/.json";
    var win = Ti.UI.createWindow();
    var table = Ti.UI.createTableView();
    var tableData = [];
    var json, i, row, nameLabel, nickLabel;

    var xhr = Ti.Network.createHTTPClient({
        onload: function() {
        // Ti.API.debug(this.responseText);

        json = JSON.parse(this.responseText);
        for (i = 0; i < json.length; i++) {

            row = Ti.UI.createTableViewRow({
                height:'60dp'
            });
            nameLabel = Ti.UI.createLabel({
                text:json[i].city,
                font:{
                    fontSize:'24dp',
                fontWeight:'bold'
            },
            height:'auto',
            left:'10dp',
            top:'5dp',
            color:'#000',
            touchEnabled:false
            });
            nickLabel = Ti.UI.createLabel({
            text:'"' + json[i].city + '"',
            font:{
                fontSize:'16dp'
            },
            height:'auto',
            left:'15dp',
            bottom:'5dp',
            color:'#000',
            touchEnabled:false
            });

            row.add(nameLabel);
            row.add(nickLabel);
            tableData.push(row);



 }

    table.setData(tableData);
    },
    onerror: function(e) {
    Ti.API.debug("STATUS: " + this.status);
    Ti.API.debug("TEXT:   " + this.responseText);
    Ti.API.debug("ERROR:  " + e.error);
    alert('Per momentin nuka ka te dhena! ju lutem provojeni perseri me vone!!!');
    },
    timeout:5000
});

xhr.open("GET", url);
xhr.send();

win.add(table);
win.open();

以下是API: a)显示城市完整列表的API http://10.0.3.2/cities/.json

[{"id": 1, "city": "Shkoder", "photo_city": "null"}, {"id": 2, "city": "Lezhe", "photo_city": "null"}, {"id": 3, "city": "Lac", "photo_city": "null"}]

b)显示已点击城市的详细信息的API http://10.0.3.2/city/2/.json

[{"id": 2, "city": "Lezhe", "photo_city": "null"}]

我希望在你的帮助下!!!

1 个答案:

答案 0 :(得分:0)

以下是显示完整编码过程的视频:https://www.youtube.com/watch?v=MwjogxcrqlE

/**
 * called when user clicks on table view. The _event will provide
 * the index of the item clicked in the table
 * 
 * @param {Object} _event
 */
function clickedOnTableView(_event) {
    // display to console log the _event object for debugging
    Ti.API.info(JSON.stringify(_event,null,2));

    // get data using index provided, show alert
    // show all data changes now
    alert("clicked on " + tableData[_event.index].city + " " +
     tableData[_event.index].id);
}

添加事件监听器

table.addEventListener('click',clickedOnTableView);