温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-06-21 07:44:08 阅读:2076 作者:剑了 栏目:编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

jQurey代码部分:

<script type="text/javascript">          var flag = 0;           //添加新行          function addRow() {              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>";              if (flag == 0) {                  $('#attributetable').append(nrow);                  flag = 1;              }          }           //添加新行中的数据到后台          function addData(obj) {                var trobj = $(obj).parents('tr');              var username = $(trobj).find(':text[name=username]').val();              var seltype = $(trobj).find('select[name=seltype]').val();               $.post("SupplyAJAX.aspx", { username: username, seltype: seltype, type: "add" }, function (data) {                  if (data.toString() != "0") {                      $(trobj).find(':hidden[name=hideid]').val(data.toString());                      changeDisable(obj, 0);                  }                  else {                      deleteNewRow(obj);                      alert('添加失败');                  }              });              flag = 0;          }                    //更新行          function updData(obj) {                             var trobj = $(obj).parents('tr');              var id = $(trobj).find(':hidden[name=hideid]').val();              var username = $(trobj).find(':text[name=usrname]').val();                         var seltype = $(trobj).find('select[name=seltype]').val();              $.post("SupplyAJAX.aspx", { id: id, username: username, seltype: seltype, type: "update" },               function (data) {                           if (data.toString() != "0") {                      changeDisable(obj, 0);                  }                  else {                      alert('更新失败');                  }              });          }          //删除新行          function deleteNewRow(obj) {              $(obj).parents('tr').replaceWith('');              flag = 0;          }          //删除数据库中的行          function deleteRow(obj) {              var trobj = $(obj).parents('tr');              var id = $(trobj).find(':hidden[name=hideid]').val();              $.post("SupplyAJAX.aspx", { id: id, type: "delete" },               function (data) {                  if (data.toString() != "0") {                      $(obj).parents('tr').replaceWith('');                  }                  else {                      alert('删除失败');                  }              });          }           //改变编辑状态          function changeDisable(obj, type) {              var trobj = $(obj).parents('tr');              if (type == 0) {                  $(trobj).find(':text').attr('disabled', 'disabled');                  $(trobj).find('select').attr('disabled', 'disabled');                  $(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' />");              }              if (type == 1) {                  $(trobj).find(':text').attr('disabled', '');                  $(trobj).find('select').attr('disabled', '');                  $(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' />");              }          }      </script> 

HTML代码部分:

<body>  <table id="attributetable"> </table>   <div class=" heb"><input value="增加一行" type="button" onclick='addRow()' class="se_buton"/> </div> </body> 

SupplyAJAX类

 public partial class SupplyAJAX : System.Web.UI.Page  {      static List<UserModel> UmList = new List<UserModel>();       protected void Page_Load(object sender, EventArgs e)      {          switch (Request.QueryString["type"])          {               case "add":                  Add();                  break;              case "update":                  Update();                  break;              case "delete":                  Delete();                  break;          }          Response.End();      }       private string Add()      {          UserModel um = new UserModel();          um.Id = UmList.Count + 1; //自动为ID加1          um.Username = Request.Form["username"];          um.Seltype = Request.Form["seltype"];          UmList.Add(um);          return um.Id.ToString();      }       private string Update()      {          int id = int.Parse(Request.QueryString["id"]);          for (int i = 0; i < UmList.Count; i++)          {              if (id == UmList[i].Id)              {                  UmList[i].Username = Request.Form["username"];                  UmList[i].Seltype = Request.Form["seltype"];                  return UmList[i].Id.ToString();              }          }          return "0";      }       private string Delete()      {          int id = int.Parse(Request.Form["id"]);          for (int i = 0; i < UmList.Count; i++)          {              if (id == UmList[i].Id)              {                  UmList.Remove(UmList[i]);                  return UmList[i].Id.ToString();              }          }          return "0";      }   } 
附件:http://down.51cto.com/data/2359030

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×