2

我是钛工作室的新手。我正在处理表格视图。我在 tableviewrow 中添加了一些图像视图和标签。我可以将事件侦听器添加到表视图行中的每个孩子。我正在循环内向表中添加行。下面是我的代码:

var tweetsTable = Ti.UI.createTableView({height:360, width: 306, top: 58, backgroundColor: '#FFFFFF',borderColor: '#C8C8C8',borderWidth:2, zIndex: -1});
var tweetsArray = [];

for(int i = 0; i < 5; i++)
{

    var row = Ti.UI.createTableViewRow({contentHeight: 'auto', width: 320,top:0, selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE});

    var my = Ti.UI.createView({ top:10,width:300,height:100 });

    var accImage = Ti.UI.createImageView({Image: Ti.App.logoImage,width:50,height:50,left:10,top:5,borderRadius:4});

    var addPlus = Ti.UI.createLabel({text:"+",color:"orange", font:{fontSize:18},borderWidth:0,bottom:5,right:20, width: 20, height: 20 });

    var addMinus = Ti.UI.createLabel({text:"-",color:"orange", font:{fontSize:18},borderWidth:0,bottom:5,right:10, width: 20, height: 20 });

    my.add(accImage);
    my.add(addPlus);
    my.add(addMinus);

    row.add(my);
    tweetsArray.push(row);

    accImage.addEventListener('click', function(e){
        alert(i);
    }

    addPlus.addEventListener('click', function(e){
        alert(i);
    }

    addMinus.addEventListener('click', function(e){
        alert(i);
    }

}

我想为 accImage、addPlus、addMinus 添加事件监听器。但我无法分别找到 accImage、addPlus、addMinus 的点击事件。如果我在 for 循环中添加事件侦听器,它可以工作,但最后一行孩子只能工作。如果我单击第一行 addPlus,那么最后一行 addPlus 正在工作。

如何为每行中的每个子项动态添加事件侦听器。请问有人可以吗。。

4

2 回答 2

2

我找到了解决方案。我的代码如下:

var tweetsTable = Ti.UI.createTableView({height:360, width: 306, top: 58, backgroundColor: '#FFFFFF',borderColor: '#C8C8C8',borderWidth:2, zIndex: -1});
var tweetsArray = [];

// response contains array of contents. The following loop will runs up to response length

for(int i = 0; i < response.length; i++)
{

    var row = Ti.UI.createTableViewRow({contentHeight: 'auto', width: 320,top:0, selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE});

    var my = Ti.UI.createView({ top:10,width:300,height:100 });

    var accImage = Ti.UI.createImageView({Image: Ti.App.logoImage,width:50,height:50,left:10,top:5,borderRadius:4});

    var addPlus = Ti.UI.createLabel({text:"+",color:"orange", font:{fontSize:18},borderWidth:0,bottom:5,right:20, width: 20, height: 20 });

    var addMinus = Ti.UI.createLabel({text:"-",color:"orange", font:{fontSize:18},borderWidth:0,bottom:5,right:10, width: 20, height: 20 });

    my.add(accImage);
    my.add(addPlus);
    my.add(addMinus);

    row.add(my);
    tweetsArray.push(row);

    //find whether event from accImage
    tweetsArray[i].children[0].addEventListener('click', function(e){
        imageFunction(response[e.index]['name']);
    });

    //find whether event from addPlus
    tweetsArray[i].children[1].addEventListener('click', function(e){
        plusFunction(response[e.index]['name']);
    });

    //find whether event from addMinus
    tweetsArray[i].children[2].addEventListener('click', function(e){
        minusFunction(response[e.index]['name']);
    });

}

我希望它对某人有用。

于 2012-10-09T07:59:06.373 回答
1

好吧,我相信您的要求更适合使用 Titanium Mobile 的 Kitchen Sink 示例 (Table_view_layout2.js) 中的示例源代码。您可以在 Titanium Studio IDE 中获取源代码,左下角有一个示例部分,您可以在其中导入代码。在代码中,导航到 Resources/iu/common/baseui/table_view_layout2.js 以查看或调试示例并了解其运行方式。确保你得到一个更新的,因为看起来他们自 2.0.0 版发布以来已经更新了这个代码。

它有一个用于表的事件侦听器并查询点击的来源。该示例显示了一个图像,它使用一个视图而不是图像视图和几个标签。侦听器确定被单击的项目并将其显示在屏幕上。您可以更改该逻辑以执行您想要完成的任何事情。与您的代码类似,他们使用 for 循环构建表,因此您可以绘制一些与您的代码相似的地方。

对于特定的推文 ID,您可以将其放在您的行变量中。

var row = Ti.UI.createTableViewRow({
 contentHeight: 'auto', 
 width: 320,
 top:0, 
 selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE,
 myTweetId: tweetId // <================= Add here
});

然后在您的侦听器逻辑中,您可以查询 e.rowData.myTweetid 以查找您需要修改的推文。

只是为了澄清一下,监听器将减少为表(tweetsTable)“点击”事件的单个监听器,它将在您拥有的循环逻辑之外定义。

我真的不想把它粘贴在这里,但这是文件中的代码。您可以在我提到的免费源代码中查找它,并且能够使用调试器运行它。

function tv_layout2() {
    var win = Titanium.UI.createWindow();
    win.barColor = '#385292';

    if (Ti.Platform.osname !== 'mobileweb') {

        //
        // CREATE SEARCH BAR
        //
        var search = Titanium.UI.createSearchBar({
            barColor:'#385292',
            showCancel:false
        });
        search.addEventListener('change', function(e)
        {
            e.value; // search string as user types
        });
        search.addEventListener('return', function(e)
        {
            search.blur();
        });
        search.addEventListener('cancel', function(e)
        {
            search.blur();
        });
    }

    var tableView;
    var data = [];

    // create first row
    var row = Ti.UI.createTableViewRow();
    row.backgroundColor = '#576996';
    row.selectedBackgroundColor = '#385292';
    row.height = 40;
    var clickLabel = Titanium.UI.createLabel({
        text:'Click different parts of the row',
        color:'#fff',
        textAlign:'center',
        font:{fontSize:14},
        width:'auto',
        height:'auto'
    });
    row.className = 'header';
    row.add(clickLabel);
    data.push(row);

    // when you click the header, scroll to the bottom
    row.addEventListener('click',function()
    {
        tableView.scrollToIndex(40,{animated:true,position:Ti.UI.iPhone.TableViewScrollPosition.TOP});
    });

    // create update row (used when the user clicks on the row)
    function createUpdateRow(text)
    {
        var updateRow = Ti.UI.createTableViewRow();
        updateRow.backgroundColor = '#13386c';
        updateRow.selectedBackgroundColor = '#13386c';

        // add custom property to identify this row
        updateRow.isUpdateRow = true;
        var updateRowText = Ti.UI.createLabel({
            color:'#fff',
            font:{fontSize:20, fontWeight:'bold'},
            text:text,
            width:'auto',
            height:'auto'
        });
        updateRow.className = 'updated_row';
        updateRow.add(updateRowText);
        return updateRow;
    }
    // create a var to track the active row
    var currentRow = null;
    var currentRowIndex = null;

    // create the rest of the rows
    for (var c=1;c<50;c++)
    {
        var row = Ti.UI.createTableViewRow();
        row.selectedBackgroundColor = '#fff';
        row.height = 100;
        row.className = 'datarow';
        row.clickName = 'row';

        var photo = Ti.UI.createView({
            backgroundImage:'/images/custom_tableview/user.png',
            top:5,
            left:10,
            width:50,
            height:50,
            clickName:'photo'
        });
        row.add(photo);


        var user = Ti.UI.createLabel({
            color:'#576996',
            font:{fontSize:16,fontWeight:'bold', fontFamily:'Arial'},
            left:70,
            top:2,
            height:30,
            width:200,
            clickName:'user',
            text:'Fred Smith '+c
        });

        row.filter = user.text;
        row.add(user);

        var fontSize = 16;
        if (Titanium.Platform.name == 'android') {
            fontSize = 14;
        }
        var comment = Ti.UI.createLabel({
            color:'#222',
            font:{fontSize:fontSize,fontWeight:'normal', fontFamily:'Arial'},
            left:70,
            top:21,
            height:50,
            width:200,
            clickName:'comment',
            text:'Got some fresh fruit, conducted some business, took a nap'
        });
        row.add(comment);

        var calendar = Ti.UI.createView({
            backgroundImage:'/images/custom_tableview/eventsButton.png',
            bottom:2,
            left:70,
            width:32,
            clickName:'calendar',
            height:32
        });
        row.add(calendar);

        var button = Ti.UI.createView({
            backgroundImage:'/images/custom_tableview/commentButton.png',
            top:35,
            right:5,
            width:36,
            clickName:'button',
            height:34
        });
        row.add(button);

        var date = Ti.UI.createLabel({
            color:'#999',
            font:{fontSize:13,fontWeight:'normal', fontFamily:'Arial'},
            left:105,
            bottom:5,
            height:20,
            width:100,
            clickName:'date',
            text:'posted on 3/11'
        });
        row.add(date);

        data.push(row);
    }


    //
    // create table view (
    //
    if (Ti.Platform.osname !== 'mobileweb') {
        tableView = Titanium.UI.createTableView({
            data:data,
            search:search,
            filterAttribute:'filter',
            backgroundColor:'white'
        });
    } else {
        tableView = Titanium.UI.createTableView({
            data:data,
            filterAttribute:'filter',
            backgroundColor:'white'
        });
    }

    tableView.addEventListener('click', function(e)
    {
        Ti.API.info('table view row clicked - source ' + e.source);
        // use rowNum property on object to get row number
        var rowNum = e.index;
        var updateRow;
        if (Ti.Platform.osname !== 'mobileweb') {
            updateRow = createUpdateRow('You clicked on the '+e.source.clickName);
            tableView.updateRow(rowNum,updateRow,{animationStyle:Titanium.UI.iPhone.RowAnimationStyle.LEFT});
        } else {
            updateRow = createUpdateRow('Row clicked');
            tableView.updateRow(rowNum,updateRow);
        }
    });

    win.add(tableView);

    return win;
};

module.exports = tv_layout2;
于 2012-10-08T14:46:34.507 回答