About the HTML5 Address book feature

Our mobile phone Address Book is the technology HTML5 SQLite plus jquery for the single-machine cache feature Avatar is rendered with base 64

/*************************************//* Helman, heldes.com *//* Helman at heldes dot com */*            Sqlitedb.js */* SQLite Database Class for HTML5 *//*************************************/ function CDB (CONFS) {var ret = {_db:null, _response:null, _error:null, ch            Eck:function (TBL) {if (!this._db) return false;                   var _sql = ", _sqlfield=", _field=[];              for (Var i=0;i<tbl.length;i++) {_sql = "CREATE TABLE IF not EXISTS" +tbl[i].table+ "(";              _field = tbl[i].properties;                     _sqlfield = ";              for (Var j=0;j<_field.length;j++) {_sqlfield + = ', ' +_field[j].name+ ' +_field[j].type;                     } _sql + = _sqlfield.substr (1) + ");            This.query (_sql,null,null,null);          } return true; }, Getresult:function() {return this._response;          }, Geterror:function () {return this._error;            }, Callback_error:function (tx,_er) {var err = '; if (typeof (tx) = = ' object ') {for (var q in tx) {err + = q+ ' = "' +tx[q]+ '";              ‘; }}else{Err + = tx+ ';            ‘; } if (typeof (_er) = = ' object ') {for (var q in _er) {err + = q+ ' = "' +_er[q]+ '";              ‘; }}else if (typeof (_er) = = ' undefined ') {err + = _er+ ';            ‘;            } console.log (ERR);            if (callback) callback ();          return false;            }, Query:function (Sql,callback,params,er) {if (!this._db) return false;            var = this;              function _er (tx,__er) {__er = Jquery.extend (__er,{sql:sql});              if (er) er (tx,__er);          else Self.callback_error (tx,__er);  };            This._db.transaction (Function (TX) {tx.executesql (SQL, (params?params:[]), callback,_er);          }, _er); }, Update:function (Tbl,sets,clauses,callback) {var __sql = ' Update ' +tbl, _field = null, __set = ', _                   _clause = ", __values=[];              for (Var i=0;i<sets.length;i++) {0 _field = sets[i];                for (Var j=0;j<_field.length;j++) {__set + = ', ' +_field[j].name+ ' =? ';              __values.push (_field[j].value); }} for (Var i=0;i<clauses.length;i++) {__clause + = ', ' +clauses[i].name+ ' =? '              ;            __values.push (Clauses[i].value); } __sql + = ((__set!= ')? ' SET ' +__set.substr (1): ') + ((__clause!= ')? '            WHERE ' +__clause.substr (1): ') + '; ';            This.query (__sql,callback,__values);          return true; }, Remove:function (tbl,clauses) {var __sql = ' DELETE from ' +TBL, __clause = ";                   for (Var i=0;i<clauses.length;i++) __clause + = ', ' +clauses[i].name+ ' = ' +escape (clauses[i].value) + ' ";                   __sql + = ' WHERE ' + ((__clause!= ')? __clause.substr (1): ' FALSE ') + '; ';            This.query (__sql);          return true;            }, Multiinsert:function (Tbl,rows,callback,er) {if (!this._db) return false;            var = this;                   var __sql = ', _field = null, __field = ', __qs = [], __values = [];                This._db.transaction (Function (TX) {for (Var i=0;i<rows.length;i++) {__qs = [];                __values = [];                __field = ";                       _field = Rows[i];                  for (Var j=0;j<_field.length;j++) {__field + = ', ' +_field[j].name+ ';                  __qs.push ('? ');                __values.push (_field[j].value); } tx.executesql (' INSERT into ' +tbl+ ' (' +__FIELD.SUBSTR (1) + ') VALUES (' +__qs.join (', ') + '); ', __values,function () {return false;}, (er? er:self.callback_error)              );              }}, Self.callback_error, function () {if (callback) callback ();            return true;            });          return true; }, Insert:function (Tbl,rows,callback) {var __sql = ', _field = null, __field = ', __qs = [], __value                   s = [], __debug = ';              for (Var i=0;i<rows.length;i++) {__qs = [];              __field = ";                     _field = Rows[i];              __debug + = _field[0].name+ ' = ' +_field[0].value+ ';                for (Var j=0;j<_field.length;j++) {__field + = ', ' +_field[j].name+ ';                __qs.push ('? ');              __values.push (_field[j].value);            } __sql + = ' INSERT into ' +tbl+ ' (' +__field.substr (1) + ') VALUES (' +__qs.join (', ') + '); ';    } this.query (__sql,callback,__values);        return true; }, Insertreplace:function (Tbl,rows,debug) {var __sql = ', _field = null, __field = ', __qs = [], __v                   Alues = [], __debug = ";              for (Var i=0;i<rows.length;i++) {__qs = [];              __field = ";                     _field = Rows[i];              __debug + = _field[0].name+ ' = ' +_field[0].value+ ';                for (Var j=0;j<_field.length;j++) {__field + = ', ' +_field[j].name+ ';                __qs.push ('? ');              __values.push (_field[j].value);            } __sql + = ' INSERT OR REPLACE into ' +tbl+ ' (' +__field.substr (1) + ') VALUES (' +__qs.join (', ') + '); ';            } this.query (__sql,null,__values);          return true;            }, Droptable:function (Tbl,callback) {var __sql = ';            if (tbl==null) return false;            __sql = ' DROP TABLE IF EXISTS ' +tbl;            This.query (__sql,callback); return true;          }} return Jquery.extend (RET,CONFS); }

This is the SQLite basic CRUD code

Input box Search Execution code

<input class= "Search-input ub ub-f1" id= "Search_" oninput= "Oninput ()" placeholder= ""/>

Initialize SQLite database Persistence script

Db:new CDB ({_db:window.opendatabase ("Websitedb", "" "," website db ", 5*1000*1000*10)}),

To create an address list interface

DBTable: [{table: ' Contacat ', properties: [//employee number, primary key {name: ' Empsno ', type: ' INT PRIMARY KEY ASC '},//name {name: ' username ', type: '},//avatar {name: ' imgBase64 ' , type: '},//department {name: ' Deptname ', type: '},//mailbox {name: ' email ', type: '},//' phone number {name: ' MP ', type: '},//position {name: ' pos Itionname ', type: '},//company Number {name: ' Companysno ', type: '}, {name: ' Positionnameen ', type: '}, {name: ' Deptnameen ', type: '}]}],modifytable:        [       &nbsp ;     {                table: ' Modifytimetable ', properties:                 [                      { Name: ' Companysno ', type: '},                      {name: ' Modifytime ', type: ' }                ]            }        ],         Modifydate: ",        isGetService:true,         loaddataflag:true,        reloaddata:function () {            //First clear the list             $ ("#list"). HTML ("")              //empty search box             $ ("#search_"). Val ("")             //start resynchronization              contact.isGetService=false;            //Set the first synchronization             setstorage ("Iscachecontrat", null);             //variable control             contact.isInit=null;            //get Data              contact.initdata ();            },

Check the network every time you click the sync operation if 3G prompts each update to update only the modified data

Redata:function () {if (!contact.isgetservice) {msgprompt (Getlang ("contactwaiting")); return false;} Uexdevice.getinfo (' + '); uexdevice.cbgetinfo = function (OpCode, dataType, data) {//Get phone return string, convert Jsonvar device = eval (' ( ' + Data + '), var connectstatus=device.connectstatus;//to determine the current network condition if (connectstatus!=null&& connectstatus.length>0) {//network is not available return Connectionstatus=1 WiFi case return 0 Connectionstatus1 or conectionstatus=2 is 3g or 2gif (Connectstatus==-1) {//The network is not able to operate msgprompt with hints (Getlang ("Wlbukeyong"); return;} else if (connectstatus==0) {//wifi Case Direct Sync contact.reloaddata ()}else if (connectstatus==1 | | connectstatus==2) {// If the dialog is determined or canceled, the callback function is triggered uexwindow.cbconfirm = function confirmsuccess (opid, DataType, data) {//If click OK, data returns 0 I           F (data = = 0) {//Sync Data Contact.reloaddata ()}}; If it is 3g, the popup Confirm is prompted Uexwindow.confirm (Getlang ("suremsg"), Getlang ("Tongbutishi"), [Getlang ("Sure"), Getlang ("Nosure")]);}}},

Query SQLite code

Empty the list $ ("#list"). HTML ("");//Render operation control if (!contact.loaddataflag) {return false;} Contact.loaddataflag=false;var query = "";//If there is a search operation to append the search condition if (filter!=null) {query = ' SELECT * from Contacat where (usern  Ame like "% ' +filter + '%" COLLATE nocase or email as "% ' +filter+ '%" COLLATE nocase or MP like "% ' +filter+ '%"              COLLATE nocase) and companysno= "' +contact.user.companysno+ '" ORDER by email ASC; }else{query = ' SELECT * from Contacat where companysno= ' ' +contact.user.companysno+ ' "ORDER by email ASC ';} Contact.db.query (Query,function (tx,res) {if (res.rows.length) {//Get Data loop operation for (var i = 0; i < res.rows.length; i++) {/ /Get data based on subscript var result = Res.rows.item (i); var imgpt = "";//if the binary picture does not exist display default picture if (result.imgbase64 = = NULL | | Result.imgbase64 = = undefined| | Result.imgbase64 = = "") {imgpt = "css/myimg/person.png";} else {//display binary picture imgpt = "data:image/gif;base64," + result.imgbase64;}  Contact.pullappend (result, imgpt);} }contact.loaddataflag = true;

Because the background is SASS architecture, so A's address book does not see the B Address book to prevent the switch account generated dirty data

To prevent switching users from reloading data based on COMPANYSNO query modification time var query = "SELECT * from modifytimetable where companysno= '" +contact.user.companysno + "'";//The query operation is callback because the query is an asynchronous operation so it is necessary to put the synchronous data into the callback Operation Contact.db.query (Query,function (tx,res) {///If there is data operation to take the data out if    ( Res.rows.length) {//Put last sync time contact.modifydate = Res.rows.item (0). Modifytime;} else{//if NULL indicates no synchronization operation Contact.modifydate= ""; If it is the first operation or if it is modified to be empty, then it is rendered directly from the database if (contact.isinit = = null| | contact.isinit== "" | | contact.modifydate== "") {//progress bar Uexwindow.toast (1, 5,getlang ("Loadcontacts"),-1);//Delay Loading Data settimeout (function () { Contact.loadgetdata ();},200);} else{//Render Load settimeout (function () {contact.insertlist (null);},1000);}

The first time the machine was synchronized

To prevent switching users from reloading data based on COMPANYSNO query modification time var query = "SELECT * from modifytimetable where companysno= '" +contact.user.companysno + "'";//The query operation is callback because the query is an asynchronous operation so it is necessary to put the synchronous data into the callback Operation Contact.db.query (Query,function (tx,res) {///If there is data operation to take the data out if    ( Res.rows.length) {//Put last sync time contact.modifydate = Res.rows.item (0). Modifytime;} else{//if NULL indicates no synchronization operation Contact.modifydate= ""; If it is the first operation or if it is modified to be empty, then it is rendered directly from the database if (contact.isinit = = null| | contact.isinit== "" | | contact.modifydate== "") {//progress bar Uexwindow.toast (1, 5,getlang ("Loadcontacts"),-1);//Delay Loading Data settimeout (function () { Contact.loadgetdata ();},200);} else{//Render Load settimeout (function () {contact.insertlist (null);},1000);}

Recursive request for each user's avatar

Get finished operation if (index>length-1) {setTimeout (function () {contact.isgetservice=true;//Query last action event var query = "SELECT * From modifytimetable where companysno= "+contact.user.companysno;contact.db.query (query,function (tx,res) {var data=[ {' name ': ' Companysno ', ' Value ': Contact.user.companySno}, {' name ': ' Modifytime ', ' value ': New Date (). GetTime ()}]//present First delete after inserting if (res.rows.length) {contact.db.remove (' modifytimetable ', [{' Name ': ' Companysno ', ' value ': Contact.user.companySno}]);} var row = [];//holds data row.push,//insert Operation Contact.db.insert (' modifytimetable ', row); Render list contact.insertlist (null); Uexwindow.closetoast (); Setstorage ("Iscachecontrat", 123);}) contact.isinit=123;},3000) return false;} var empsno = Pep[index].empsnovar url = apip + "managerdemo/user/empphotoaction.do?token=" + Contact.token + "&empSno= "+ empsno+" &index= "+index;$.ajax ({url:url,data: {" UserName ": Contact.user.userName," Privilegegroupid ": Contact.privilegegroupid},type: ' POST ', DataType: ' JSON ', error:function ({contact.getimage (INDEX,PEP.LENGTH,PEP)},success:function (data) {//Get single Avatar login Invalid if (data.msg = = 205) {// Login failed to jump login page empty session uexwindow.toast (1, 5, Getlang ("Loginfail"), 0); SetInterval (function () {setstorage ("sessionId", null), Uexwindow.closetoast (); Opennewwin (' Login ', '.. /login/login.html ', ' 5 '); Winclose ()},}else {uexwindow.toast (1, 5, Sync1 + (parseint (data.index) + 1) + Sync2 + sync3 + pep.length + sync4 ,-1);  EmpSno1 = pep[data.index].empsno var query = ' SELECT * from contacat where Empsno = ' + Pep[index].empsno; Contact.db.query (query, Function (TX, res) {if (Pep[data.index].status = = "0") {contact.db.remove (' contacat ', [{' Name '): ' Empsno ', ' Value ': Pep[data.index].empsno}]); } else {var contactdata = [{' Name ': ' Empsno ', ' Value ': Pep[data.index].empsno}, {' name ': ' Positionname ', ' value ': Pep[da Ta.index].positionname}, {' name ': ' MP ', ' value ': Pep[data.index].mp}, {' name ': ' Email ', ' value ': Pep[data.index].email }, {' name ': ' Deptname ', ' value ': PEP[DATA.INDEX].DEPTNAme}, {' name ': ' username ', ' value ': Pep[data.index].name}, {' name ': ' Companysno ', ' Value ': Pep[data.index].companysno} {' name ': ' imgBase64 ', ' value ': data.data},{name: ' Positionnameen ', Value:pep[data.index].positionnameen}, {name: ' Deptnameen ', Value:pep[data.index].deptnameen}] if (res.rows.length) {contact.db.remove (' contacat ', [{' Name ': ' Empsno ', ' Value ': Pep[data.index].empsno}]); } var row = []; Row.push (Contactdata); Contact.db.insert (' Contacat ', row); }//Subscript index = parseint (data.index) + 1; Get the next user's Avatar Contact.getimage (index, Pep.length, PEP)}); }},error:function (XMLHttpRequest, Textstatus, Errorthrown) {index=index+1;contact.getimage (INDEX,PEP.LENGTH,PEP)}  });

About the HTML5 Address book feature