效果:
Titanium中列表显示需要创建TableView
var tableView = Ti.UI.createTableView({ style: Ti.UI.iPhone.TableViewCellSelectionStyle.NONE //TableView样式 });
TableView的每一个行叫做TableViewRow
设置TableViewRow的hasChild为true便可显示这样的效果:
点击HasChild行进入列表显示画面(图2)需要添加点击事件
tablerow.addEventListener('click', function() {
//Titanium中自定义一个事件 tablerow.fireEvent('hasChildClicked', { operation: 'fieldChild'}); });
捕捉这个事件
view.addEventListener('hasChildClicked', function(e) { navGroup.open(tableView);//使用NavigationGroup打开列表显示画面tableView
});
然后再列表显示数据
//创建TableViewRow的方法
self.createTableRow = function(i) { var tablerow = Ti.UI.createTableViewRow(); tablerow.height = 50;//行高度 tablerow.setTitle("TableViewRow"+i);//显示名称 return tablerow; }; var rows = [];//存储tableView数据的数组 for (var i = 0; i < 20; i++) { rows.push(self.createTableRow(i)); } tableView.setData(rows); self.add(tableView);
TableViewRow的属性hasCheck控制该行是否被选中,类似于HTML的Checkbox控件的checked的属性
//每一行增加点击事件,控制其选中状态
tablerow.addEventListener('click', function() { if(tablerow.getHasCheck()){ tablerow.setHasCheck(false); }else{ tablerow.setHasCheck(true); } });