Javascript 一个简单的Cordova android示例，包括Sqlite读/写和搜索_Javascript_Android_Sqlite_Cordova

Javascript 一个简单的Cordova android示例，包括Sqlite读/写和搜索

javascript android sqlite cordova

Javascript 一个简单的Cordova android示例，包括Sqlite读/写和搜索,javascript,android,sqlite,cordova,Javascript,Android,Sqlite,Cordova,我当时正在使用Cordova开发一个安卓应用程序项目，其中我有一个简单的Sqlite数据库 -------------------- ID | Name | Number | -------------------- 因为我是android应用的新手，所以我刚刚准备好UI。我有两个文本输入，一个标签显示表格数据和3个按钮。当用户点击每一列时，就会出现一个用于删除或编辑行内容的弹出窗口以下是UI的HTML代码： <body> <h1>My first Ap

我当时正在使用

Cordova

开发一个安卓应用程序项目，其中我有一个简单的

Sqlite

数据库

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

因为我是android应用的新手，所以我刚刚准备好UI。我有两个

文本输入

，一个

标签显示表格数据和3个

按钮

。当用户点击每一列时，就会出现一个用于删除或编辑行内容的弹出窗口

以下是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>

但我想知道如何在

Cordova

中使用

javascript

创建插入、编辑、删除和搜索功能

经过3天的尝试，我终于完成了，我说最好与那些有兴趣在

Cordova

和

PhoneGap

中使用

Sqlite

数据库的人分享。因此，答案如下：

这些

脚本

在

标签上显示：

 <!-- 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>


//等待Cordova加载
//
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
var当前行；
//填充数据库
//
函数填充B（tx）{
tx.executeSql（'CREATE TABLE IF NOT EXISTS DEMO（id INTEGER主键自动递增，名称，编号）'）；
}
//查询数据库
//
函数queryDB（tx）{
tx.executeSql（'SELECT*FROM DEMO'，[]，querySuccess，errorCB）；
}
函数searchQueryDB（tx）{
tx.executeSql（“从演示中选择*，其中名称类似（'%'+document.getElementById（“txtName”）.value+“%””）”，
[]，查询成功，错误CB）；
}
//查询成功回调
//
函数查询成功（发送，结果）{
var tblText='ID Name Number'；
var len=results.rows.length；
对于（变量i=0；i


就这样！现在，您可以使用Cordova
在Sqlite
数据库中添加、编辑、删除和搜索数据
希望对感兴趣的人有所帮助。
在Cordova 5.2.0
中，我对该项目做了以下工作
添加插件
cordova插件添加cordova插件sqlite

它现在也使用sqlitePlugin.openDatabase而不是旧的
window.openDatabase
这不是问题。如果要使此代码适合堆栈溢出，请提问并以此作为答案。@CL.I编辑了我的Q&a as堆栈规则。谢谢分享，我认为这不是sqlite！这只是webSQL API：我认为cordova的sqlite插件是：我正确吗？@ErikLucio，不，这是创建sqlite数据库的有效方法：。现在它只通过插件支持，正如您所指出的，
 <!-- 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>