HTML5技术

HTML5 离线存储之Web SQL - jerrylsxu(2)

字号+ 作者:H5之家 来源:博客园 2016-03-28 18:00 我要评论( )

1 function userStory(id, name, role, ability, benefit, importance, estimate, notes) { 2this.id = id; 3this.name = name; 4this.role = role; 5this.ability = ability; 6this.benefit = benefit; 7this.impo

1 function userStory(id, name, role, ability, benefit, importance, estimate, notes) {
2 this.id = id;
3 this.name = name;
4 this.role = role;
5 this.ability = ability;
6 this.benefit = benefit;
7 this.importance = importance;
8 this.estimate = estimate;
9 this.notes = notes;
10 };

最后贴出应用的代码,业务相关的代码,不看也罢,谁家与谁家的都不同

1 /*
2
3 #sqlresultset
4
5
6  */
7  var _userStoryProvider = new userStoryProvider();
8 $(document).ready(function () {
9 loadUserStory();
10
11 /* 添加用户故事 */
12 $("#btnAdd").click(function () {
13 var item = { role: $("#role").val(), ability: $("#ability").val(), benefit: $("#benefit").val(), name: $("#Name").val(), importance: $("#Importance").val(), estimate: $("#Estimate").val(), notes: $("#Notes").val() };
14 try {
15 _userStoryProvider.addUserStory(item.role, item.ability, item.benefit, item.name, item.importance, item.estimate, item.notes);
16 loadUserStory();
17 } catch (error) {
18 alert("_userStoryProvider.addUserStory:" + error);
19 }
20 });
21
22 /* 创建用户故事表 */
23 $("#btnCreateTable").click(function () {
24 try {
25 _userStoryProvider.createUserStoryTable();
26 } catch (error) {
27 alert("_userStoryProvider.createUserStoryTable:" + error);
28 }
29 });
30
31 /* 删除用户故事表 */
32 $("#btnDropTable").click(function () {
33 try {
34 _userStoryProvider.dropUserStoryTable();
35 } catch (error) {
36 alert("_userStoryProvider.dropUserStoryTable:" + error);
37 }
38 });
39 });
40
41  /* 加载用户故事 */
42 function loadUserStory() {
43 try {
44 _userStoryProvider.loadUserStories(function (result) {
45 var _userStories = new Array();
46 for (var i = 0; i < result.rows.length; i++) {
47 var o = result.rows.item(i);
48 var _userStory = new userStory(o.id, o.name, o.role, o.ability, o.benefit, o.importance, o.estimate, o.notes);
49 _userStories.push(_userStory);
50 }
51
52 if (!_userStories) return;
53 var table = document.getElementById("user_story_table");
54 if (!table) return;
55 var _trs = table.getElementsByTagName("tr");
56 var _len = _trs.length;
57 for (var i = 0; i < _len; i++) {
58 table.removeChild(_trs[i]);
59 }
60 {
61 var tr = document.createElement("tr");
62 tr.setAttribute("class", "product_backlog_row header");
63 {
64 tr.appendChild(CreateTd("id", "id"));
65 tr.appendChild(CreateTd("name", "name"));
66 tr.appendChild(CreateTd("importance", "importance"));
67 tr.appendChild(CreateTd("estimate", "estimate"));
68 tr.appendChild(CreateTd("description", "role"));
69 tr.appendChild(CreateTd("notes", "notes"));
70 tr.appendChild(CreateTd("delete", "delete"));
71 };
72 table.appendChild(tr);
73 }
74 for (var i = 0; i < _userStories.length; i++) {
75 CreateRow(table, _userStories[i]);
76 }
77 });
78 } catch (error) {
79 alert("_userStoryProvider.loadUserStories:" + error);
80 }
81 }
82 function CreateRow(table, userStory) {
83 if (!table) return;
84 if (!userStory) return;
85 {
86 var tr = document.createElement("tr");
87 tr.setAttribute("class", "product_backlog_row");
88 {
89 tr.appendChild(CreateTd("id", userStory.id));
90 tr.appendChild(CreateTd("name", userStory.name));
91 tr.appendChild(CreateTd("importance", userStory.importance));
92 tr.appendChild(CreateTd("estimate", userStory.estimate));
93 tr.appendChild(CreateTd("description", userStory.role));
94 tr.appendChild(CreateTd("notes", userStory.notes));
95 tr.appendChild(CreateDeleteButton("delete_button", userStory.id));
96 };
97 table.appendChild(tr);
98 }
99 }
100 function CreateTd(name, value) {
101 var td = document.createElement("td");
102 td.setAttribute("class", "user_story " + name);
103 td.innerText = value;
104 return td;
105 };
106 function CreateDeleteButton(name, id) {
107 var td = document.createElement("td");
108 td.setAttribute("class", "user_story " + name);
109 /* 删除用户故事 */
110 td.innerHTML = "<a href=\"###\" title=\"delete\" onclick=\"javascript:_userStoryProvider.removeUserStory(\'" + id + "');removeRow(this);\">>>delete</a>";
111 return td;
112 }
113 function removeRow(obj) {
114 document.getElementById("user_story_table").deleteRow(obj.parentNode.parentNode.rowIndex);
115 //obj.parentNode.parentNode.removeNode(true);
116 }

 

有一个小例子,点这里下载(占位,有点小毛病改好就放)

看完代码复习下基本功课

1,WindowDatabase接口,注意openDatabase方法

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

网友点评
"