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

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'/>&nbsp;<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'/>&nbsp;<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'/>&nbsp;<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.   }