HBuilder开发App教程10-完成事项
回顾
回顾一下之前的要点：
1.Hbuilder创建项目，真机调试
2.首页
3.列表页
4.侧滑菜单
5.websql
6.几种页面打开的方式
再讲下本节的要点：
1.fire方式页面间传值
2.再讲websql
完成事项
功能描述
左滑待办事项会出现完成按钮，点击按钮会将待办事项完成，并加入侧滑菜单，
过程
1.左滑出现完成按钮
2.点击按钮后将事项从待办表中删除
3.同时将事项加入完成表中
4.侧滑菜单显示完成事项
页面
涉及两个页面，一个是list，一个是menu，
为了让操作更流畅，所以在list页面只进行点击事件，然后将事件传递到menu页面，
menu页面进行，添加完成事项，移除待办事项，显示完成事项操作。
实现
左滑待办事项出现完成按钮是mui自带的组件，详见文档，list代码如下
// 完成
qiao.on('.doneBtn', 'tap', function(){
var $li = $(this).parent().parent();
var id = $li.data('id');
$li.remove();
showList($('#todolist'));
qiao.h.fire('menu', 'doneItem', {todoId:id});
return false;
});
list.js中只需要添加如上代码，
第一部分是获取该待办事项Li的id，然后移除Li，
第二部分是将获取的id通过fire的方式传到menu页面
websql
1.index页面初始化两个表
var db = qiao.h.db();
qiao.h.update(db, 'create table if not exists t_plan_day_todo (id unique, plan_title, plan_content)');
qiao.h.update(db, 'create table if not exists t_plan_day_done (id unique, plan_title, plan_content)');
表t_plan_day_todo用来保存list页面的待办事项，有主键，标题和内容三个属性，
表t_plan_day_done用来保存menu页面的完成事项，有主键，标题和内容三个属性。
2.qiao.h.db()
用来获取一个数据库，具体代码如下：
qiao.h.db = function(name, size){
var db_name = name ? name : 'db_test';
var db_size = size ? size : 2;
return openDatabase(db_name, '1.0', 'db_test', db_size * 1024 * 1024);
};
可见默认创建了一个“db_test”的数据库，大小为2*1024*1024k
3.qiao.h.update()
更新操作，所有的增加，删除，修改以及一些不需要返回结果的sql操作，代码如下：
qiao.h.update = function(db, sql){
if(db &&sql) db.transaction(function(tx){tx.executeSql(sql);});
};
4.list页面获取数据
list页面需要从t_plan_day_todo表中获取数据，并展示，代码如下：
// 初始化待办事项
function initList(){
var $ul = $('#todolist').empty();
qiao.h.query(qiao.h.db(), 'select * from t_plan_day_todo order by id desc', function(res){
for (i = 0; i < res.rows.length; i++) {
$ul.append(genLi(res.rows.item(i)));
}
showList($ul);
});
}
5.qiao.h.query()
执行查询操作，需要传入回调函数操作返回的结果，代码如下：
qiao.h.query = function(db, sql, func){
if(db && sql){
db.transaction(function(tx){
tx.executeSql(sql, [], function(tx, results) {
func(results);
}, null);
});
}
};
6.menu页面的删除添加和查询
为了app更加流畅，在list页面只移除了li元素，其他所有数据库操作都放到menu页面进行，
包括，删除todo表中的事项，添加到done表，查询done表并显示，代码如下：
// 初始化
mui.init({
keyEventBind : {
backbutton : false
}
});
// 所有的方法都放到这里
mui.plusReady(function(){
initDoneList();
// 添加已完成事项
window.addEventListener('doneItem', doneItemHandler);
});
// 初始化待办事项
function initDoneList(){
var $ul = $('#donelist').empty();
qiao.h.query(qiao.h.db(), 'select * from t_plan_day_done order by id desc', function(res){
for (i = 0; i < res.rows.length; i++) {
$ul.append(genLi(res.rows.item(i).plan_title));
}
showList($ul);
});
}
function genLi(title){
return '话说mui两种页面间传值的方法，一是evalJs，但是不做推荐，为啥不做推荐，请百度之，
然后就是fire的方式了，方便传值，还是比较好的。
这里是list页面对menu页面fire了。
menu页面监听
window.addEventListener('doneItem', doneItemHandler);
然后就可以尽情的干各种事情了。。
总结
1.websql详解
2.fire详解
更多教程：
HBuilder开发App教程：http://uikoo9.com/book/detail/3
更多学习笔记：http://uikoo9.com/book