一个简单的 Cordova android 示例，包括 Sqlite 读/写和搜索
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26604952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A simple Cordova android example including Sqlite read/write and search
提问by Alex Jolig
I was working on an Android app project using Cordovawhich in I had a simple Sqlitedatabase.
我正在使用一个 Android 应用程序项目，Cordova其中有一个简单的Sqlite数据库。
--------------------
ID | Name | Number |
--------------------
Since I'm new in android apps, I just Got the UI ready. I have two text inputs, a <div>tag to show the table data and 3 buttons. And when the user taps on each columns, a popup show's up for deleting or editing the row contents.
由于我是 android 应用程序的新手，我刚刚准备好 UI。我有两个text inputs，一个<div>用于显示表格数据的标记和 3 buttons. 当用户点击每一列时，会弹出一个用于删除或编辑行内容的弹出窗口。
Here's the HTMLcode for UI:
这是HTMLUI的代码：
<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>
Also I used some Cssstyles to make my app looks better. Here's my style.cssfile:
我还使用了一些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;
}
But I want to know how can I create insert, edit, delete and search functions using javascriptin Cordova?
但我想知道如何使用javascriptin创建插入、编辑、删除和搜索功能Cordova？
回答by Alex Jolig
So after 3 days of trying, I finally got it done and I said it's better to share it with people who are interested in using Sqlitedatabase in Cordovaand PhoneGap. So here is the answer:
因此，后尝试3天后，我终于得到它做，我说，这是更好地与谁有兴趣使用的人分享它Sqlite的数据库Cordova和PhoneGap。所以这里是答案：
These scriptsgoes on <head>tag:
这些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>
That's it! Now you can add, edit, delete and search through your data in Sqlitedatabase using Cordova.
就是这样！现在，您可以Sqlite使用Cordova.
Hope it be helpful for the ones who are interested.
希望对有兴趣的朋友有所帮助。
回答by user2023448
In Cordova 5.2.0I had to do the following to the project.
在Cordova 5.2.0我必须对项目执行以下操作。
Add the plugin
cordova plugin add cordova-plugin-sqlite
添加插件cordova插件添加 cordova-plugin-sqlite
Also it now uses the sqlitePlugin.openDatabaseinstead of the old
window.openDatabase
此外，它现在使用sqlitePlugin.openDatabase而不是旧的
window.openDatabase
