ajax好看的弹窗后台管理，主页面纯静态
页面样式图如下所示，搜索功能和分页条由于时间有限，还没有实现，实现起来应该也不是很难，例子写了有点臃肿，没有分层次，大家不要见怪！
多选删除样式如下图所示：
增删改查也是弹窗的形式去完成的，如下界面图
界面就给大家介绍这么多，主要是来发布代码的
部分代码如下所示：
friendlink.js
1 /// <reference path="jquery-1.4.2-vsdoc.js" />
2 var orderby = "";
3 $(document).ready(function() {
4 InitData(1); //首次加载数据
5
6 $("#page_theme").change(function() {
7 $("#Pagination").attr('class', $(this).val());
8 });
9
10 //全选
11 $("#btnSelect").click(function() {
12 var thisSelected = $(this).val() == "全 选";
13 $("#Table tr:gt(0) input[type='checkbox']").attr("checked", thisSelected);
14 $("#Table tr:gt(0)")[thisSelected ? "addClass" : "removeClass"]("selected");
15 $(this).val([thisSelected ? "反 选" : "全 选"]);
16 $(this).attr("title", [thisSelected ? "反 选" : "全 选"]);
17 });
18
19 //日历
20 $("#search input[type='text']:gt(1)").click(function() {
21 WdatePicker();
22 });
23
24 //添加
25 $("#btnAdd").click(function() {
26 Add();
27 });
28
29 //删除之后总是得到第一页数据
30 $("#btnDelete").click(function() {
31 var Select = $("#Table tr:gt(0) input[type='checkbox']:checked");
32 DeleteSelect(Select);
33 });
34 });
35
36 function InitData(page_index) {
37 var tbody = "";
38 $.ajax({
39 type: "post",
40 dataType: "json",
41 url: "ashx/jsonPager.ashx",
42 data: "type=json&page=" + page_index + "&orderby=" + orderby,
43 beforeSend: function() { $("#div_load").show(); $("#Pagination").hide(); },
44 complete: function() { $("#div_load").hide(); $("#Pagination").show(); },
45 success: function(json) {
46 $("#Table tr:gt(0)").remove();
47 var linkData = json.Table;
48 $.each(linkData, function(i, n) {
49 var trs = "";
50 trs += "<tr><td><input id='" + n.linkID + "' type='checkbox' /></td><td>" + n.linkID + "</td><td>" + n.linkSort + "</td><td>" + n.linkName + "</td><td><img src=images/" + n.linkDisplay + ".png /></td><td>" + n.linkUrl + "</td><td>" + n.linkDesc + "</td><td>" + n.linkAddDate + "</td><td><a id='look" + n.linkID + "' name='look' title='查看' class='abutton' href='#look'>查看</a><a id='edit" + n.linkID + "' name='edit' title='编辑' class='abutton' href='#edit'>编辑</a><a id='delete" + n.linkID + "' name='delete' title='删除' class='abutton1' href='#delete'>删除</a></td></tr>";
51 tbody += trs;
52 });
53 $("#Table").append(tbody);
54 var thisTr = $("#Table tr:gt(0)");
55 thisTr.addClass("oddRow");
56 //行单击事件
57 thisTr.find("td:lt(8)").click(function() {
58 var hasSelected = $(this).parent().hasClass("selected");
59 $(this).parent()[hasSelected ? "removeClass" : "addClass"]("selected").find(":checkbox").attr("checked", !hasSelected);
60 });
61
62 $("#Table tr:gt(0)").hover(function() { $(this).addClass("mouseover"); }, function() { $(this).removeClass("mouseover") });
63 $("#Table tr").each(function() {
64 $(this).children("td:first").addClass("width60");
65 });
66
67 $("#Table tr:gt(0)").each(function() {
68 $(this).children("td:last").find("a").click(function() {
69 var flag = $(this).attr("name");
70 var id = $(this).parent().parent().find("input").attr("id");
71 if ("look" == flag) {//查看
72 Look(id);
73 } else if ("edit" == flag) {//编辑
74 Edit(id);
75 } else if ("delete" == flag) {//Ajax删除
76 Delete(id);
77 }
78 });
79 });
80 }
81 });
82 $.ajax({
83 type: "post",
84 dataType: "text",
85 url: "ashx/jsonPager.ashx",
86 data: "type=pager",
87 beforeSend: function() { $("#Pagination").html("正在加载中……"); },
88 success: function(data) {
89 $("#Pagination").html("");
90 $("#Pagination").append(data);
91 //分页
92 $("#Pagination a").each(function() {
93 $(this).click(function() {
94 var href = $(this).attr("href");
95 InitData(href.substring(1, href.length));
96 });
97 });
98 }
99 });
100 }
101
102 //添加
103 function Add() {
104 $.jBox("iframe:friendlink_edit.aspx?flag=add", {
105 title: "友情连接新增",
106 width: 500,
107 height: 400,
108 buttons: { '关闭': true },
109 closed: function() { /*window.location = "jsonPager.html";*/InitData(1); }
110 });
111 }
112
113 //删除
114 function Delete(id) {
115 var submit = function(v, h, f) {
116 if (v == 'ok') {
117 $.jBox.tip("正在删除数据……", "loading");
118 $.get("ashx/jsonPager.ashx",
119 { type: "delete", linkID: id },
120 function(data) {
121 if (data == "success") {
122 $.jBox.tip('删除成功', 'success');
123 InitData(1);
124 } else {
125 $.jBox.tip('删除失败', 'error');
126 }
127 });
128 } else if (v == 'cancel') {
129 $.jBox.tip('已取消', 'info');
130 }
131 return true; //close
132 };
133 $.jBox.confirm("是否删除（" + $("#" + id).parent().parent().find("td").eq(3).html() + "）？", "提示", submit);
134 }
135
136 function DeleteSelect(obj) {
137 if (obj.length == 0) {
138 $.jBox.info("没有选择数据！", "提示");
139 } else {
140 var submit = function(v, h, f) {
141 if (v == 'ok') {
142 $.jBox.tip("正在删除数据……", "loading");
143 var selectList = "";
144 obj.each(function() {
145 selectList += "-" + $(this).attr("id");
146 });
147 $.get("ashx/jsonPager.ashx",
148 { type: "deleteSelect", linkList: selectList },
149 function(data) {
150 if (data == "success") {
151 $.jBox.tip('删除成功', 'success');
152 InitData(1);
153 } else {
154 $.jBox.tip('删除失败', 'error');
155 }
156 });
157 } else if (v == 'cancel') {
158 $.jBox.tip('已取消', 'info');
159 }
160 return true; //close
161 };
162 $.jBox.confirm("选择了" + obj.length + "条记录，是否删除？", "提示", submit);
163 }
164 }
165
166
167 //编辑
168 function Edit(id) {
169 $.jBox("iframe:friendlink_edit.aspx?flag=edit&linkID=" + id, {
170 title: "友情连接编辑",
171 width: 500,
172 height: 400,
173 buttons: { '关闭': true },
174 closed: function() { InitData(1); }
175 });
176 }
177
178 function Look(id) {
179 $.jBox("iframe:friendlink_edit.aspx?flag=look&linkID=" + id, {
180 title: "友情连接查看",
181 width: 500,
182 height: 400,
183 buttons: { '关闭': true }
184 });
185 }
friendlink_edit.js
1 /// <reference path="../jquery-1.4.2-vsdoc.js" />
2 $(document).ready(function() {
3 var message = $(".notification");
4 $(".close").click(function() {
5 $(this).parent().fadeOut("flast");
6 });
7 $("#txtLinkName").focus(function() {
8 message.show("slow");
9 message.removeClass("error").removeClass("success").addClass("information");
10 $(".notification div").html("输入你要填写的名称，例如（mydream制作团队）");
11 });
12 $("#txtUrl").focus(function() {
13 message.show("slow");
14 message.removeClass("error").removeClass("success").addClass("information");
15 $(".notification div").html("输入网站地址，例如（http://www.mydreamyulinzz.com）");
16 });
17 $("#ddlistType").focus(function() {
18 message.show("slow");
19 message.removeClass("error").removeClass("success").addClass("information");
20 $(".notification div").html("请选择链接类型");
21 });
22 $("#txtSort").focus(function() {
23 message.show("slow");
24 message.removeClass("error").removeClass("success").addClass("information");
25 $(".notification div").html("输入一个数值，值越大显示越靠前，例如数值（10）");
26 });
27 $("#txtDesc").focus(function() {
28 message.show("slow");
29 message.removeClass("error").removeClass("success").addClass("information");
30 $(".notification div").html("输入你对这个类型的描述内容，例如（该友情链接是放在论坛社区）");
31 });
32 $("#imgBtn").click(function() {
33 if ($("#txtLinkName").val().length < 1) {
34 message.show("slow");
35 message.removeClass("information").addClass("error");
36 $(".notification div").html("请输入链接名称");
37 return false;
38 } else if ($("#txtUrl").val().length < 1) {
39 message.show("slow");
40 message.removeClass("information").addClass("error");
41 $(".notification div").html("请输入网站地址");
42 return false;
43 } else if ($("#txtSort").val().length < 1) {
44 message.show("slow");
45 message.removeClass("information").addClass("error");
46 $(".notification div").html("请输入排序顺序");
47 return false;
48 } else if ($("#txtDesc").val().length < 1) {
49 message.show("slow");
50 message.removeClass("information").addClass("error");
51 $(".notification div").html("请输入类型描述");
52 return false;
53 } else {
54 return true;
55 }
56
57 });
58 })
创建数据库
1 CREATE DATABASE Ajax
创建表和插入数据
1 CREATE TABLE [AJAX].[dbo].tb_friendlink(linkID INT IDENTITY(1,1) NOT NULL,
2 linkSort INT NOT NULL,
3 linkName NVARCHAR(50) NOT NULL,
4 linkDisplay BIT NOT NULL,
5 linkUrl VARCHAR(500) NOT NULL,
6 linkDesc NVARCHAR(500) NOT NULL,
7 linkAddDate DATETIME NOT NULL)
8 DECLARE @i INT
9 DECLARE @j INT
10 DECLARE @count INT
11 SET @i=1
12 SET @j=1
13 SET @count=(SELECT DATEDIFF(DD,'2007-07-07',GETDATE()))
14 WHILE(@i<=@count)
15 BEGIN
16 INSERT INTO tb_friendlink(linkSort,linkName,linkDisplay,linkUrl,linkDesc,linkAddDate)VALUES(
17 @i,N'黄冈网站建设'+CONVERT(NVARCHAR(4),@i),'True','http://hg.mydreamyulinzz.com','mydream雨林制作团队黄冈分团队',CONVERT(VARCHAR(10),DATEADD(DD,@i,'2007-07-07'),126))
18 SET @i=@i+1
19 END
jsonPager.ashx
1 <%@ WebHandler Language="C#" Class="jsonPager" %>
2
3 using System;
4 using System.Web;
5 using System.Text;
6 using System.Collections.Generic;
7
8 public class jsonPager : IHttpHandler
9 {
10 public void ProcessRequest(HttpContext context)
11 {
12 context.Response.ContentType = "text/plain";
13 string temp = "Hello World";
14 if (!string.IsNullOrEmpty(context.Request["type"]))
15 {
16 string type = context.Request["type"];
17 if ("pager" == type)//分页条
18 {
19 temp = GetPager(context);
20 }
21 else if ("json" == type)//列表json数据
22 {
23 temp = GetJson(context);
24 }
25 else if ("delete" == type)
26 {
27 temp = Delete(context);
28 }
29 else if ("deleteSelect" == type)
30 {
31 temp = DeleteSelect(context);
32 }
33 }
34
35 context.Response.Write(temp);
36 }
37
38 /// <summary>
39 /// 获取页码
40 /// </summary>
41 /// <returns></returns>
42 public string GetPager(HttpContext context)
43 {
44 StringBuilder sb = new StringBuilder("<span class='disabled'>上一页</span>");
45 sb.Append("<span class='current'>1</span>");
46 sb.Append("<a href='#2' class='current'>2</a>");
47 sb.Append("<a href='#3' class='current'>3</a>");
48 sb.Append("<a href='#4' class='current'>4</a>");
49 sb.Append("<a href='#5' class='current'>5</a>");
50 sb.Append("<a href='#6' class='current'>6</a>");
51 sb.Append("<span>...<span>");
52 sb.Append("<a href='#85' class='current'>85</a>");
53 sb.Append("<a href='#86' class='current'>86</a>");
54 sb.Append("<a href='#2' class='disabled'>下一页</a>");
55 return sb.ToString();
56 }
57
58 /// <summary>
59 /// 获取json数据
60 /// </summary>
61 /// <param name="context"></param>
62 /// <returns></returns>
63 public string GetJson(HttpContext context)
64 {
65 if (!string.IsNullOrEmpty(context.Request["page"]))
66 {
67 return DB.GetFriendLinkList(int.Parse(context.Request["page"]), 20).ToJson();
68 }
69 else
70 {
71 return "Hello World";
72 }
73 }
74
75 /// <summary>
76 /// 删除数据
77 /// </summary>
78 /// <param name="context"></param>
79 /// <returns></returns>
80 public string Delete(HttpContext context)
81 {
82 if (!string.IsNullOrEmpty(context.Request["linkID"]))
83 {
84 if (DB.Delete(int.Parse(context.Request["linkID"])))
85 return "success";
86 return "Hello World";
87 }
88 else
89 {
90 return "Hello World";
91 }
92 }
93
94 /// <summary>
95 /// 删除多个数据
96 /// </summary>
97 /// <param name="context"></param>
98 /// <returns></returns>
99 public string DeleteSelect(HttpContext context)
100 {
101 if (!string.IsNullOrEmpty(context.Request.QueryString["linkList"]))
102 {
103 string strlink = context.Request.QueryString["linkList"];
104 string[] arrlink = strlink.Substring(1, strlink.Length - 1).Split('-');
105 IList<string> list=new List<string>(arrlink);
106 if (DB.Delete(list))
107 {
108 return "success";
109 }
110 else
111 {
112 return "Hello World";
113 }
114 }
115 else
116 {
117 return "Hello World";
118 }
119 }
120
121
122 public bool IsReusable
123 {
124 get
125 {
126 return false;
127 }
128 }
129
130 }
如需转载，请注明出处，谢谢！
代码下载地址：http://hg.mydreamyulinzz.com/down_detail_15.html
一切伟大的行动和思想，都有一个微不足道的开始。微不足道的我，正在吸取知识的土壤，希望能取得成功！不嫌弃我微不足道的，愿交天下好友！
