利用Jquery+HTML静态模版实现数据的展示及无刷新增加,修改,删除,分页操作!
2011-04-28 08:24 沐海 阅读(1395) 评论(0) 编辑 收藏 举报现实项目中,有些公司可能没想要项目做成一个非常大的成型产品如金蹀,用友,等大型 的SaaS项目,做到任何都可动态配制的,,,,,,,,,,,,,,,,,,,,
只是非常简单的改变 列表展示 的显示标题和字段的顺序的调整.等等,而且又想做到所见即所得. 可又不想做成后台成型的产品,如何实现呢, 有多种解决方法
1种是利用 xlst + xml 方式
2 利用HTML静态页面模板
我这里就采用第二种方式实现
示题图如下:
HTML模版:
生成aspx页面
部分代码如下:
因为要用到JQuery 所以下面几个JS文件是必须的
jquery-1.4.1-vsdoc.js
jquery-1.4.1.js
jquery-1.4.1.min.js
因为我的项目中用到了JSON传递对象,所以JSON2.js是也是必须的
json2.js
针对回传调用JQuery 写的一个公共类 AjaxHelper.js
1 //getJSON处理函数
2 function AjaxCommon() {
3 this.QueryJson = function () {
4 if (arguments.length < 1) return;
5 var obj = arguments[0];
6 var t = Math.round(new Date().getTime() / 1000); //防止 $.getJSON缓存
7 obj.url = "../Handler/" + obj.url + ".ashx?t=" + t + "&Action=" + obj.action + "&JsonCallBack=?"; //这种写法是用于跨域
8 $.getJSON(obj.url, { data: JSON.stringify(obj.data) }, function (data) {
9 if ($.isFunction(obj.CallFunc))
10 obj.CallFunc(data);
11 }
12 );
13 }
14 this.FormatJsonDate = function () { //转换JSON格式日期数据为yyyy-MM-dd
15 var strDate = arguments[0];
16 if (this.IsNullOrEmpty(strDate)) return "";
17 strDate = strDate.substring(6, strDate.length - 2);
18 strDate = new Date(parseInt(strDate));
19 return strDate.getFullYear() + "-" + (strDate.getMonth() + 1) + "-" + strDate.getDate();
20 }
21 }
2 function AjaxCommon() {
3 this.QueryJson = function () {
4 if (arguments.length < 1) return;
5 var obj = arguments[0];
6 var t = Math.round(new Date().getTime() / 1000); //防止 $.getJSON缓存
7 obj.url = "../Handler/" + obj.url + ".ashx?t=" + t + "&Action=" + obj.action + "&JsonCallBack=?"; //这种写法是用于跨域
8 $.getJSON(obj.url, { data: JSON.stringify(obj.data) }, function (data) {
9 if ($.isFunction(obj.CallFunc))
10 obj.CallFunc(data);
11 }
12 );
13 }
14 this.FormatJsonDate = function () { //转换JSON格式日期数据为yyyy-MM-dd
15 var strDate = arguments[0];
16 if (this.IsNullOrEmpty(strDate)) return "";
17 strDate = strDate.substring(6, strDate.length - 2);
18 strDate = new Date(parseInt(strDate));
19 return strDate.getFullYear() + "-" + (strDate.getMonth() + 1) + "-" + strDate.getDate();
20 }
21 }
而针对这个类的前台操作 aspx页
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AdvertManage.aspx.cs" Inherits="Advert_AdvertManage" %>
2
3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
4 "http://www.w3.org/TR/html4/loose.dtd">
5 <html>
6 <head runat="server">
7 <title></title>
8 <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
9 <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
10 <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
11 <script src="../Scripts/json2.js" type="text/javascript"></script>
12 <script src="../Scripts/JQueryHelper.js" type="text/javascript"></script>
13 <script src="../Scripts/AjaxHelper.js" type="text/javascript"></script>
14 <script src="../Scripts/tipswindown.js" type="text/javascript"></script>
15 <link href="../css/tab.css" rel="stylesheet" type="text/css" />
16 <script src="../Scripts/DivHelper.js" type="text/javascript"></script>
17 </head>
18 <body>
19 <form id="form1" runat="server">
20 <div>
21 <asp:HiddenField ID="fid" runat="server" />
22 <asp:HiddenField ID="code" runat="server" />
23 标题:<input type="text" id="title" /><br />
24 内容:<textarea id="content" rows="3" cols="50"></textarea><br />
25 创建时间:<input type="text" id="fcreatedate" /><br />
26 类型:<select id="type" style="width: 120px"></select><br />
27 <input type="button" id="btnSelect" value="查 询" />
28 <input type="button" id="btnSave" value="保 存" />
29 <input type="Reset" value="重 置" />
30 <br />
31 <div id="load" style="font-size: 14px; margin-top: 10px; text-align: center; display: none;">
32 正在加载数据......
33 </div>
34 <br />
35 <table width="99%" border="0" align="center" cellpadding="0" cellspacing="1">
36 <tr>
37 <td width="80%" height="30">
38 </td>
39 <td width="60" background="../images/tab_05.gif">
40 <table width="90%" border="0" cellpadding="0" cellspacing="0">
41 <tr>
42 <td class="STYLE1">
43 <div align="center">
44 <img src="../images/001.gif" width="14" height="14" /></div>
45 </td>
46 <td class="STYLE1">
47 <div align="center">
48 <a href="#" id="add" onclick="showmenu('add','mdiv','show','bottom');">新增</a></div>
49 </td>
50 </tr>
51 </table>
52 </td>
53 <td width="60" background="../images/tab_05.gif">
54 <table width="90%" border="0" cellpadding="0" cellspacing="0">
55 <tr>
56 <td class="STYLE1">
57 <div align="center">
58 <img src="../images/114.gif" width="14" height="14" /></div>
59 </td>
60 <td class="STYLE1">
61 <div align="center">
62 修改</div>
63 </td>
64 </tr>
65 </table>
66 </td>
67 <td width="52" background="../images/tab_05.gif">
68 <table width="88%" border="0" cellpadding="0" cellspacing="0">
69 <tr>
70 <td class="STYLE1">
71 <div align="center">
72 <img src="../images/083.gif" width="14" height="14" /></div>
73 </td>
74 <td class="STYLE1">
75 <div align="center">
76 <a href="#" id="del" onclick="showmenu('del','mdiv','show','bottom');">删除</a></div>
77 </td>
78 </tr>
79 </table>
80 </td>
81 </tr>
82 </table>
83 <span id="list"></span>
84 </div>
85 <div id="mdiv" runat="server">
86 <div style="height: 15px; line-height: 13px; border-bottom: 1px #0099FF solid;">
87 <span style=""> </span><a href="javascript:void(0);" style="color: #ff0000; font-size:12px" onclick="showmenu('del','mdiv','hide','bottom');">[关闭]</a></div>
88 <div style="margin: 0 auto; font-size: 15px; width: 169px; height: 55px; font-weight: bold;
89 color: #000;">
90 基本信息 保存成功!</div>
91 </div>
92 </form>
93 </body>
94 <script>
95 var highlightcolor = '#eafcd5';
96 //此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:(
97 var clickcolor = '#51b2f6';
98 function changeto() {
99
100 }
101 function changeback() {
102
103 }
104 $(document).ready(function () {
105 $("#add").click(function () {
106
107 });
108 });
109 </script>
110 <script language="javascript" type="text/javascript">
111
112 function jsComfirm(url) {
113 if (confirm("确认要删除吗?")) {
114 Delete(url);
115 }
116 }
117 $(function () {
118 var ajaxManage = new AjaxManage();
119 var obj = new Object();
120 var advert = {
121 }
122 obj.url = "../Advert/AdvertManage.aspx?Action=0";
123 obj.data = advert;
124 obj.SuccessCallFunc = function (data) {
125 var datas = data.split('$');
126 $("#type").empty();
127 for (var i = 0; i < datas.length; i++) {
128 var item = datas[i].split('|');
129 $("<option></option>").html("<strong>" + item[0] + "</strong>").val(item[1]).appendTo("#type");
130 }
131 };
132 ajaxManage.Query(obj);
133 })
134 function EditDetail(url) {
135 var ajaxManage = new AjaxManage();
136 var obj = new Object();
137 var advert = {
138 FID: $("#<%=fid.ClientID %>").attr("value"),
139 Code: $("#<%=code.ClientID %>").attr("value"),
140 Title: escape($("#title").attr("value")),
141 Content: escape($("#content").attr("value"))
142 }
143 obj.url = url;
144 obj.data = advert;
145
146 obj.SuccessCallFunc = function (data) {
147
148 var json = data.replace(/"\\\/(Date\([0-9-]+\))\\\/"/gi, 'new $1');
149 var obj = eval('(' + json + ')');
150 $("#title").val(obj.Title);
151 $("#content").val(obj.Content);
152 $("#code").val(obj.Code);
153 $("#fid").val(obj.FID);
154 var fCreateDate = ChangeDateFormat(obj.FCreateDate)
155 $("#fcreatedate").val(fCreateDate); //处理时间
156
157
158 var save = document.getElementById("btnSave");
159 var code = document.getElementById("<%=code.ClientID %>");
160 if (code.value != "") {
161 save.detachEvent("onclick", function () { AjaxPost(); });
162 save.attachEvent("onclick", function () { Edit("../Handler/AdvertPost.ashx?Action=2"); });
163 }
164 };
165 obj.BeforeSendCallFunc = function () {
166 $("#load").show();
167 };
168 obj.CompleteCallFunc = function () {
169 $("#load").hide();
170 };
171 ajaxManage.Query(obj);
172
173 }
174
175 function Edit(url) {
176 var ajaxManage = new AjaxManage();
177 var obj = new Object();
178 var advert = {
179 FID: $("#<%=fid.ClientID %>").attr("value"),
180 Code: $("#<%=code.ClientID %>").attr("value"),
181 Title: escape($("#title").attr("value")),
182 Content: escape($("#content").attr("value"))
183 }
184 obj.url = url;
185 obj.data = advert;
186
187 obj.SuccessCallFunc = function (data) {
188 $("#list").html("");
189 $("#list").html(data);
190 $("#code").val("");
191 $("#fid").val("");
192 };
193 obj.BeforeSendCallFunc = function () {
194 $("#load").show();
195 };
196 obj.CompleteCallFunc = function () {
197 $("#load").hide();
198 };
199 ajaxManage.Query(obj);
200
201 }
202
203 function Delete(url) {
204
205 var ajaxManage = new AjaxManage();
206 var obj = new Object();
207 var advert = {
208 }
209 obj.url = url;
210 obj.data = advert;
211
212 obj.SuccessCallFunc = function (data) {
213 $("#list").html("");
214 $("#list").html(data);
215 };
216 obj.BeforeSendCallFunc = function () {
217 $("#load").show();
218 };
219 obj.CompleteCallFunc = function () {
220 $("#load").hide();
221 };
222 ajaxManage.Query(obj);
223
224 }
225 function ChangeDateFormat(cellval) {
226 var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
227 var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
228 var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
229 return date.getFullYear() + "-" + month + "-" + currentDate;
230 }
231
232 function QueryField(Pindex, OrderField) {
233 var ajaxManage = new AjaxManage();
234 var obj = new Object();
235 var advert = {
236 Title: escape($("#title").attr("value")),
237 Content: escape($("#content").attr("value"))
238 }
239
240 obj.page = Pindex;
241 obj.orderField = OrderField;
242 obj.url = "AdvertQuery";
243 obj.data = advert;
244 obj.action = 0;
245 obj.SuccessCallFunc = function (data) {
246 $("#list").html(data);
247 };
248 obj.BeforeSendCallFunc = function () {
249 $("#load").show();
250 };
251 obj.CompleteCallFunc = function () {
252 $("#load").hide();
253 };
254 ajaxManage.QueryFieldAjax(obj);
255 }
256
257 function Query(Pindex) {
258 var ajaxManage = new AjaxManage();
259 var obj = new Object();
260 var advert = {
261 Title: escape($("#title").attr("value")),
262 Content: escape($("#content").attr("value"))
263 }
264
265 obj.page = Pindex;
266 obj.url = "AdvertQuery";
267 obj.data = advert;
268 obj.action = 0;
269 obj.SuccessCallFunc = function (data) {
270 $("#list").html(data);
271 };
272 obj.BeforeSendCallFunc = function () {
273 $("#load").show();
274 };
275 obj.CompleteCallFunc = function () {
276 $("#load").hide();
277 };
278 ajaxManage.QueryAjax(obj);
279 }
280
281 var save = document.getElementById("btnSave");
282 var query = document.getElementById("btnSelect");
283 var code = document.getElementById("<%=code.ClientID %>");
284
285 save.attachEvent("onclick", function () { AjaxPost(); });
286 //o.attachEvent("onclick", function () { JSONPost(); });
287
288 query.attachEvent("onclick", function () { Query(1); });
289
290
291
292 </script>
293 </html>
294
2
3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
4 "http://www.w3.org/TR/html4/loose.dtd">
5 <html>
6 <head runat="server">
7 <title></title>
8 <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
9 <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
10 <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
11 <script src="../Scripts/json2.js" type="text/javascript"></script>
12 <script src="../Scripts/JQueryHelper.js" type="text/javascript"></script>
13 <script src="../Scripts/AjaxHelper.js" type="text/javascript"></script>
14 <script src="../Scripts/tipswindown.js" type="text/javascript"></script>
15 <link href="../css/tab.css" rel="stylesheet" type="text/css" />
16 <script src="../Scripts/DivHelper.js" type="text/javascript"></script>
17 </head>
18 <body>
19 <form id="form1" runat="server">
20 <div>
21 <asp:HiddenField ID="fid" runat="server" />
22 <asp:HiddenField ID="code" runat="server" />
23 标题:<input type="text" id="title" /><br />
24 内容:<textarea id="content" rows="3" cols="50"></textarea><br />
25 创建时间:<input type="text" id="fcreatedate" /><br />
26 类型:<select id="type" style="width: 120px"></select><br />
27 <input type="button" id="btnSelect" value="查 询" />
28 <input type="button" id="btnSave" value="保 存" />
29 <input type="Reset" value="重 置" />
30 <br />
31 <div id="load" style="font-size: 14px; margin-top: 10px; text-align: center; display: none;">
32 正在加载数据......
33 </div>
34 <br />
35 <table width="99%" border="0" align="center" cellpadding="0" cellspacing="1">
36 <tr>
37 <td width="80%" height="30">
38 </td>
39 <td width="60" background="../images/tab_05.gif">
40 <table width="90%" border="0" cellpadding="0" cellspacing="0">
41 <tr>
42 <td class="STYLE1">
43 <div align="center">
44 <img src="../images/001.gif" width="14" height="14" /></div>
45 </td>
46 <td class="STYLE1">
47 <div align="center">
48 <a href="#" id="add" onclick="showmenu('add','mdiv','show','bottom');">新增</a></div>
49 </td>
50 </tr>
51 </table>
52 </td>
53 <td width="60" background="../images/tab_05.gif">
54 <table width="90%" border="0" cellpadding="0" cellspacing="0">
55 <tr>
56 <td class="STYLE1">
57 <div align="center">
58 <img src="../images/114.gif" width="14" height="14" /></div>
59 </td>
60 <td class="STYLE1">
61 <div align="center">
62 修改</div>
63 </td>
64 </tr>
65 </table>
66 </td>
67 <td width="52" background="../images/tab_05.gif">
68 <table width="88%" border="0" cellpadding="0" cellspacing="0">
69 <tr>
70 <td class="STYLE1">
71 <div align="center">
72 <img src="../images/083.gif" width="14" height="14" /></div>
73 </td>
74 <td class="STYLE1">
75 <div align="center">
76 <a href="#" id="del" onclick="showmenu('del','mdiv','show','bottom');">删除</a></div>
77 </td>
78 </tr>
79 </table>
80 </td>
81 </tr>
82 </table>
83 <span id="list"></span>
84 </div>
85 <div id="mdiv" runat="server">
86 <div style="height: 15px; line-height: 13px; border-bottom: 1px #0099FF solid;">
87 <span style=""> </span><a href="javascript:void(0);" style="color: #ff0000; font-size:12px" onclick="showmenu('del','mdiv','hide','bottom');">[关闭]</a></div>
88 <div style="margin: 0 auto; font-size: 15px; width: 169px; height: 55px; font-weight: bold;
89 color: #000;">
90 基本信息 保存成功!</div>
91 </div>
92 </form>
93 </body>
94 <script>
95 var highlightcolor = '#eafcd5';
96 //此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:(
97 var clickcolor = '#51b2f6';
98 function changeto() {
99
100 }
101 function changeback() {
102
103 }
104 $(document).ready(function () {
105 $("#add").click(function () {
106
107 });
108 });
109 </script>
110 <script language="javascript" type="text/javascript">
111
112 function jsComfirm(url) {
113 if (confirm("确认要删除吗?")) {
114 Delete(url);
115 }
116 }
117 $(function () {
118 var ajaxManage = new AjaxManage();
119 var obj = new Object();
120 var advert = {
121 }
122 obj.url = "../Advert/AdvertManage.aspx?Action=0";
123 obj.data = advert;
124 obj.SuccessCallFunc = function (data) {
125 var datas = data.split('$');
126 $("#type").empty();
127 for (var i = 0; i < datas.length; i++) {
128 var item = datas[i].split('|');
129 $("<option></option>").html("<strong>" + item[0] + "</strong>").val(item[1]).appendTo("#type");
130 }
131 };
132 ajaxManage.Query(obj);
133 })
134 function EditDetail(url) {
135 var ajaxManage = new AjaxManage();
136 var obj = new Object();
137 var advert = {
138 FID: $("#<%=fid.ClientID %>").attr("value"),
139 Code: $("#<%=code.ClientID %>").attr("value"),
140 Title: escape($("#title").attr("value")),
141 Content: escape($("#content").attr("value"))
142 }
143 obj.url = url;
144 obj.data = advert;
145
146 obj.SuccessCallFunc = function (data) {
147
148 var json = data.replace(/"\\\/(Date\([0-9-]+\))\\\/"/gi, 'new $1');
149 var obj = eval('(' + json + ')');
150 $("#title").val(obj.Title);
151 $("#content").val(obj.Content);
152 $("#code").val(obj.Code);
153 $("#fid").val(obj.FID);
154 var fCreateDate = ChangeDateFormat(obj.FCreateDate)
155 $("#fcreatedate").val(fCreateDate); //处理时间
156
157
158 var save = document.getElementById("btnSave");
159 var code = document.getElementById("<%=code.ClientID %>");
160 if (code.value != "") {
161 save.detachEvent("onclick", function () { AjaxPost(); });
162 save.attachEvent("onclick", function () { Edit("../Handler/AdvertPost.ashx?Action=2"); });
163 }
164 };
165 obj.BeforeSendCallFunc = function () {
166 $("#load").show();
167 };
168 obj.CompleteCallFunc = function () {
169 $("#load").hide();
170 };
171 ajaxManage.Query(obj);
172
173 }
174
175 function Edit(url) {
176 var ajaxManage = new AjaxManage();
177 var obj = new Object();
178 var advert = {
179 FID: $("#<%=fid.ClientID %>").attr("value"),
180 Code: $("#<%=code.ClientID %>").attr("value"),
181 Title: escape($("#title").attr("value")),
182 Content: escape($("#content").attr("value"))
183 }
184 obj.url = url;
185 obj.data = advert;
186
187 obj.SuccessCallFunc = function (data) {
188 $("#list").html("");
189 $("#list").html(data);
190 $("#code").val("");
191 $("#fid").val("");
192 };
193 obj.BeforeSendCallFunc = function () {
194 $("#load").show();
195 };
196 obj.CompleteCallFunc = function () {
197 $("#load").hide();
198 };
199 ajaxManage.Query(obj);
200
201 }
202
203 function Delete(url) {
204
205 var ajaxManage = new AjaxManage();
206 var obj = new Object();
207 var advert = {
208 }
209 obj.url = url;
210 obj.data = advert;
211
212 obj.SuccessCallFunc = function (data) {
213 $("#list").html("");
214 $("#list").html(data);
215 };
216 obj.BeforeSendCallFunc = function () {
217 $("#load").show();
218 };
219 obj.CompleteCallFunc = function () {
220 $("#load").hide();
221 };
222 ajaxManage.Query(obj);
223
224 }
225 function ChangeDateFormat(cellval) {
226 var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
227 var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
228 var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
229 return date.getFullYear() + "-" + month + "-" + currentDate;
230 }
231
232 function QueryField(Pindex, OrderField) {
233 var ajaxManage = new AjaxManage();
234 var obj = new Object();
235 var advert = {
236 Title: escape($("#title").attr("value")),
237 Content: escape($("#content").attr("value"))
238 }
239
240 obj.page = Pindex;
241 obj.orderField = OrderField;
242 obj.url = "AdvertQuery";
243 obj.data = advert;
244 obj.action = 0;
245 obj.SuccessCallFunc = function (data) {
246 $("#list").html(data);
247 };
248 obj.BeforeSendCallFunc = function () {
249 $("#load").show();
250 };
251 obj.CompleteCallFunc = function () {
252 $("#load").hide();
253 };
254 ajaxManage.QueryFieldAjax(obj);
255 }
256
257 function Query(Pindex) {
258 var ajaxManage = new AjaxManage();
259 var obj = new Object();
260 var advert = {
261 Title: escape($("#title").attr("value")),
262 Content: escape($("#content").attr("value"))
263 }
264
265 obj.page = Pindex;
266 obj.url = "AdvertQuery";
267 obj.data = advert;
268 obj.action = 0;
269 obj.SuccessCallFunc = function (data) {
270 $("#list").html(data);
271 };
272 obj.BeforeSendCallFunc = function () {
273 $("#load").show();
274 };
275 obj.CompleteCallFunc = function () {
276 $("#load").hide();
277 };
278 ajaxManage.QueryAjax(obj);
279 }
280
281 var save = document.getElementById("btnSave");
282 var query = document.getElementById("btnSelect");
283 var code = document.getElementById("<%=code.ClientID %>");
284
285 save.attachEvent("onclick", function () { AjaxPost(); });
286 //o.attachEvent("onclick", function () { JSONPost(); });
287
288 query.attachEvent("onclick", function () { Query(1); });
289
290
291
292 </script>
293 </html>
294
本人声明：
个人主页：沐海（http://www.cnblogs.com/mahaisong）
以上文章都是经过本人设计实践和阅读其他文档得出。如果需要探讨或指教可以留言或加我QQ！欢迎交流！
