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

发布时间：2020-06-21 07:44:08 作者：剑了
来源：网络阅读：2065

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

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

相关阅读