关于html5 通讯录功能
浏览数：50 /
时间：2015年06月09日
我们手机端的通讯录是用的技术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)
}
});
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
