访问TableView的自定义行

时间:2013-07-18 15:18:46

标签: javascript arrays titanium element

我正在将项目推送到数据数组,然后将这些项目添加到rowData数组,以便为​​表创建自定义行。当用户点击特定行时,我需要知道如何访问这些内容。我以前使用e.rowData,title等来访问这些元素时,我有一个基本的表,但现在它是一个自定义表,这是不工作的。不要担心解析位,一切正常。所有帮助表示赞赏!

data.push({

            title: items.item(i).getElementsByTagName("title").item(0).text,            
        leftImage: str.match(patt1) !== null ? str.match(patt1)[0] : 'image_news.png',
            dataToPass: items.item(i).getElementsByTagName("description").item(0).text,
            hasChild: true, 
            js:"external.js"
        });



    }

    var rowData=[];

    for(i=0;i<data.length;i++){
        var img= Titanium.UI.createImageView({
            image:data[i].leftImage,
            left:0,
            bottom:5,
            height: 100,
            width: 100
        });

        var bgBar=Titanium.UI.createView({
            height:110,
            width: "100%",
            bottom:0,
            left:0,
            backgroundColour: "#000",
            opacity: 0.6
        });

        var title=Titanium.UI.createLabel({
            text:data[i].title,
            color: 'black',
            left: 105
        });

        var row=Titanium.UI.createTableViewRow({
            height: "auto",
            hasChild: "true",
        js:"external.js",
        dataToPass: data[i].dataToPass
        });

        row.add(img);
        row.add(bgBar);
        row.add(title);



        rowData.push(row);
        console.log("row shiznick" + rowData);
    }


    tableView.setData(rowData);


tableView.addEventListener("click", function (e){
        console.log("HERE SOURCE.TITLE ------------------"+e.row.title);
        console.log("YOYOOYOYO------------"+e.source.title);
        console.log("IS THIS IT---------------"+e.children[0]);
        console.log("HERE IS THE SOURCE -----------------------------"+ e.source);
        console.log("HERE SOURCE.LEFTIMAGE REG EXP3 ------------------"+e.row.leftImage);
        console.log("HERE SOURCE.ClassName ------------------"+e.source.className);
        console.log("HERE HASCHILD ------------------"+e.rowData.hasChild);
        console.log("HERE DATATOPASS ------------------"+e.row.dataToPass);
});

3 个答案:

答案 0 :(得分:2)

有两种方法可以设置表的行,可以创建自定义行,也可以创建具有行对象属性的JSON对象。两种情况都有不同的方式来访问行,row对象或rowData对象,from the docs

  

使用JavaScript字典对象隐式创建行时,使用[rowData属性]而不是row来访问任何自定义行属性。   这是一个隐式创建行的示例,这不是推荐的方式。

在您的示例中,由于您没有隐式地但是显式地创建行对象,因此您可以从事件的row属性访问单击的行,如下所示:

tableView.addEventListener("click", function(e){
    // Get the [TableViewRow](http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TableViewRow) object
    var theRow = e.row;
    // Get the children
    var rowChildren = theRow.children;
    // Here are your objects in the row
    var imgInRow = rowChildren[0];
    var bgBarInRow = rowChildren[1];
    var titleInRow = rowChildren[2];
    // Here is the title
    var rowTitle = titleInRow.text;
});

或者,在这两种情况下,您始终可以使用索引来查找行对象,如下所示:

tableView.addEventListener("click", function(e){
    // Get the index of the row
    var ndx = e.index;
    // Get the row, this only works if you have not added sections
    var row = tableView.data[ndx];
});

答案 1 :(得分:1)

为了在用户点击时访问行的数据(例如,在自定义行的情况下不显示那些数据),您可以创建一个数组,在循环期间将数据推入其中并且可以访问它与e.index。 一个简单的代码示例:

    var allDataArray = [];

        // loop through each item
        for ( var i = 0; i < items.length; i++ )
        {
            // Your source datas (custom row : id is not displayed in the rows)
            var sourceData = {
                id: items.item(i).getAttribute('id'),               
                title: items.item(i).getElementsByTagName("title").item(0).textContent,
            };

            // Saving data for each loop
            allDataArray.push(sourceData);
}

然后访问数据

itemsTable.addEventListener('click', function(e)
        {
            // Target the array with e.index offset
            var rowContent = allDataArray[e.index];
            Ti.API.info(rowContent); // will display every single data of the current row clicked
            alert(rowContent.id) // will display the "hidden" id which was not displayed in the UI

}

答案 2 :(得分:-1)

尝试使用event.target函数,例如:

$(".row").click(function(event) {
  var element = event.target;
  // Accessing element
});