Titanium UI之TableViews组件

TableViews

1、为tableView增加数据

2、Row的属性

3、自定义Row，Row组，Row Section

4、在TableView的搜索

5、TableView的事件

内容

Ti里面创建一个TableView，如下：

var table = new Titanium.UI.createTableView({ /* properties */ });

这是其包含的属性：

height and width

top and left

backgroundColor and backgroundImage

rowHeight / minRowHeight / maxRowHeight – 控制行的尺寸

headerTitle / headerView

footerTitle / footerView

scrollable (boolean) –控制tableView的滚动，纵向滚动条

为TableView添加数据

TableView的一行是一个Ti.UI.TableViewRow对象，当然，你可以通过此对象来控制该行。

Ti.UI.createTableViewRow()，此方法用来创建一个TableViewRow对象。

你可以通过javascript来循环的创建此对象。



Object literals as rows

// 通过json来做为数据
var tbl_data = [
{title:'Row 1'},
{title:'Row 2'},
{title:'Row 3'}
];
// 装载数据（第一种方法）
var table = Titanium.UI.createTableView({
data:tbl_data
});
// 第二种方法
table.setData(tbl_data);

当然，你也可以创建TableViewRow对象来填充数据，这样做有个好处是：你对Row的可控性提高了，可以方便的使用其方法。

如：add(),fireEven()等

Explicit TableViewRow objects

var row = Titanium.UI.createTableViewRow({
title: 'Row 1'
/* other properties */
});
table.appendRow(row);
// 有了这个对象，你可以使用其方法。

关于一个空的TableView

你可以创建一个空的tableView（没有数据）；

但是不要设置tableView的data属性为一个null或者一个underfined，这样将会抛出异常！

table.setData([]); // or table.data = [];

关于data属性，setData()方法及appendRow()方法

当插入1000行数据时，使用setData()方法和data属性的效率大大高于appendRow()方法的效率。

呵呵，当然，如果你们的APP真有要插入1000行数数据的需要，你可能要重新考虑UI布局了，上面只是setData和data属性与appendRow()的比较，插入1000行，本身setData和data属性也很慢。

TableViewRow的属性

className –设置此属性，可以使操作系统重用Row。

leftImage

rightImage

backgroundImage

backgroundColor



这是上面显示的示例代码：

var tbl_data = [
{title:'Row 1', leftImage: 'KS_nav_ui.png'},
{title:'Row 2', rightImage: 'KS_nav_ui.png'},
{title:'Row 3', backgroundColor: '#fdd'}
];
// now assign that array to the table's data property to add those objects as rows
var table = Titanium.UI.createTableView({
data:tbl_data
});
// alternatively, you could do
table.setData(tbl_data);

行标

如图：Android 的行标和IOS的不同：android有两，IOS有三



hasChild – 表示其含有子Table或者行；

hasDetail –表示有详细信息，android不支持；

hasCheck – 是否选中

自定义行

如果常规的不能满足你，你可以自定义Row,可以增加Views,ImageViews,Labels,Buttons等等；

但是，请注意一下row的height，请设置为auto；

下面是个例子：

// Create an array of explicitly defined custom TableViewRows
var tbl_data = [];
for (var i = 0; i < 10; i++) {
var row = Ti.UI.createTableViewRow();
var label = Ti.UI.createLabel({
left: 10,
text: 'Row ' + (i+1)
});
var image = Ti.UI.createImageView({
url: 'KS_nav_ui.png'
});
var button = Ti.UI.createButton({
right: 10,
height: 30,
width: 80,
title: 'press me'
});
row.add(label);
row.add(image);
row.add(button);
tbl_data.push(row);
}

// now assign that array to the table's data property to add those objects as rows
var table = Titanium.UI.createTableView({
data:tbl_data
});

Groupe rows

在IOS中，你可以设置style属性，让row分开显示（以组的方式显示）：

var inputData = [
{title:'row 1', header:'Header 1'},
{title:'row 2'},
{title:'row 3'},
{title:'row 4', header:'Header 2'},
{title:'row 5'}
];
var tableView = Titanium.UI.createTableView({
data:inputData,
style:Titanium.UI.iPhone.TableViewStyle.GROUPED
});

Headers and footers

这是利用headerTitle和footerTitle属性来设置TableView的两标题

var data = [
{ title: 'Row 1' },
{ title: 'Row 2' },
{ title: 'Row 3' }
];
var tableview = Titanium.UI.createTableView ({
data:data,
headerTitle:'TableView examples and test cases',
footerTitle:"Wow. That was cool!",
});

还有一个更灵活的方法，你可以使用Views来丰富你的heads 和 footers;需要使用 TableView的headerView和footerView属性。

var tbl_data = [
{ title: 'Row 1' },
{ title: 'Row 2' },
{ title: 'Row 3' }
];

var createCustomView = function(title) {
var view = Ti.UI.createView({
backgroundColor: '#222',
height: 40
});
var text = Ti.UI.createLabel({
text: title,
left: 20,
color: '#fff'
});
view.add(text);
return view;
};

// now assign that array to the table's data property to add those objects as rows
var table = Titanium.UI.createTableView({
data:tbl_data,
headerView: createCustomView('Header View'),
footerView: createCustomView('Footer View')
});
// alternatively, you could do
table.setData(tbl_data);

Table sections

TableSections 可以使你把TableView一部分行，放在一个组，Table Sections 是包含headers和footers的。 使用Ti.UI.createTableViewSection() 来创建TableViewSection对象；

// Create the first TableViewSection
var section1 = Ti.UI.createTableViewSection({
headerTitle:'Header 1'
});
// use a loop to add some rows
for (var i=0; i < 4; i++) {
section1.add(Ti.UI.createTableViewRow({
title:'Row '+i
}));
}
// do it all again...
var section2 = Ti.UI.createTableViewSection({
headerTitle: 'Section 2'
});
for (var i=4; i < 10; i++) {
section2.add(Ti.UI.createTableViewRow({
title:'Row '+i
}));
}
// Now, here's our table, and we're setting the data to hold the sections
var tv = Ti.UI.createTableView({
data:[section1,section2]
});

利用TableSection来遍历行row

在TI中，即使你不显示的创建TableViewSection，Ti会自动创建一个默认的。这是因为TableView没有arows属性，而sections有此属性，这样一来，就可以循环遍历row了；

var table = Ti.UI.createTableView({});
// we'll add rows, but not sections
table.data = resultsOfSomeDatabaseOperation();
// when the table is clicked, loop through the rows
table.addEventListener('click', function(e){
var sections = table.data; // grab the array of sections
var section = sections[0]; // use just the first section
for(var x=0,y=section.rowCount;x < y;x++) {
var theRow = section.rows[x];
// do something with theRow
}
});

在TableView中搜索

你可以增加一个搜索栏，用来搜索TableView中的内容

例如，当用户输入一个“B”，tableView可以显示包含B的title的row；

function makeRow() {
// generate random string of digits and capital English letters
// see http://en.wikipedia.org/wiki/Base_36 return Ti.UI.createTableViewRow({
title: Math.random().toString(36).substring(7)
});
}
//创建一个搜索栏
var searchbar = Ti.UI.createSearchBar({
barColor: '#385292',
showCancel: false
});
var tbl = Ti.UI.createTableView({
search: searchbar,
hideSearchOnSelection: true
});
var data = [];
for(var i=0; i<100; i++) {
data.push(makeRow());
}
tbl.data = data;
win.add(tbl);

如下图所示，在IOS中和android中，搜索Bar是有所区别的:

showCancel boolean 值，如果为true始终显示cancel按钮；如果为false，在IOS中，不会显示cancel直到有用户输入，而android中，始终不会显示按钮；

hideSearchOnSelection 该属性只对IOS系统有效，设置为True，当用户点击searchBar 时会自动清空text的内容，然后隐藏cancel按钮；设置false则相反，会一直显示；



事件及事件对象的属性

可以为sections,rows和其子节点绑定事件。我们不推荐直接给Rows绑定事件，这样做会增加不必要的内存和cpu开销；

table.addEventListener('click', function(e){
alert('You clicked row '+e.index);
});

上面代码中有个重要的对象，E 事件对象，其有些重要的属性：

index – 触发事件时的行下标

row –row对象

rowData – the properties of the row that received the event//触发事件时的行对象的数据集

source – the object that received the original event//事件源

section – the table section that received the event//触发时的section

延伸阅读：

完整代码: http://assets.appcelerator.com.s3.amazonaws.com/app_u/code/345-finished.zip

TableView API docs: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.TableView-object

TableViewRow API docs: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.TableViewRow-object

Kitchen Sink code: https://github.com/appcelerator/KitchenSink