Titanium UI之TableViews組件

TableViews

一、爲tableView增長數據

二、Row的屬性

三、自定義Row，Row組，Row Section

四、在TableView的搜索

五、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