通过AJAX与ASP.NET结合实现的仿GridView增删改查功能
2014-05-12 00:24
681 查看
jQurey代码部分：
1. <script type="text/javascript">
2. var flag = 0;
3.
4. //添加新行
5. function addRow() {
6. var nrow = "<tr><td><input name='hideid' type='hidden' value='' /><input name='username' type='text' value='' size='15' maxlength='15' /></td><td><select name='seltype' id=seltype1><option value='Text'>文本框</option><option value='textarea'>多行文本区</option><option value='Select'>下拉框</option><option value='Radio'>单选框</option><option value='Checkbox'>复选框</option></select></td><td><span class='heb' name='buttonspan'><input value='添加' onclick='addData(this)' type='button' class='se_buton'/> <input value='取消' type='button' onclick='deleteNewRow(this)' class='se_buton'/></span></td></tr>";
7. if (flag == 0) {
8. $('#attributetable').append(nrow);
9. flag = 1;
10. }
11. }
12.
13. //添加新行中的数据到后台
14. function addData(obj) {
15.
16.
17. var trobj = $(obj).parents('tr');
18. var username = $(trobj).find(':text[name=username]').val();
19. var seltype = $(trobj).find('select[name=seltype]').val();
20.
21. $.post("SupplyAJAX.aspx", { username: username, seltype: seltype, type: "add" }, function (data) {
22. if (data.toString() != "0") {
23. $(trobj).find(':hidden[name=hideid]').val(data.toString());
24. changeDisable(obj, 0);
25. }
26. else {
27. deleteNewRow(obj);
28. alert('添加失败');
29. }
30. });
31. flag = 0;
32. }
33.
34. //更新行
35. function updData(obj) {
36.
37.
38. var trobj = $(obj).parents('tr');
39. var id = $(trobj).find(':hidden[name=hideid]').val();
40. var username = $(trobj).find(':text[name=usrname]').val();
41.
42. var seltype = $(trobj).find('select[name=seltype]').val();
43. $.post("SupplyAJAX.aspx", { id: id, username: username, seltype: seltype, type: "update" },
44. function (data) {
45.
46. if (data.toString() != "0") {
47. changeDisable(obj, 0);
48. }
49. else {
50. alert('更新失败');
51. }
52. });
53. }
54. //删除新行
55. function deleteNewRow(obj) {
56. $(obj).parents('tr').replaceWith('');
57. flag = 0;
58. }
59. //删除数据库中的行
60. function deleteRow(obj) {
61. var trobj = $(obj).parents('tr');
62. var id = $(trobj).find(':hidden[name=hideid]').val();
63. $.post("SupplyAJAX.aspx", { id: id, type: "delete" },
64. function (data) {
65. if (data.toString() != "0") {
66. $(obj).parents('tr').replaceWith('');
67. }
68. else {
69. alert('删除失败');
70. }
71. });
72. }
73.
74. //改变编辑状态
75. function changeDisable(obj, type) {
76. var trobj = $(obj).parents('tr');
77. if (type == 0) {
78. $(trobj).find(':text').attr('disabled', 'disabled');
79. $(trobj).find('select').attr('disabled', 'disabled');
80. $(trobj).find('span[name=buttonspan]').html("<input name='gx' value='更新' type='button' onclick='changeDisable(this,1)' class='se_buton'/> <input value='删除' type='button' name='qx' onclick='deleteRow(this)' class='se_buton' />");
81. }
82. if (type == 1) {
83. $(trobj).find(':text').attr('disabled', '');
84. $(trobj).find('select').attr('disabled', '');
85. $(trobj).find('span[name=buttonspan]').html("<input name='gx' value='确定' type='button' onclick='updData(this)' class='se_buton'/> <input value='取消' type='button' name='qx' onclick='changeDisable(this,0)' class='se_buton' />");
86. }
87. }
88. </script>
HTML代码部分：
1. <body>
2.
3. <table id="attributetable">
4. </table>
5. <div class=" heb"><input value="增加一行" type="button" onclick='addRow()' class="se_buton"/> </div>
6. </body>
SupplyAJAX类
1.
2. public partial class SupplyAJAX : System.Web.UI.Page
3. {
4. static List<UserModel> UmList = new List<UserModel>();
5.
6. protected void Page_Load(object sender, EventArgs e)
7. {
8. switch (Request.QueryString["type"])
9. {
10. case "add":
11. Add();
12. break;
13. case "update":
14. Update();
15. break;
16. case "delete":
17. Delete();
18. break;
19. }
20. Response.End();
21. }
22.
23. private string Add()
24. {
25. UserModel um = new UserModel();
26. um.Id = UmList.Count + 1; //自动为ID加1
27. um.Username = Request.Form["username"];
28. um.Seltype = Request.Form["seltype"];
29. UmList.Add(um);
30. return um.Id.ToString();
31. }
32.
33. private string Update()
34. {
35. int id = int.Parse(Request.QueryString["id"]);
36. for (int i = 0; i < UmList.Count; i++)
37. {
38. if (id == UmList[i].Id)
39. {
40. UmList[i].Username = Request.Form["username"];
41. UmList[i].Seltype = Request.Form["seltype"];
42. return UmList[i].Id.ToString();
43. }
44. }
45. return "0";
46. }
47.
48. private string Delete()
49. {
50. int id = int.Parse(Request.Form["id"]);
51. for (int i = 0; i < UmList.Count; i++)
52. {
53. if (id == UmList[i].Id)
54. {
55. UmList.Remove(UmList[i]);
56. return UmList[i].Id.ToString();
57. }
58. }
59. return "0";
60. }
61.
62. }
1. <script type="text/javascript">
2. var flag = 0;
3.
4. //添加新行
5. function addRow() {
6. var nrow = "<tr><td><input name='hideid' type='hidden' value='' /><input name='username' type='text' value='' size='15' maxlength='15' /></td><td><select name='seltype' id=seltype1><option value='Text'>文本框</option><option value='textarea'>多行文本区</option><option value='Select'>下拉框</option><option value='Radio'>单选框</option><option value='Checkbox'>复选框</option></select></td><td><span class='heb' name='buttonspan'><input value='添加' onclick='addData(this)' type='button' class='se_buton'/> <input value='取消' type='button' onclick='deleteNewRow(this)' class='se_buton'/></span></td></tr>";
7. if (flag == 0) {
8. $('#attributetable').append(nrow);
9. flag = 1;
10. }
11. }
12.
13. //添加新行中的数据到后台
14. function addData(obj) {
15.
16.
17. var trobj = $(obj).parents('tr');
18. var username = $(trobj).find(':text[name=username]').val();
19. var seltype = $(trobj).find('select[name=seltype]').val();
20.
21. $.post("SupplyAJAX.aspx", { username: username, seltype: seltype, type: "add" }, function (data) {
22. if (data.toString() != "0") {
23. $(trobj).find(':hidden[name=hideid]').val(data.toString());
24. changeDisable(obj, 0);
25. }
26. else {
27. deleteNewRow(obj);
28. alert('添加失败');
29. }
30. });
31. flag = 0;
32. }
33.
34. //更新行
35. function updData(obj) {
36.
37.
38. var trobj = $(obj).parents('tr');
39. var id = $(trobj).find(':hidden[name=hideid]').val();
40. var username = $(trobj).find(':text[name=usrname]').val();
41.
42. var seltype = $(trobj).find('select[name=seltype]').val();
43. $.post("SupplyAJAX.aspx", { id: id, username: username, seltype: seltype, type: "update" },
44. function (data) {
45.
46. if (data.toString() != "0") {
47. changeDisable(obj, 0);
48. }
49. else {
50. alert('更新失败');
51. }
52. });
53. }
54. //删除新行
55. function deleteNewRow(obj) {
56. $(obj).parents('tr').replaceWith('');
57. flag = 0;
58. }
59. //删除数据库中的行
60. function deleteRow(obj) {
61. var trobj = $(obj).parents('tr');
62. var id = $(trobj).find(':hidden[name=hideid]').val();
63. $.post("SupplyAJAX.aspx", { id: id, type: "delete" },
64. function (data) {
65. if (data.toString() != "0") {
66. $(obj).parents('tr').replaceWith('');
67. }
68. else {
69. alert('删除失败');
70. }
71. });
72. }
73.
74. //改变编辑状态
75. function changeDisable(obj, type) {
76. var trobj = $(obj).parents('tr');
77. if (type == 0) {
78. $(trobj).find(':text').attr('disabled', 'disabled');
79. $(trobj).find('select').attr('disabled', 'disabled');
80. $(trobj).find('span[name=buttonspan]').html("<input name='gx' value='更新' type='button' onclick='changeDisable(this,1)' class='se_buton'/> <input value='删除' type='button' name='qx' onclick='deleteRow(this)' class='se_buton' />");
81. }
82. if (type == 1) {
83. $(trobj).find(':text').attr('disabled', '');
84. $(trobj).find('select').attr('disabled', '');
85. $(trobj).find('span[name=buttonspan]').html("<input name='gx' value='确定' type='button' onclick='updData(this)' class='se_buton'/> <input value='取消' type='button' name='qx' onclick='changeDisable(this,0)' class='se_buton' />");
86. }
87. }
88. </script>
HTML代码部分：
1. <body>
2.
3. <table id="attributetable">
4. </table>
5. <div class=" heb"><input value="增加一行" type="button" onclick='addRow()' class="se_buton"/> </div>
6. </body>
SupplyAJAX类
1.
2. public partial class SupplyAJAX : System.Web.UI.Page
3. {
4. static List<UserModel> UmList = new List<UserModel>();
5.
6. protected void Page_Load(object sender, EventArgs e)
7. {
8. switch (Request.QueryString["type"])
9. {
10. case "add":
11. Add();
12. break;
13. case "update":
14. Update();
15. break;
16. case "delete":
17. Delete();
18. break;
19. }
20. Response.End();
21. }
22.
23. private string Add()
24. {
25. UserModel um = new UserModel();
26. um.Id = UmList.Count + 1; //自动为ID加1
27. um.Username = Request.Form["username"];
28. um.Seltype = Request.Form["seltype"];
29. UmList.Add(um);
30. return um.Id.ToString();
31. }
32.
33. private string Update()
34. {
35. int id = int.Parse(Request.QueryString["id"]);
36. for (int i = 0; i < UmList.Count; i++)
37. {
38. if (id == UmList[i].Id)
39. {
40. UmList[i].Username = Request.Form["username"];
41. UmList[i].Seltype = Request.Form["seltype"];
42. return UmList[i].Id.ToString();
43. }
44. }
45. return "0";
46. }
47.
48. private string Delete()
49. {
50. int id = int.Parse(Request.Form["id"]);
51. for (int i = 0; i < UmList.Count; i++)
52. {
53. if (id == UmList[i].Id)
54. {
55. UmList.Remove(UmList[i]);
56. return UmList[i].Id.ToString();
57. }
58. }
59. return "0";
60. }
61.
62. }
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 通过AJAX与ASP.NET结合实现的仿GridView增删改查功能！
- 通过AJAX与ASP.NET结合实现的仿GridView增删改查功能！ 推荐
- AJAX与ASP.NET结合仿GridView增删改查功能
- ASP.NET实现增删改查等功能(Access版)系统之二-gridview绑定数据及行绑定
- ASP.NET实现增删改查等功能(Access版)系统之二-GridView绑定数据.
- 通过ASP.NET Ajax技术模拟实现NBA比赛文字直播功能
- AjaxPro.NET实现TextBox智能获取服务端数据功能(Asp.net 2.0)(示例代码下载)
- ASP.NET中利用DataGrid的自定义分页功能和存储过程结合实现高效分页
- asp.net实现邮箱验证功能，通过邮箱链接激活该帐号
- Ajax调用asp.net后台方法功能实现
- AjaxPro.NET实现TextBox智能获取服务端数据功能(Asp.net 2.0)(示例代码下载) 转载
- Asp.NET误人子弟教程：在MVC里面结合JQ实现AJAX
- 一个在ASP.NET中利用服务器控件GridView实现数据增删改查的例子
- Gridview各种功能+AspNetPager+Ajax实现无刷新存储过程分页 （留着用）
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- ASP.NET通过自定义函数实现对字符串的大小写切换功能
- asp.net通过反射技术实现Ajax
- ASP.NET调用Oracle分页存储过程并结合ASPnetpager分页控件 实现分页功能
- asp.net+ajax+json来实现无刷新分页功能