通过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'/> <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. &
补充:Web开发 , ASP.Net ,