我想在listview行中添加一个可点击按钮。当我在其中添加一个按钮时，单击此按钮时它无法工作。 listview＆＃34; itemclick＆＃34;重叠这个。我甚至尝试添加标签或图像，但我无法使它们可点击。
function HomeDetail(KW, SF, SL, IT, SM) {
var win = Ti.UI.createWindow({
title : '',
barColor : '#096C36',
backgroundColor : "white",
navBarHidden : true
});
loading._show({
message : "Loading..."
});
var url = "http://findcourse.net/search_result.php?search=" + KW + SF + SL + IT + SM;
var imgBack = Ti.UI.createImageView({
top : 35,
image : '/images/back.png',
width : 15,
height : 25,
left : "2%",
zIndex : 1
});
win.add(imgBack);
imgBack.addEventListener('click', function(e) {
win.close();
});
var imgfindCourse = Ti.UI.createImageView({
top : 30,
image : '/images/findcourseimg.png',
width : Ti.UI.SIZE,
height : Ti.UI.SIZE,
left : "7%"
});
win.add(imgfindCourse);
var imgTopSearchMenu = Ti.UI.createImageView({
top : 30,
image : '/images/loginlogout.png',
width : Ti.UI.SIZE,
height : Ti.UI.SIZE,
right : "4%"
});
win.add(imgTopSearchMenu);
var imgTopSearch = Ti.UI.createImageView({
top : 40,
////backgroundColor:"black",
image : '/images/serach.png',
width : Ti.UI.SIZE,
height : 20,
right : "19%"
});
win.add(imgTopSearch);
var tvLine = Ti.UI.createView({
text : '',
width : "90%",
height : 1,
top : 70,
//backgroundColor : 'gray',
});
win.add(tvLine);
// var imgBottom = Ti.UI.createImageView({
// top : 315,
// image : '/images/detailbottom.png',
// width : "90%",
// height : 150,
// });
// win.add(imgBottom);
var viewBottom = Ti.UI.createView({
bottom : 0,
width : Ti.UI.FILL,
height : 50,
backgroundColor : '#075e9d',
});
win.add(viewBottom);
// var tvShowMore = Ti.UI.createLabel({
// text : 'SHOW MORE',
// width : "50%",
// height : 30,
// top : 475,
// textAlign : "center",
// borderColor : "#dbdbdb",
// color : "silver",
// borderWidth : 1,
// borderRadius : 2,
// font : {
// fontSize : 12,
// fontWeight : "bold"
// }
// });
// win.add(tvShowMore);
// tvShowMore.addEventListener('click', function(e) {
// });
var imgMenu = Ti.UI.createImageView({
image : '/images/menu.png',
width : 30,
height : 30,
left : 135
});
viewBottom.add(imgMenu);
var imgRefresh = Ti.UI.createImageView({
image : '/images/refresh.png',
width : 30,
height : 30,
left : 165
});
viewBottom.add(imgRefresh);
var myTemplate = {
childTemplates : [{
type : 'Ti.UI.Label',
bindId : 'heading',
properties : {
color : 'black',
font : {
fontSize : 13,
fontFamily : "Signika-Regular",
fontWeight : "bold"
//fontFamily : ''
},
top : 10,
left : 20,
height : 20,
width : 180,
//backgroundColor : "green"
}
}, {
type : 'Ti.UI.Label',
bindId : 'offered',
properties : {
color : 'black',
font : {
fontSize : 10,
fontFamily : "Signika-Regular",
fontWeight : "bold"
//fontFamily : ''
},
top : 32,
left : 20,
height : 10,
width : Ti.UI.SIZE
}
}, {
type : 'Ti.UI.Label',
bindId : 'offereddetail',
properties : {
color : 'black',
font : {
fontSize : 10,
fontFamily : "Signika-Regular",
fontWeight : "bold"
//fontFamily : ''
},
top : 32,
left : 93,
height : 10,
width : Ti.UI.SIZE,
//backgroundColor : "magenta"
}
}, {
type : 'Ti.UI.Label',
bindId : 'level',
properties : {
color : 'black',
font : {
fontSize : 10,
fontFamily : "Signika-Regular",
fontWeight : "bold"
//fontFamily : ''
},
top : 45,
left : 20,
height : 10,
width : Ti.UI.SIZE
}
}, {
type : 'Ti.UI.Label',
bindId : 'leveldetail',
properties : {
color : 'black',
font : {
fontFamily : "Signika-Regular",
fontSize : 10,
fontWeight : "bold"
//fontFamily : ''
},
top : 45,
left : 93,
height : 10,
width : Ti.UI.SIZE,
//backgroundColor : "orange"
}
}, {
type : 'Ti.UI.Label',
bindId : 'studyfield',
properties : {
color : 'black',
font : {
fontSize : 10,
fontFamily : "Signika-Regular",
fontWeight : "bold"
//fontFamily : ''
},
top : 59,
left : 20,
height : 10,
width : Ti.UI.SIZE
}
}, {
type : 'Ti.UI.Label',
bindId : 'studyfielddetail',
properties : {
color : 'black',
font : {
fontSize : 10,
fontFamily : "Signika-Regular",
fontWeight : "bold"
//fontFamily : ''
},
top : 59,
left : 93,
height : 10,
width : Ti.UI.SIZE,
//backgroundColor : "blue"
}
}, {
type : 'Ti.UI.Label',
bindId : 'duration',
properties : {
color : 'black',
font : {
fontSize : 10,
fontFamily : "Signika-Regular",
fontWeight : "bold"
//fontFamily : ''
},
top : 73,
left : 20,
height : 10,
width : Ti.UI.SIZE
}
}, {
type : 'Ti.UI.Label',
bindId : 'durationdetail',
properties : {
color : 'black',
font : {
fontSize : 10,
fontFamily : "Signika-Regular",
fontWeight : "bold"
//fontFamily : ''
},
top : 73,
left : 93,
height : 10,
width : Ti.UI.SIZE,
//backgroundColor : "pink"
}
}, {
type : 'Ti.UI.Label',
bindId : 'studymode',
properties : {
color : 'black',
font : {
fontSize : 10,
fontFamily : "Signika-Regular",
fontWeight : "bold"
//fontFamily : ''
},
top : 87,
left : 20,
height : 10,
width : Ti.UI.SIZE
}
}, {
type : 'Ti.UI.Label',
bindId : 'studymodedetail',
properties : {
color : 'black',
font : {
fontSize : 10,
fontFamily : "Signika-Regular",
fontWeight : "bold"
//fontFamily : ''
},
top : 87,
left : 93,
height : 10,
width : Ti.UI.SIZE,
//backgroundColor : "yellow"
}
}, {
type : 'Ti.UI.ImageView',
bindId : 'img',
properties : {
////backgroundColor : '#5C87A9',
top : 5,
right : 100,
height : 30,
width : 30
}
}, {
type : 'Ti.UI.ImageView',
bindId : 'img1',
properties : {
////backgroundColor : '#5C87A9',
top : 0,
right : 60,
height : 30,
width : 30
}
}, {
type : 'Ti.UI.ImageView',
bindId : 'imgLetter',
properties : {
backgroundColor : '#5C87A9',
top : 7,
right : 0,
height : 20,
width : 30
}
}, {
type : 'Ti.UI.ImageView',
bindId : 'imgadd',
properties : {
top : 7,
right : 0,
height : Ti.UI.FILL,
width : Ti.UI.FILL
}
}],
};
//var data = ['Master of Business Law', 'Master of Business Law'];
var sections = [];
var result;
var total;
userdata.alldata(url, function(data) {
loading._hide();
for ( i = 0; i < data.length; i++) {
total = data.length;
Ti.API.info(i);
if (data[0].result == "") {
alert("No Result Found");
}
result = data;
// else {
var rowSection = Ti.UI.createListSection({
});
if (i == 3) {
var rowDataSet = [{
imgadd : {
image : '/images/detailbottom.png'
},
properties : {
itemId : i,
height : 105,
}
}];
} else {
//i - 1;
var rowDataSet = [{
heading : {
text : data[i].result.course
},
offered : {
text : "OFFERED BY :"
},
offereddetail : {
text : data[i].result.offered_by
},
level : {
text : "LEVEL :"
},
leveldetail : {
text : data[i].result.study_level
},
studyfield : {
text : "STUDY FIELD :"
},
studyfielddetail : {
text : data[i].result.study_field
},
duration : {
text : "DURATION :"
},
durationdetail : {
text : data[i].result.duration
},
studymode : {
text : "STUDY MODE :"
},
studymodedetail : {
text : data[i].result.studyMode
},
img : {
image : '/images/more.png'
},
img1 : {
image : '/images/like.png'
},
imgLetter : {
image : '/images/letter.png'
},
properties : {
itemId : i,
height : 105,
//backgroundColor : 'white',
//accessoryType : Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE,
}
}];
}
rowSection.setItems(rowDataSet);
sections.push(rowSection);
listView.setSections(sections);
//}
}
var tvHello = Ti.UI.createLabel({
text : '...' + total + ' courses found...',
width : Ti.UI.SIZE,
height : 20,
top : 75,
//backgroundColor : 'white',
color : "#dbdbdb",
font : {
fontSize : 12,
fontFamily : "Signika-Regular",
fontWeight : "bold"
}
});
win.add(tvHello);
}, function(error) {
loading._hide();
alert("Time Out");
});
var listView = Ti.UI.createListView({
templates : {
'template' : myTemplate
},
defaultItemTemplate : 'template',
separatorColor : 'black',
//left : '',
top : 95,
width : "90%",
height : Ti.UI.FILL,
bottom : 50,
//backgroundColor : 'white',
visible : true
});
win.add(listView);
listView.addEventListener("itemclick", function(e) {
//Ti.API.info(url);
alert(result[e.itemId].result);
Ti.API.info(result[e.itemId].result.country);
//alert("hellof");
// var resultscreen = new ResultDetail();
// navGroup.openWindow(resultscreen);
});
win.add(loading);
return win;
}
module.exports = HomeDetail;
答案 0 :(得分：2)
这些答案似乎都不适合我或不完整。在ListView模板中定义按钮（或其他）的单击处理程序。
对于Alloy：
<ListView id="listviewResults" defaultItemTemplate="PhotoItem">
<Templates>
<ItemTemplate name="MyTemplate">
<View class="viewPhotocontainer">
<ImageView bindId="bindPhoto" id="photo" defaultImage="/photo-default.jpg"/>
</View>
<View class="viewRowresult">
<Label bindId="bindNote" id="note">Add a note</Label>
<Button id="buttonNote" bindId="bindButtonNote" onClick="editNote" title="Edit Note"></Button>
</View>
</ItemTemplate>
</Templates>
<ListSection />
</ListView>
或旧学校
var plainTemplate = {
childTemplates: [
{
type: 'Ti.UI.Label', // Use a label
bindId: 'rowtitle', // Bind ID for this label
properties: { // Sets the Label.left property
left: '10dp'
}
},
{
type: 'Ti.UI.Button', // Use a button
bindId: 'bindButtonNote', // Bind ID for this button
properties: { // Sets several button properties
width: '80dp',
height: '30dp',
right: '10dp',
title: 'Edit Note'
},
events: { click : editNote} // Binds a callback to the button's click event
}
]
};
请注意点击<Button>
function editNote(e){
// Get some property of the button object
var buttonTitle= e.source.title;
// Or get the ListDataItem that contains the clicked button
var item = e.section.getItemAt(e.itemIndex);
}
在此处找到此信息：http://docs.appcelerator.com/platform/latest/#!/guide/ListViews
答案 1 :(得分：1)
您可以使用以下命令模拟列表视图中的可点击按钮：
listView.addEventListener('itemclick', function(e) {
switch (e.bindId) {
case 'myButton1BindId':
// button1 action
break;
case 'myButton2BindId':
// button2 action
break;
default:
// non buttons click
}
});
当然，仅使用cos touchstart，longpress，doubleclick等简单使用等等。事件不可用。
答案 2 :(得分：0)
您必须将click事件绑定到该项目。最初它绑定到listItem。请查看包含项目模板的完整＆＃34;列表项目＆＃34; official docs中的示例。
简而言之，你必须像这样绑定clickEventListener：
var myTemplate = {
//All the stuff you are doing at the moment.
events: {click: toggleCheck }
};
function toggleCheck (e) {
var item = section.getItemAt(e.itemIndex);
//Manipulate your item or get whatever you need.
section.updateItemAt(e.itemIndex, item);
}
[这是从上面给出的链接中摘录的简短摘录]
答案 3 :(得分：0)
正如Robin所提到的那样，点击处理程序肯定是个问题。我已经开始使用更通用的点击处理程序，它可以为您提供这种控制 - 并提高性能。所以基本上将处理程序设置在一个非常“顶级”的元素上（例如，在你的情况下为win）并检查click事件以决定要调用的代码。
This video by John Jardin详细描述了这个概念。
/约翰