html5indexeddb排序,html5的indexedDB数据库操作实例
效果:
代码:
StringUtil.js
//去除字符串中间空格
String.prototype.Trim = function() {
return this.replace(/(^s*)|(s*$)/g,"");
}
//去除字符串左侧空格
String.prototype.LTrim = function() {
return this.replace(/(^s*)/g,"");
}
//去除字符串右侧空格
String.prototype.RTrim = function() {
return this.replace(/(s*$)/g,"");
}
//去除字符串中所有空格(包括中间空格,需要设置第2个参数为:g)
function Trim(str,is_global){
var result;
result = str.replace(/(^s+)|(s+$)/g,"");
if(is_global.toLowerCase()=="g")
result = result.replace(/s/g,"");
return result;
}
indexedDB.js
window.onload = function(){
if(!window.indexedDB){
window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
}
var db = null;
var request = indexedDB.open("mydb");
request.onupgradeneeded = function(e){
//db = request.result;
db = e.target.result;
createObjectStore(db);
}
function createObjectStore(db){
if(db.objectStoreNames.contains("customer")){
db.deleteObjectStore("customer");
}
var objectStore = db.createObjectStore("customer",{keyPath:"id",autoIncrement:true});
objectStore.createIndex("name","name",{unique:false});
objectStore.createIndex("email","email",{unique:true});
objectStore.add({name:"Tom", sex:"male", age: 34, email:"tom@facebok.org"});
objectStore.add({name:"Jiny", sex:"female", age: 25, email:"jiny@home.org"});
objectStore.add({name:"Liam", sex:"male", age: 23, email:"liam@163.com"});
}
request.onsuccess = function(e){
db = e.target.result;
if(!db.version=="1.0"){
var request = db.setVersion("1.0");
request.onsuccess = function(e){
createObjectStore(db);
showDataByCursor();
}
request.onerror = function(e){
alert(e);
}
}else{
showDataByCursor();
}
}
function showDataByCursor(objectStore){
if(!objectStore){
var transaction = db.transaction(["customer"]);
objectStore = transaction.objectStore("customer");
}
console.log("Store-Name :"+objectStore.name);
console.log("Store-KeyPath :"+objectStore.keyPath);
var request = objectStore.openCursor();
request.onsuccess = function(e){
var cursor = e.target.result;
if(cursor){
console.log(cursor.key);
console.log(cursor.value);
var data = cursor.value;
data.id = cursor.key;
showInTable(data);
cursor.continue();
}
}
request.onerror = function(e){
console.log("ERROR");
}
}
var table = document.getElementsByTagName("table")[0];
function showInTable(data){
//table.childNodes
var tbody = table.children[1];
//tbody = document.getElementsByTagName("tbody")[0];
var tr = document.createElement("tr");
var td_id = createTd(data,"id")
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("name","check");
var textNode = td_id.childNodes[0];
checkBox.setAttribute("id",textNode.nodeValue);
//td_id.removeChild(textNode);
td_id.appendChild(checkBox);
//td_id.appendChild(textNode);
tr.appendChild(td_id);
var td_name = createTd(data,"name");
tr.appendChild(td_name);
var td_sex = createTd(data,"sex");
tr.appendChild(td_sex);
var td_age = createTd(data,"age");
tr.appendChild(td_age);
var td_email = createTd(data,"email");
tr.appendChild(td_email);
tbody.appendChild(tr);
}
function createTd(data,key){
var td = document.createElement("td");
td.contentEditable ="true";
var namedNodeMap = td.attributes;
var attrKey = document.createAttribute("key");
attrKey.value = key;
namedNodeMap.setNamedItem(attrKey);
var attrValue = document.createAttribute("value");
attrValue.value = data[key];
namedNodeMap.setNamedItem(attrValue);
var attrType = document.createAttribute("type");
attrType.value = typeof(data[key]);
namedNodeMap.setNamedItem(attrType);
td.innerText = data[key];
td.onblur = function(event){
console.log(this.parentNode.firstElementChild.innerText);
console.log(this.innerText.LTrim().RTrim());
console.log(this.attributes["value"].value);
console.log(this.attributes["key"].value);
console.log(this.innerText);
if(this.attributes["value"].value != this.innerText.LTrim().RTrim()){
saveOrUpdate(event.target);
//或saveOrUpdate(this)
}
}
return td;
}
function saveOrUpdate(obj){
var id = obj.parentNode.firstElementChild.innerText;
var transaction = db.transaction(["customer"],"readwrite");
var objectStore = transaction.objectStore("customer");
var request = objectStore.get(parseInt(id));
//var range = IDBKeyRange.only("Donna");
//var request = objectStore.index("name").openCursor(range);
request.onsuccess = function(event){
if(event.target.result){
//objectStore.delete(id);
var data = event.target.result;
console.log("Update :"+ data);
var value = obj.attributes["type"].value=="number"?parseInt(obj.innerText):obj.innerText;
data[obj.attributes["key"].value] = value;
var updateRequest = objectStore.put(data);
updateRequest.onsuccess = function(event){
//console.log(event.target);
console.log("UPDATE SUCCESS");
}
updateRequest.onerror = function(event){
console.log("UPDATE ERROR");
}
}else{
var data = {};
var tds = obj.parentNode.children;
for(var i=0;i
var td = tds[i];
var key = td.attributes["key"].value;
data[key] = td.attributes["type"].value=="number"?parseInt(td.innerText):td.innerText;
}
console.log("Add :"+ data);
var saveRequest = objectStore.add(data);
saveRequest.onsuccess = function(){
console.log("SAVE SUCCESS");
}
saveRequest.onerror = function(){
console.log("SAVE ERROR");
}
}
}
request.onerror = function(event){
alert(event);
}
}
var name = document.getElementsByName("name")[0];
var email = document.getElementsByName("email")[0];
var select = document.getElementsByTagName("button")[0];
select.onclick = function(event){
var value_name = name.value.LTrim().RTrim();
var value_email = email.value.LTrim().RTrim();
var transaction = db.transaction(["customer"],"readonly");
var objectStore = transaction.objectStore("customer");
var tbody = table.children[1];
var elements = tbody.children;
var count = elements.length;
for(var i=0;i
//动态移除,没有i++,始终移除第一个
tbody.removeChild(elements[i]);
}
if(value_name==""&& value_email==""){
var request = objectStore.openCursor();
request.onsuccess = function(event){
var cursor = event.target.result;
if(cursor){
showInTable(cursor.value)
cursor.continue();
}
console.log("GETALL SUCCESS");
};
request.onerror = function(event){
console.log(event.target);
console.log("GETALL ERROR");
};
}else{
if(value_name!=""){
var range = IDBKeyRange.only(value_name);
var request = objectStore.index("name").openCursor(range);
request.onsuccess = function(event){
var cursor = event.target.result;
if(cursor){
console.log("key :"+cursor.key);
console.log("value :"+cursor.value);
showInTable(cursor.value)
cursor.continue();
}
console.log("SELECT BY NAME SUCCESS");
}
request.onerror = function(event){
console.log("SELECT BY NAME ERROR");
}
}
if(value_email!=""){
var range = IDBKeyRange.only(value_email);
var request = objectStore.index("email").openCursor(range);
request.onsuccess = function(event){
var cursor = event.target.result;
if(cursor){
console.log("key :"+cursor.key);
console.log("value :"+cursor.value);
showInTable(cursor.value)
cursor.continue();
}
console.log("SELECT BY EMIAL SUCCESS");
}
request.onerror = function(event){
console.log("SELECT BY EMAIL ERROR");
}
}
}
}
var checkAll = document.getElementsByName("checkAll")[0];
var btnDelete = document.getElementsByName("delete")[0];
var btnClear = document.getElementsByName("clear")[0];
checkAll.onclick = function(event){
var checkBoxs = document.getElementsByName("check");
console.log(checkBoxs);
if(this.checked==true){
for(var i=0;i
checkBoxs[i].checked = true;
}
}else{
for(var i=0;i
checkBoxs[i].checked = false;
}
}
}
btnDelete.addEventListener("click",function(event){
var checkBoxs = document.getElementsByName("check");
console.log(checkBoxs);
var transaction = null;
var objectStore = null;
var request = null;
for(var i=0;i
var checkBox = checkBoxs[i];
if(checkBox.checked == true){
if(request == null){
transaction = db.transaction(["customer"],"readwrite");
objectStore = transaction.objectStore("customer");
}
var id = parseInt(checkBox.attributes["id"].value);
console.log("checked :"+id);
request = objectStore.get(id);
request.onsuccess = function(event){
if(event.target.result){
var record = event.target.result;
objectStore.delete(record.id);
for(var j=0;j
if(checkBoxs[j].attributes["id"].value-record.id==0){
var tr = checkBoxs[j].parentElement.parentElement;
var tbody = checkBoxs[j].parentElement.parentElement.parentElement;
tbody.removeChild(tr);
break;
}
}
console.log("DELETE SUCCESS");
}
};
request.onerror = function(event){
console.log("DELETE ERROR");
};
}
}
});
btnClear.addEventListener("click",function(event){
var objectStore = db.transaction(["customer"],"readwrite").objectStore("customer");
var request = objectStore.clear();
request.onsuccess = function(event){
console.log("CLEAR SUCCESS");
objectStore.openCursor().onsuccess = function(event){
var tbody = table.children[1];
var elements = tbody.children;
for(var i=0;i
//动态移除,没有i++,始终移除第一个
tbody.removeChild(elements[i]);
}
var cursor = event.target.result;
if(cursor){
var data = cursor.value;
data.id = cursor.key;
showInTable(data);
cursor.continue();
}
console.log("SHOW SUCCESS");
}
}
request.onerror = function(event){
console.log("CLEAR ERROR");
}
});
};
indexedDB.html
IndexedDB
姓名:
邮箱:
查询
ID姓名性别年龄邮箱
全选
html5indexeddb排序,html5的indexedDB数据库操作实例相关推荐
- .ne中的控制器循环出来的数据如何显示在视图上_Web程序设计-ASP.NET MVC4数据库操作实例...
ASP.NET MVC4数据库操作实例 之前文章介绍了MVC4与Pure框架结合进行的网页设计过程中如何定义控制器.方法.模型.视图等.并使用实例进行了简单说明.本文将在此基础上进一步说明如何使用MV ...
- 大数据——MySQL数据库操作实例
大数据--四种数据库(MySQL,HBase,MongoDB,Redis)操作实例 问题描述: Student学生表 1. 根据上面给出的表格,利用MySQL5.7设计出student学生表格; a) ...
- 大数据——MongoDB数据库操作实例
大数据--四种数据库(MySQL,HBase,MongoDB,Redis)操作实例 问题描述: student文档如下: 1. 根据上面给出的文档信息,用MongoDB模式设计student集合. a ...
- 大数据——HBase数据库操作实例
大数据--四种数据库(MySQL,HBase,MongoDB,Redis)操作实例 问题描述: Student学生表 1. 根据上面给出的表格,用Hbase Shell模式设计student学生表格. ...
- html5 indexeddb 排序,html5 – 在IndexedDB中,有没有办法进行排序复合查询?
本回答中使用的术语"复合查询"是指在其WHERE子句中涉及多个条件的SQL SELECT语句.虽然indexedDB规范中没有提到这样的查询,但您可以通过创建一个包含一组属性名称的 ...
- python数据库操作实例
本篇文章主要讲解python3.9.6下数据库的链接和查询数据的方法 前置环境需要安装mysql和json两个模块,引入方式为import 模块名,不懂的朋友可以先看<python小白操作入门教 ...
- C# SQLite 数据库操作实例2
运行环境:Window7 64bit,.NetFramework4.61,C# 7.0 参考: SQLite 官网 SQL As Understood By SQLite System.Data.SQ ...
- [C++]MySQL数据库操作实例
由于课程大实验需要使用c++操作MySQL数据库,经过一番研究终于成功实现VS2008中与MySQL的连接. 环境设置: 安装完MySQL之后,将安装目录中的include目录下的libmysql ...
- html5连接mysql数据库操作_html5-本地数据库的操作
/* IE11不支持此操作 创建数据库 解释一下openDatabase方法打开一个已经存在的数据库,如果数据库不存在,它还可以创建数据库.几个参数意义分别是: 1,数据库名称. 2,版本号 目前为1 ...
最新文章
- 结构体为什么要4字节对齐
- post、get的区别
- python基础(一)简单入门
- 终于找到了:NuGet 修改包路径
- div 设置a4大小_如何在A4纸张尺寸页面制作HTML页面?
- ssh框架常见错误与解决方法
- 老师也不是什么好东西
- delphi 如何知道 Treeview,Listview 当前最上面显示的节点
- Python项目开发基础 -- 函数参数与数据库连接参数
- PLC和变频器通讯方式
- ethercat转profinet网关_Profinet与EtherCAT网关使用方法
- Android开发-WebView中实现Android调用JS JS调用Android 【三】
- 智能合约升级原理01---起源
- 国外免费电子书资源下载
- google 搜索十大搜索技巧和实用小技巧
- 大数据开发复习Spark篇
- linux系统硬盘设置密码,linux下硬盘加密
- JSP-----JSP简介
- 解决idea在运行时出现Picked up JAVA_TOOL_OPTIONS: -Dfile.encoding=UTF-8?
- 将毫秒转换为时间(HH:ss:mm)
热门文章
- Lingo求解线性规划案例1——生产计划问题
- 微信小程序 新版canvas绘制图片方法
- Angular4与PrimeNG
- Java基础 DAY05
- 苹果4怎么越狱_什么是刷机?什么是越狱?刷机和越狱是一回事吗?
- DNS,FTP,HTTP,DHCP,TFTP,SMTP详解
- python pandas 增加一列_pandas删除行删除列增加行增加列的实现
- Jenkins使用FTP上传文件报错问题处理
- Linux连接荣耀路由器pro2,荣耀路由器Pro2与路由存储、远程访问、家庭共享
- 2020年中国知识产权服务从业人员数、营业收入及发展前景分析[图]