A simple Cordova android example including Sqlite read/write and search

前端 未结 2 1838
被撕碎了的回忆
被撕碎了的回忆 2020-12-22 20:12

I was working on an Android app project using Cordova which in I had a simple Sqlite database.

--------------------
ID | Name | Num         


        
相关标签:
2条回答
  • 2020-12-22 20:46

    In Cordova 5.2.0 I had to do the following to the project.

    Add the plugin cordova plugin add cordova-plugin-sqlite

    Also it now uses the sqlitePlugin.openDatabase instead of the old window.openDatabase

    0 讨论(0)
  • 2020-12-22 21:01

    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 Sqlite database in Cordova and PhoneGap. So here is the answer:

    These scripts goes on <head> tag:

     <!-- 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 Sqlite database using Cordova.

    Hope it be helpful for the ones who are interested.

    0 讨论(0)
提交回复
热议问题