我们手机端的通讯录是用的技术html5 sqlite 加上jquery 实现单机缓存功能 头像是用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, check : 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 self = 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 self = 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 = [], __values = [], __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 = [], __values = [], __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); }
这个是sqlite 基本crud代码
输入框搜索 执行代码
<input class="search-input ub ub-f1" id="search_" oninput="OnInput()" placeholder=" "/>
初始化sqlite数据库持久化脚本
db : new cDB({_db:window.openDatabase("websiteDB", "", "website DB", 5*1000*1000*10)}),
创建通讯录表接口
dbTable : [ { table:‘contacat‘,properties: [ //员工编号,主键 {name:‘empSno‘, type: ‘INT PRIMARY KEY ASC‘}, //姓名 {name:‘username‘,type: ‘‘}, //头像 {name:‘imgBase64‘,type: ‘‘}, //部门 {name:‘deptName‘,type: ‘‘}, //邮箱 {name:‘email‘,type: ‘‘}, //手机号 {name:‘mp‘,type: ‘‘}, //职位 {name:‘positionName‘,type: ‘‘}, //公司号码 {name:‘companySno‘, type: ‘‘} , {name:‘positionNameEn‘, type: ‘‘} , {name:‘deptNameEn‘,type: ‘‘} ] } ], modifyTable : [ { table:‘modifyTimeTable‘,properties: [ {name:‘companySno‘, type: ‘‘}, {name:‘modifyTime‘, type: ‘‘} ] } ], modifyDate:"", isGetService:true, loadDataFlag:true, reloadData:function(){ //先清空列表 $("#list").html("") //清空搜索框 $("#search_").val("") //开始重新同步 contact.isGetService=false; //设置第一次同步 setstorage("isCacheContrat",null); //变量控制 contact.isInit=null; //获取数据 contact.initData(); },
每次点击同步操作 检查网络 如果是3G情况下提示 每次更新仅仅更新修改过的数据
reData:function(){ if(!contact.isGetService){ msgPrompt(getLang("contactWaiting")); return false; } uexDevice.getInfo(‘13‘); uexDevice.cbGetInfo = function(opCode, dataType, data) { //获取手机返回字符串,转换json var device = eval(‘(‘ + data + ‘)‘); var connectStatus=device.connectStatus; //判断当前网络情况 if(connectStatus!=null&&connectStatus.length>0) { //网络不可用返回connectionstatus=1 wifi情况下返回0 connectionstatus1或者是conectionstatus=2是3g或者2g if(connectStatus==-1) { //网络不可能用提示操作 msgPrompt(getLang("wlbukeyong")); return; }else if(connectStatus==0) { //wifi情况直接同步 contact.reloadData() }else if(connectStatus==1 || connectStatus==2) { //如果对话框进行确定或者取消会触发回调函数 uexWindow.cbConfirm = function ConfirmSuccess(opId, dataType, data) { //如果点击确定的话data返回0 if (data == 0) { //同步数据 contact.reloadData() } }; //如果是3g情况进行弹出confirm进行提示 uexWindow.confirm(getLang("sureMsg"), getLang("tongbutishi"), [getLang("sure"), getLang("nosure")]); } } } },
查询sqlite 代码
//清空列表 $("#list").html(""); //渲染操作控制 if(!contact.loadDataFlag) { return false; } contact.loadDataFlag=false; var query = ""; //如果有搜索操作进行追加搜索条件 if(filter!=null) { query = ‘SELECT * FROM contacat where (username like "%‘+filter +‘%" COLLATE NOCASE or email like "%‘+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) { //获取数据循环操作 for (var i = 0; i < res.rows.length; i++) { //根据下标进行获取数据 var result = res.rows.item(i); var imgpt = ""; //如果二进制图片不存在显示默认图片 if (result.imgBase64 == null || result.imgBase64 == undefined|| result.imgBase64 == "") { imgpt = "css/myImg/person.png"; } else { //显示二进制图片 imgpt = "data:image/gif;base64," + result.imgBase64; } contact.pullAppend(result, imgpt); } } contact.loadDataFlag = true;
因为后台是sass 架构 所以A 的通讯录看不到B通讯录 防止切换账号产生脏数据
//根据companysno查询修改时间 防止切换用户重新加载数据 var query = "select * from modifyTimeTable where companySno=‘"+contact.user.companySno+"‘"; //查询操作 进行回调 因为是查询是异步操作所以需要把同步数据放到回调操作 contact.db.query(query,function(tx,res) { //如果有数据操作把数据取出来 if(res.rows.length) { //把上次同步时间 contact.modifyDate = res.rows.item(0).modifyTime; }else { //如果是null表示没有进行同步操作 contact.modifyDate=""; } //如果是第一次操作或者是修改为空的情况进行同步操作,否则直接从数据库渲染 if (contact.isInit == null||contact.isInit==""||contact.modifyDate=="") { //进度条 uexWindow.toast(1, 5,getLang("loadContacts"), -1); //延迟加载数据 setTimeout(function(){ contact.loadGetData(); },200); }else{ //渲染加载 setTimeout(function(){ contact.insertList(null); },1000); }
刚装机器第一次同步时候
//根据companysno查询修改时间 防止切换用户重新加载数据 var query = "select * from modifyTimeTable where companySno=‘"+contact.user.companySno+"‘"; //查询操作 进行回调 因为是查询是异步操作所以需要把同步数据放到回调操作 contact.db.query(query,function(tx,res) { //如果有数据操作把数据取出来 if(res.rows.length) { //把上次同步时间 contact.modifyDate = res.rows.item(0).modifyTime; }else { //如果是null表示没有进行同步操作 contact.modifyDate=""; } //如果是第一次操作或者是修改为空的情况进行同步操作,否则直接从数据库渲染 if (contact.isInit == null||contact.isInit==""||contact.modifyDate=="") { //进度条 uexWindow.toast(1, 5,getLang("loadContacts"), -1); //延迟加载数据 setTimeout(function(){ contact.loadGetData(); },200); }else{ //渲染加载 setTimeout(function(){ contact.insertList(null); },1000); }
递归请求获取每个用户的头像
//获取完毕进行操作 if(index>length-1){ setTimeout(function(){ contact.isGetService=true; //查询最后一次操作事件 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() } ] //存在进行先删除后插入 if(res.rows.length) { contact.db.remove(‘modifyTimeTable‘, [{ ‘name‘: ‘companySno‘, ‘value‘: contact.user.companySno }]); } var row = []; //存放数据 row.push(data); //进行插入操作 contact.db.insert(‘modifyTimeTable‘, row); //进行渲染列表 contact.insertList(null); uexWindow.closeToast(); setstorage("isCacheContrat",123); }) contact.isInit=123; },3000) return false; } var empSno = pep[index].empSno var 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) { //获取单个头像登录失效 if (data.msg == 205) { //登录失效进行跳转登录页面置空session uexWindow.toast(1, 5, getLang("loginFail"), 0); setInterval(function(){ setstorage("sessionId", null); uexWindow.closeToast(); openNewWin(‘login‘, ‘../login/login.html‘, ‘5‘); winClose() }, 2000) }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[data.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); } //下标 index = parseInt(data.index) + 1; //获取下一个用户的头像 contact.getImage(index, pep.length, pep) }); } },error:function(XMLHttpRequest, textStatus, errorThrown){ index=index+1; contact.getImage(index,pep.length,pep) } });
时间: 2024-10-22 02:22:14