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を振って管理したほうがいいかもしれない。