通过AJAX与ASP.NET结合实现的仿GridView增删改查功能

jQurey代码部分：

1. <script type="text/javascript">

2. var flag = 0;

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>

3. <table id="attributetable">

4. </table>

5. <div class=" heb"><input value="增加一行" type="button" onclick='addRow()' class="se_buton"/> </div>

6. </body>

SupplyAJAX类

2. public partial class SupplyAJAX : System.Web.UI.Page

3. {

4. static List<UserModel> UmList = new List<UserModel>();

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增删改查功能

最新文章

热门文章