あんにんにっき。

日々思ったことや、おこったことを記録するブログ。要するに日記。

Titanium MobileでTableViewの削除ボタンを実装してみる。

 TableViewを横にスワイプすると削除ってボタンが出て、それを押すと削除される、ってのを実装してみようと思う。
 たぶん、swipとかいうイベントがあるのだろうなぁ、とか思いつつKitchen Sinkを覗いてみたけど全然違った。


 まず、スワイプしたら削除、と出るのはかなり簡単。行データのプロパティ editableにtrueを設定するだけ。

// editable:true で行データを作っておく。
var tblRows = [];
var rowIdx = 0;
while(dbRows.isValidRow()){
	tblRows.push({title:'' + dbRows.fieldByName('title') + '' ,
		hasChild:true,
		url:'' + dbRows.fieldByName('url') + '',
		backgroundImage:'row1.png',
		editable:true
	});
	dbRows.next();
}

// editable:trueが指定された行データをTableViewのdataとして設定
var tblView = Ti.UI.createTableView({
	data:tblRows,
    	backgroundColor:'transparent',
    	separatorStyle:Ti.UI.iPhone.TableViewSeparatorStyle.NONE
});

 これだけで、スワイプすると削除ボタンが出るようになる。この削除ボタンを押すと、行が削除される。
 


 このままの状態(editable:true)だけだと、削除ボタンは出せるし、行も消せる。しかし、DB等からデータを削除する、といった処理が必要な場合、削除のイベントに処理を追加する必要がある。

// 行削除処理
tblView.addEventListener('delete', function(e){
	// データの削除処理
	var db = Ti.Database.open('db');
	db.execute('begin transaction');
	db.execute("delete from url where title = '" + e.rowData.title + "' ");
	db.execute('commit');
	db.close();
});

 これはtitleでけしているけど、これだと同一タイトルの時に、DBからまとめて削除されてしまう。
 データは、ユニークなIDを振って管理したほうがいいかもしれない。