访问 TableView 的自定义行

Question

我将项目推送到数据数组，然后将它们添加到 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);
});

Answer 1

有两种方法可以设置表格的行，可以创建自定义行，也可以创建具有行对象属性的 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];
});

Answer 2

为了在用户点击时访问行的数据（即使是在自定义行的情况下不显示的数据），您可以创建一个数组，在循环期间将数据推送到其中并使用 e 访问它。指数。 一个简单的代码示例：

    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

}

Answer 3

尝试使用 event.tget 函数，例如：

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