2014-10-28 6 views
16

सहित एक साधारण कॉर्डोवा एंड्रॉइड उदाहरण मैं Cordova का उपयोग कर एंड्रॉइड ऐप प्रोजेक्ट पर काम कर रहा था जिसमें मेरे पास Sqlite डेटाबेस था।स्क्लाइट पढ़ने/लिखने और खोज

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

चूंकि मैं एंड्रॉइड ऐप्स में नया हूं, इसलिए मुझे यूआई तैयार हो गया। मेरे पास तालिका डेटा और 3 buttons दिखाने के लिए दो text inputs है, <div> टैग है। और जब उपयोगकर्ता प्रत्येक कॉलम पर टैप करता है, तो पंक्ति सामग्री को हटाने या संपादित करने के लिए पॉपअप शो ऊपर होता है।

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

लेकिन मुझे पता है कि कैसे मैं डालने बना, संपादित कर सकते हैं, हटा सकते हैं और खोज कार्यों Cordova में javascript का उपयोग कर?

+0

इस के बजाय sqlitePlugin.openDatabase सवाल नहीं है। यदि आप इस कोड को स्टैक ओवरफ़्लो फिट करना चाहते हैं, तो एक प्रश्न पूछें और इसे उत्तर के रूप में उपयोग करें। –

+0

@ सीएल.आई ने अपने क्यू एंड ए को स्टैक नियमों के रूप में संपादित किया। –

उत्तर

39

तो कोशिश करने के 3 दिनों के बाद, मैंने अंततः इसे पूरा कर लिया और मैंने कहा कि और PhoneGap में Sqlite डेटाबेस का उपयोग करने में रुचि रखने वाले लोगों के साथ साझा करना बेहतर है।

ये 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 डेटाबेस में अपने डेटा को जोड़, संपादित, हटा और खोज सकते हैं।

आशा है कि यह रुचि रखने वाले लोगों के लिए सहायक हो।

+1

यह अभी भी काम कर रहा है? –

+0

@TiagoAmaral * अभी भी काम करके आपका क्या मतलब है? * हाँ यह –

+2

यह सहायक था। धन्यवाद – Apostolos

1

Cordova 5.2.0 में मुझे परियोजना के लिए निम्नलिखित करना पड़ा।

प्लगइन कॉर्डोबा प्लगइन cordova-plugin-sqlite

जोड़ने जोड़े इसके अलावा यह अब उपयोग करता वर्ष window.openDatabase

+0

इसे साझा करने के लिए धन्यवाद –

संबंधित मुद्दे