一个简单的Cordova android示例,包括Sqlite读/写和search

我正在使用Cordova在我有一个简单的Sqlite数据库的Android应用程序项目。

 -------------------- ID | Name | Number | -------------------- 

由于我是Android应用程序中的新手,我只是准备好了UI。 我有两个text inputs ,一个<div>标签来显示表数据和3个buttons 。 当用户点击每一列时,popup窗口显示删除或编辑行内容。

在这里输入图像说明

以下是用户界面的HTML代码:

  <body> <h1>My first App</h1> <p>Open Database</p> <div id="qrpopup" > //The hidden div tag for implementing the popup <hr/> <input type="text" id="editNameBox"><br> <input type="text" id="editNumberBox"><br> <button onclick="goDelete()">Delete</button> <button onclick="goEdit()">Edit</button> <button onclick="document.getElementById('qrpopup').style.display='none';">Discard</button> </div> <div> Name<input type="text" value="Name" id="txtName"> Number<input type="text" value="123" id="txtNumber"><hr/> </div> <div id="tblDiv"></div> <div style="text-align: center"> <button onclick="goInsert()">Insert</button> <button onclick="goSearch()">Search</button> <button onclick="successCB()">Show All</button> </div> </body> 

此外,我使用了一些Css样式,使我的应用程序看起来更好。 这是我的style.css文件:

 input[type='text'] { border: 1px solid black; width: 200px; margin-left: 10px; } table { width:100%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color:#fff; } table#t01 th { background-color: black; color: white; } button { margin: 10px; font: bold 13px "Helvetica Neue", Helvetica, Arial, clean, sans-serif !important; text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); display: inline-block; color: white; padding: 5px 10px 5px; white-space: nowrap; text-decoration: none; cursor: pointer; background-color: #BE3E76; border-style: none; text-align: center; overflow: visible; } button:active { background-position: 0 -100px; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7); -webkit-box-shadow: none; } #qrpopup { position:fixed;z-index:9999;background-color:rgba(0, 0, 0,0.9);width:100%; height:100%;display:none; } 

但我想知道如何创build插入,编辑,删除和searchfunction在Cordova使用javascript

Solutions Collecting From Web of "一个简单的Cordova android示例,包括Sqlite读/写和search"

因此,经过3天的尝试,我终于完成了,我说最好与有兴趣在CordovaPhoneGap中使用Sqlite数据库的人分享。 所以这里是答案:

这些scripts<head>标签上:

  <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for Cordova to load // document.addEventListener("deviceready", onDeviceReady, false); var currentRow; // Populate the database // function populateDB(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id INTEGER PRIMARY KEY AUTOINCREMENT, name,number)'); } // Query the database // function queryDB(tx) { tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB); } function searchQueryDB(tx) { tx.executeSql("SELECT * FROM DEMO where name like ('%"+ document.getElementById("txtName").value + "%')", [], querySuccess, errorCB); } // Query the success callback // function querySuccess(tx, results) { var tblText='<table id="t01"><tr><th>ID</th> <th>Name</th> <th>Number</th></tr>'; var len = results.rows.length; for (var i = 0; i < len; i++) { var tmpArgs=results.rows.item(i).id + ",'" + results.rows.item(i).name + "','" + results.rows.item(i).number+"'"; tblText +='<tr onclick="goPopup('+ tmpArgs + ');"><td>' + results.rows.item(i).id +'</td><td>' + results.rows.item(i).name +'</td><td>' + results.rows.item(i).number +'</td></tr>'; } tblText +="</table>"; document.getElementById("tblDiv").innerHTML =tblText; } //Delete query function deleteRow(tx) { tx.executeSql('DELETE FROM DEMO WHERE id = ' + currentRow, [], queryDB, errorCB); } // Transaction error callback // function errorCB(err) { alert("Error processing SQL: "+err.code); } // Transaction success callback // function successCB() { var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); db.transaction(queryDB, errorCB); } // Cordova is ready // function onDeviceReady() { var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); db.transaction(populateDB, errorCB, successCB); } //Insert query // function insertDB(tx) { tx.executeSql('INSERT INTO DEMO (name,number) VALUES ("' +document.getElementById("txtName").value +'","'+document.getElementById("txtNumber").value+'")'); } function goInsert() { var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); db.transaction(insertDB, errorCB, successCB); } function goSearch() { var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); db.transaction(searchQueryDB, errorCB); } function goDelete() { var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); db.transaction(deleteRow, errorCB); document.getElementById('qrpopup').style.display='none'; } //Show the popup after tapping a row in table // function goPopup(row,rowname,rownum) { currentRow=row; document.getElementById("qrpopup").style.display="block"; document.getElementById("editNameBox").value = rowname; document.getElementById("editNumberBox").value = rownum; } function editRow(tx) { tx.executeSql('UPDATE DEMO SET name ="'+document.getElementById("editNameBox").value+ '", number= "'+document.getElementById("editNumberBox").value+ '" WHERE id = ' + currentRow, [], queryDB, errorCB); } function goEdit() { var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); db.transaction(editRow, errorCB); document.getElementById('qrpopup').style.display='none'; } </script> 

而已! 现在您可以使用CordovaSqlite数据库中添加,编辑,删除和search数据。

希望对有兴趣的人有帮助。

Cordova 5.2.0我不得不做以下项目。

添加插件cordova插件添加cordova-plugin-sqlite

此外,它现在使用sqlitePlugin.openDatabase而不是旧的window.openDatabase