關於html5 通信錄功能
咱們手機端的通信錄是用的技術html5 sqlite 加上jquery 實現單機緩存功能 頭像是用base 64 進行渲染 css
/*************************************/
/* 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代碼
輸入框搜索 執行代碼 html
<input class="search-input ub ub-f1" id="search_" oninput="OnInput()" placeholder=" "/>
初始化sqlite數據庫持久化腳本 html5
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狀況下提示 每次更新僅僅更新修改過的數據 jquery
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通信錄 防止切換帳號產生髒數據 web
//根據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)
}
});
相關文章
- 1. html5錄音功能實戰
- 2. 關於Apache的目錄瀏覽功能
- 3. 關於vue使用recorder.js錄音功能
- 4. 關於微信的分享功能
- 5. [應用模板]HTML5+Phonegap通信錄
- 6. html5 手機端 通信錄 touch 效果
- 7. 關於HTML5
- 8. html5調用攝像頭，錄音功能
- 9. Hybrid html5如何實現錄音功能
- 10. html5實現錄音、拍攝功能
- 更多相關文章...
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • SQL 通配符 - SQL 教程
- • NewSQL-TiDB相關
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. html5錄音功能實戰
- 2. 關於Apache的目錄瀏覽功能
- 3. 關於vue使用recorder.js錄音功能
- 4. 關於微信的分享功能
- 5. [應用模板]HTML5+Phonegap通信錄
- 6. html5 手機端 通信錄 touch 效果
- 7. 關於HTML5
- 8. html5調用攝像頭，錄音功能
- 9. Hybrid html5如何實現錄音功能
- 10. html5實現錄音、拍攝功能