SHARE
TWEET

sasasa

a guest Apr 26th, 2019 85 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  4.         <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.2/jsrender.min.js"></script>
  5.  
  6.         <script id="row" type="text/x-jsrender">
  7.             <tr>
  8.                 <td>{{:name}}</td>
  9.                 <td>{{:phone}}</td>
  10.                 <td>
  11.                     <input type="button" id="btnEdit" value="編輯" cid="{{:name}}" />
  12.                     <input type="button" id="btnDelete" value="刪除" cid="{{:name}}" />
  13.                 </td>
  14.             </tr>
  15.         </script>
  16.  
  17.         <script id="rowEdit" type="text/x-jsrender">
  18.             <tr>
  19.                 <td>{{:name}}</td>
  20.                 <td>
  21.                     <input type="text" id="phone" value="{{:phone}}" />
  22.                 </td>
  23.                 <td>
  24.                     <input type="button" id="btnUpdate" value="更新" cid="{{:name}}" />
  25.                     <input type="button" id="btnCancel" value="取消" />
  26.                 </td>
  27.             </tr>
  28.         </script>
  29.  
  30.         <script>
  31.  
  32.             function openDB(callback, storename)
  33.             {
  34.                 var request = window.indexedDB.open("DB1", 2);
  35.                 request.onsuccess = function(e){
  36.                     var db = request.result;
  37.  
  38.                     if (storename) {
  39.                         var tran = db.transaction(storename, "readwrite");
  40.                         var store = tran.objectStore(storename);
  41.                         callback(db, store);
  42.                     }
  43.                     else
  44.                         callback(db);
  45.                 };
  46.                 request.onupgradeneeded = function(e){
  47.                     var db = e.target.result;
  48.                     alert("OK");
  49.                     if (e.oldVersion < 1) {
  50.                         var store = db.createObjectStore("contacts", { keyPath: "name" });
  51.                     }
  52.                     if (e.oldVersion < 2) {
  53.                         var store = request.transaction.objectStore("contacts");
  54.                         var indexName = store.createIndex("index_name", "name", { unique: true });
  55.                         var indexPhone = store.createIndex("index_phone", "phone", { unique: false });
  56.                     }
  57.                 };
  58.             }
  59.  
  60.             function show(phone) {
  61.                 $("#t1 tr:gt(0)").remove();
  62.                
  63.                 openDB(function(db, store){
  64.                     var request;
  65.                     if (!phone)
  66.                         request = store.openCursor();
  67.                     else {
  68.                         var index = store.index("index_phone");
  69.                         request = index.openCursor(IDBKeyRange.only(phone));
  70.                     }
  71.  
  72.                     request.onsuccess = function(e) {
  73.                         var cursor = e.target.result;
  74.                         if (cursor) {
  75.                             var html = $.templates("#row").render(cursor.value);
  76.                             $(html)
  77.                                 .find("#btnDelete").click(function(){
  78.                                     var key = $(this).attr("cid");
  79.                                     if (confirm(`確定要刪除 ${key} 嗎?`)) {
  80.                                         openDB(function(db, store){
  81.                                             var reqDelete = store.delete(key);
  82.                                             reqDelete.onsuccess = function(){
  83.                                                 show();
  84.                                             };
  85.                                         }, "contacts");
  86.                                     }
  87.                                 }).end()
  88.                                 .find("#btnEdit").click(function(){
  89.                                     var key = $(this).attr("cid");
  90.                                     var tr = $(this).parent().parent();
  91.                                     openDB(function(db, store){
  92.                                         var reqGet = store.get(key);
  93.                                         reqGet.onsuccess = function(){
  94.                                             var obj = reqGet.result;
  95.                                             var html = $.templates("#rowEdit").render(obj);
  96.                                             $(html)
  97.                                                 .find("#btnUpdate").click(function(){
  98.                                                     var key = $(this).attr("cid");
  99.                                                     var phone = $(this).parent().parent().find("#phone").val();
  100.                                                     openDB(function(db, store){
  101.                                                         var reqGet2 = store.get(key);
  102.                                                         reqGet2.onsuccess = function(){
  103.                                                             var obj2 = reqGet2.result;
  104.                                                             obj2.phone = phone;
  105.                                                             store.put(obj2).onsuccess = function(){
  106.                                                                 show();
  107.                                                             };
  108.                                                         };
  109.                                                     }, "contacts");
  110.                                                 }).end()
  111.                                                 .find("#btnCancel").click(function(){
  112.                                                     show();
  113.                                                 }).end()
  114.                                                 .replaceAll(tr);
  115.                                         };
  116.                                     }, "contacts");
  117.                                 }).end()
  118.                                 .appendTo("#t1");
  119.                             cursor.continue();
  120.                         }
  121.                     };
  122.                 }, "contacts");
  123.             }
  124.  
  125.          
  126.  
  127.             $(function(){
  128.                 show();
  129.  
  130.                 $("#btnAdd").click(function(){
  131.                     var obj = {
  132.                         name: $("#name").val(),
  133.                         phone: $("#phone").val()                        
  134.                     };        
  135.  
  136.                     openDB(function(db, store){
  137.                         var req = store.add(obj);
  138.                         req.onsuccess = function(e) {
  139.                             show();
  140.                         };
  141.                     }, "contacts");
  142.  
  143.                    
  144.                 });
  145.  
  146.                 $("#btnSearch").click(function(){
  147.                     var phone = $("#phone").val();
  148.                     show(phone);
  149.                 });
  150.             });            
  151.         </script>
  152.     </head>
  153.     <body>
  154.         Name: <input type="text" id="name" /><br />
  155.         Phone: <input type="text" id="phone" />
  156.         <input type="button" id="btnSearch" value="搜尋" />
  157.         <br />
  158.         <input type="button" id="btnAdd" value="新增資料" />
  159.         <table id="t1" border="1">
  160.             <tr>
  161.                 <th>Name</th>
  162.                 <th>Phone</th>
  163.                 <th></th>
  164.             </tr>
  165.         </table>
  166.     </body>
  167. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top