基于webSQL与BootStrap的管理系统demo||2018笔记

最近刚接触websql的内容，写了一个管理系统的demo，实现了基本的，增，删，查，改。

​

引入的是bt3.3的cdn和jq的3.3，外加一个js

表格内容是动态生成的，途中遇到一个问题就是，绑定事件的问题，比如删除事件，后来度娘一下，用了on函数，并且是要求是

先绑定父级元素才可以。代码如下

$('#book_row').on('click','.update',function(e){...}
$('#book_row').on('click','.dele',function(e){...}
//#book_row是表格tbody
//.update/.dele是修改与删除按钮

基本表格结构是用得bootstrap的panel面板加上table嵌套的。

tr是动态生成，这里写了一个show函数，页面初始化运行，利用data-*传值，将websql查询的数据，输出到表格。

删除与修改都是用的number字段，编号！

前提是已经创建了websql！稍后说websql

var show = function(demo){
	var list ={};//初始化一个对象，存储数据
 	demo.transaction(function (book) {
            book.executeSql('SELECT * FROM book', [], function (book, results) {
               var len = results.rows.length;
              list = results; 
              //console.log(list.rows);
              for(var index=0;index<len;++index){
              	$('#book_row').append(
              		'<tr><td>'+list.rows[index].number+
              		'</td><td>'+list.rows[index].name+
              		'</td><td>'+list.rows[index].author+
              		'</td><td>'+list.rows[index].page+
              		'</td><td>'+list.rows[index].price+' 元</td><td><button class="btn btn-primary update" data-number='+list.rows[index].number+' data-name='+list.rows[index].name+' data-author='+list.rows[index].author+' data-page='+list.rows[index].page+' data-price='+list.rows[index].price+' data-toggle="modal" data-target="#modal2">修改</button></td><td><button class="btn btn-danger dele"  data-number='+list.rows[index].number+'>删除</button></td></tr>');
                 
              }
            
            }, null);
            
         });

}//展示数据

现在看看websql，这是html5里的，基本没用过，看看文档，有三个api，分别是

1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
2. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
3. executeSql：这个方法用于执行实际的 SQL 查询

var demo = openDatabase('bore_books', '1.0', 'websql', 2 * 1024 * 1024,function(e){...});
//创建websql数据库，第一个参数是数据库名称，参数二是版本，参数三是描述，参数四是大小，参数五是回调函数

demo.transaction(function (book) {  
   book.executeSql('CREATE TABLE IF NOT EXISTS book (number,name,author,page,price)');
	});
   //创建数据表

这样只要熟悉SQL就可以直接使用啦。

下面是增删查改的部分代码（搜索本来打算用jq的过滤器直接隐藏，没写好，用的直接生成查询的结果，不上码了）

​

var add = function(bookList,demo) {
 	var bookList=bookList;
   demo.transaction(function (book) {  
   book.executeSql("INSERT INTO book (number,name,author,page,price) VALUES (?,?,?,?,?)",
   	[bookList.number,bookList.name,bookList.author,bookList.page,bookList.price]);
   //console.log(bookList);
});
 };//添加数据
//传入两个参数，一个是实例化的数据库对象，一个是数据，这里？是动态绑定输出，后面的[]是变量

var dele = function(number,demo){
	var number=String(number);//强制转字符串
	demo.transaction(function (book) {
            book.executeSql('DELETE FROM book WHERE number=?',[number]); 
         });
};
//删除数据

var update = function(bookList,number,demo){
 	var bookList=bookList;
 	var number=number;
 	//console.log(number);
   demo.transaction(function (book) {  
   book.executeSql("UPDATE book SET name=?, author=?, page=?, price=? WHERE number=?",[bookList.name,bookList.author,bookList.page,bookList.price,number]);
   //console.log(bookList);

});

 };//更新数据
//更新数据用得是bootstrap的modal，用data传值到modal的val中。

下图为添加数据的modal和修改数据的modal，都是用的data传值，不过修改直接将值传到了value中，编号不支持修改

​​

完啦。