Un semplice esempio di Cordova Android incluso Sqlite lettura/scrittura e ricerca

Stavo lavorando a un progetto di app Android utilizzando Cordova che in I aveva un semplice database Sqlite.Un semplice esempio di Cordova Android incluso Sqlite lettura/scrittura e ricerca

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

Dato che sono nuovo nelle app Android, ho appena ricevuto l'interfaccia utente. Ho due text inputs, un tag <div> per mostrare i dati della tabella e 3 buttons. E quando l'utente tocca ciascuna colonna, viene visualizzata una finestra popup per l'eliminazione o la modifica dei contenuti della riga.

enter image description here

Ecco il codice HTML per l'interfaccia utente:

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

Inoltre ho usato alcuni Css stili per rendere la mia app sembra migliore. Ecco il mio style.css di file:

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; 
}

Ma io voglio sapere come posso creare inserire, modificare, eliminare e funzioni di ricerca utilizzando javascript in Cordova?

fonte

2014-10-28 Alex Jolig

Questa non è una domanda. Se vuoi rendere questo codice adatto allo Stack Overflow, fai una domanda e usala come risposta. –

@ CL. Ho modificato le mie domande e risposte come regole di stack. –

Così, dopo 3 giorni di tentativi, finalmente ho fatto e mi dicono che è meglio per condividere con le persone che sono interessati ad utilizzare Sqlite database in Cordova e PhoneGap. Quindi, ecco la risposta:

Questi scripts va avanti <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>

Questo è tutto! Ora puoi aggiungere, modificare, cancellare e cercare i tuoi dati nel database Sqlite utilizzando Cordova.

Spero che sia utile per coloro che sono interessati.

fonte

2014-10-28 13:07:37

funziona ancora? –

@TiagoAmaral Che cosa intendi per * funziona ancora? * Sì, questo è –

Questo è stato utile. Grazie – Apostolos

Nel Cordova 5.2.0 ho dovuto fare quanto segue al progetto.

Aggiungi Cordova plug-in plug-in aggiungere cordova-plugin-sqlite

Inoltre ora utilizza l'sqlitePlugin.openDatabase al posto del vecchio window.openDatabase

fonte

2015-12-29 19:15:07 user2023448

Grazie per averlo condiviso –

Un semplice esempio di Cordova Android incluso Sqlite lettura/scrittura e ricerca

risposta

Problemi correlati