个人中心
gpt4 book ai didi

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

转载 作者：IT王子 更新时间：2023-10-28 23:28:25 32 4
gpt4 key购买 nike

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

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

由于我是 Android 应用程序的新手，所以我刚刚准备好 UI。我有两个 text inputs , 一个 <div>标签显示表格数据和 3 buttons .当用户点击每一列时，会弹出一个用于删除或编辑行内容的弹出窗口。

enter image description here

这里是 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 .

希望对有兴趣的 friend 有所帮助。

关于javascript - 一个简单的 Cordova android 示例，包括 Sqlite 读/写和搜索，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26604952/

32 4 0
文章推荐： android - ClusterManager 重绘 Google maps v2 utils 的标记
文章推荐： Android背景图片内存使用情况
文章推荐： .net - 如何解决 .NET Webbrowser 控件中的内存泄漏问题？
文章推荐： c - free 和 malloc 在 C 中是如何工作的？
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com