189 8069 5689

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

jQurey代码部分：

创新互联-专业网站定制、快速模板网站建设、高性价比蒲县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式蒲县网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖蒲县地区。费用合理售后完善，十载实体公司更值得信赖。

  1.   
  2.         var flag = 0;  
  3.  
  4.         //添加新行 
  5.         function addRow() {  
  6.             var nrow = "文本框多行文本区下拉框单选框复选框 ";  
  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(" ");  
  81.             }  
  82.             if (type == 1) {  
  83.                 $(trobj).find(':text').attr('disabled', '');  
  84.                 $(trobj).find('select').attr('disabled', '');  
  85.                 $(trobj).find('span[name=buttonspan]').html(" ");  
  86.             }  
  87.         }  
  88.      

HTML代码部分：

  1.  
  2.  
  3.  
  4.  
  5.    
 
  •  

    • SupplyAJAX类

    1.  
    2. public partial class SupplyAJAX : System.Web.UI.Page  
    3. {  
    4.     static List UmList = new List();  
    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. } 

     

    附件：http://down.51cto.com/data/2359030

    分享标题：通过AJAX与ASP.NET结合实现的仿GridView增删改查功能！
    本文来源：http://cdxtjz.cn/article/ihdgjs.html

    其他资讯