|
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
- <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
- <title>底部导航</title>
- <link rel="stylesheet" type="text/css" href="./css/api.css"/>
- <link rel="stylesheet" type="text/css" href="./css/style.css"/>
- <style>
- button{
- width: 100%; height: 60px; color: #fff; background-color: green; margin-top: 10px;
- }
- table{width: 100%;}
- table tr td{width: 20%; height: 20px; line-height: 20px; text-align: center;}
- .insert{ width: 100%; height: 60px; background-color: green;line-height: 60px; margin-top: 10px;}
- .insert input{ width: 23%; height: 55px; text-align: center; color: #fff; background-color: green; border: 1px solid #33cc2a;}
- .wid{ width: 100%; height: 50px; color: green; border: 1px solid green; margin-top: 10px; }
- </style>
- </head>
- <body>
- <button onclick="newWin()" type="button" name="button">读文件</button>
- <button onclick="createDB()" type="button" name="button">创建表</button>
- <button onclick="deleteDB()" type="button" name="button">删除表</button>
- <div class="insert">
- <input type="text" id="LastName" placeholder="LastName">
- <input type="text" id="FirstName" placeholder="FirstName">
- <input type="text" id="Address" placeholder="Address">
- <input type="text" id="City" placeholder="City">
- </div>
- <button onclick="insertDB()" type="button" name="button">插入数据</button>
- <input class="wid" type="text" id="wid" placeholder="请输入要删除的id">
- <button onclick="deleteData()" type="button" name="button">删除数据</button>
- <button onclick="selectDB()" type="button" name="button">查询数据</button>
- <table>
- <th>id</th><th>lname</th><th>fname</th><th>add</th><th>city</th>
- <tbody id="table">
- </tbody>
- </table>
- </body>
- </html>
- <script type="text/javascript" src="script/api.js"></script>
- <script type="text/javascript">
- var id = 0;
- apiready = function () {
- initDB();
- }
- function initDB(){
- var db = api.require('db');
- db.openDatabase({
- name: 'testDB'
- }, function(ret, err) {
- if (ret.status) {
- console.log(JSON.stringify(ret) + '数据库开启');
- } else {
- alert(JSON.stringify(err) + '数据库开启失败');
- }
- });
- }
- function newWin(){
- api.openWin({
- name: 'db',
- url: 'db.html',
- pageParam: {
- name: 'test'
- }
- });
- }
- //创建数据表
- function createDB(){
- var db = api.require('db');
- db.executeSql({
- name: 'testDB',
- sql: 'CREATE TABLE Persons9(Id_P int, LastName varchar(255), FirstName varchar(255), Address varchar(255), City varchar(255))'
- }, function(ret, err) {
- if (ret.status) {
- console.log(JSON.stringify(ret) + '数据表创建');
- } else {
- console.log(JSON.stringify(err) + '数据表创建失败');
- }
- });
- }
- //删除表信息
- function deleteDB(){
- var db = api.require('db');
- db.executeSql({
- name: 'testDB',
- sql: 'DROP TABLE Persons9'
- }, function(ret, err) {
- if (ret.status) {
- console.log(JSON.stringify(ret) + '删除表成功');
- } else {
- console.log(JSON.stringify(err) + '删除表失败');
- }
- });
- }
- //判断id是否为空
- function deleteData(){
- var wid = $api.dom('#wid').value;
- if (wid) {
- deleteData1(wid);
- } else {
- wid = id ;
- deleteData1(wid);
- }
- }
- //删除数据
- function deleteData1(wid){
- var db = api.require('db');
- db.executeSql({
- name: 'testDB',
- sql: 'DELETE FROM Persons9 WHERE Id_P = ' + wid
- }, function(ret, err) {
- if (ret.status) {
- console.log(JSON.stringify(ret) + '删除数据成功');
- selectDB();
- $api.dom('#wid').value = '';
- if (id<0) {
- id = 0;
- } else {
- id = id - 1;
- }
- } else {
- console.log(JSON.stringify(err) + '删除数据失败');
- }
- });
- }
- //查询数据
- function selectDB(){
- var db = api.require('db');
- db.selectSql({
- name: 'testDB',
- sql: 'SELECT * FROM Persons9'
- }, function(ret, err) {
- if (ret.status) {
- var tabstr = '';
- for (var i = 0; i < ret.data.length; i++) {
- var datas = ret.data[i];
- var newtr = '<tr><td>'+ datas.Id_P +'</td><td>'+datas.LastName+'</td><td>'+ datas.FirstName +'</td><td>'+ datas.Address +'</td><td>'+datas.City+'</td></tr>';
- tabstr = tabstr + newtr;
- }
- $api.dom('#table').innerHTML = tabstr;
- console.log(JSON.stringify(ret) + '查询成功');
- } else {
- console.log(JSON.stringify(err) + '查询失败');
- }
- });
- }
- //插入数据
- function insertDB(){
- id = id + 1;
- var lname = $api.dom('#LastName').value;
- var fname = $api.dom('#FirstName').value;
- var addres = $api.dom('#Address').value;
- var city = $api.dom('#City').value;
- var db = api.require('db');
- var sspl = 'INSERT INTO Persons9 VALUES ( "'+id+'","'+lname+'", "'+fname+'", "'+addres+'", "'+city+'")';
- db.executeSql({
- name: 'testDB',
- sql: sspl
- }, function(ret, err) {
- if (ret.status) {
- selectDB();
- $api.dom('#LastName').value = '';
- $api.dom('#FirstName').value = '';
- $api.dom('#Address').value = '';
- $api.dom('#City').value = '';
- console.log(JSON.stringify(ret) + '插入数据');
- } else {
- console.log(JSON.stringify(err) + '插入数据失败');
- }
- });
- }
- function reUrl(){
- var reUrl = 'skdkjskdjksdkj';
- return reUrl;
- }
- </script>
复制代码
参考一下 |
|