シンプルなCordova Android Sqliteの読み取り/書き込みと検索を含む例
私はシンプルなCordovaデータベースを持っていたSqliteを使用してAndroidアプリプロジェクトに取り組んでいました。
--------------------
ID | Name | Number |
--------------------
私はAndroidアプリに慣れていないので、UIの準備ができました。2つのtext inputs、_<div>タグは、テーブルデータと3 buttonsを表示します。ユーザーが各列をタップすると、行の内容を削除または編集するためのポップアップが表示されます。
UIの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;
}
しかし、javascriptのCordovaを使用して挿入、編集、削除、および検索関数を作成する方法を知りたいのですが。
だから、3日間試した後、ようやく完了しました。SqliteとCordovaでPhoneGapデータベースを使用することに興味がある人と共有した方が良いと言いました。答えは次のとおりです。
これらの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>
それでおしまい！これで、Sqliteを使用して、Cordovaデータベース内のデータを追加、編集、削除、検索できます。
興味のある方に役立てば幸いです。
Cordova 5.2.0では、プロジェクトに対して以下を実行する必要がありました。
プラグインcordova plugin add cordova-plugin-sqliteを追加します
また、古いsqlitePlugin.openDatabaseの代わりにwindow.openDatabaseを使用するようになりました