JQuery方式实现行删除

今天做了一个表格的行删除功能。

方案一

aspx页面代码：

前端表格由reapter渲染而来

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">

<HeaderTemplate>

<table>

<tr>

<td>标题</td>

<td>作者</td>

<td>日期</td>

<td>内容</td>

<td>操作</td>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td><%#Eval("title") %></td>

<td><%#Eval("author") %></td>

<td><%#Eval("date") %></td>

<td><%#Eval("[content]") %></td>

<td>

<span">

<a id="<%#Eval("Id") %>" href="#" onclick ='ADeleteClick(this)'>删除</a>

</span>

<span>

<a href="editInfo.aspx?id=<%#Eval("Id") %>">编辑</a>

</span>

</td>

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

JQuery代码：

<script src="Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript">

function ADeleteClick(self) { //获取行id，实现行删除

var id = self.id; //获取自身id

if (id != null || id !== "") {

$.post("JQuery行删除.ashx", { "id": id,"action":“deleteRow” }, function (data, status) {

if (status == "success") {

if (data == "ok") {

alert("删除成功！");

$("#" + id).parents("tr").remove();

}

else {

alert("删除失败！");

}

}

else {

alert("数据传输失败");

}

});

}

};

</script>

cs文件代码：

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

context.Response.Clear();

object strId = context.Request["id"].ToString();

object deleteRow = context.Request["action"].ToString();

if((deleteRow !=null || deleteRow.ToString()!="")&&deleteRow.ToString()=="deleteRow")

{

if ((strId != null || strId.ToString() != ""))

{

string constr = "Data Source=.;database=Test;uid=sa;pwd=sasa";

string sql = "delete from T_article where Id= " + Convert.ToInt32(strId);

SqlConnection conn = new SqlConnection(constr);

conn.Open();

SqlCommand cmd = new SqlCommand();

cmd.Connection = conn;

cmd.CommandText = sql;

cmd.ExecuteNonQuery();

context.Response.Write("ok"); //返回成功->data

}

}

方案二：通过注册OnRowDeleteing事件

基于GridView

前端代码

<asp:GridView ID="ClassGridView" runat="server" EnableModelValidation="True" Width="100%" AutoGenerateColumns="False" OnRowDeleting="ClassGridView_RowDeleting" DataKeyNames="SystemColumnID" >

<Columns>

<asp:BoundField DataField="SystemColumnID" HeaderText="编号" ReadOnly="True" />

<asp:BoundField DataField="SystemColumnName" HeaderText="类名" />

<asp:BoundField DataField="ColumnTypeID" HeaderText="级别" />

<asp:TemplateField HeaderText="删除" ItemStyle-Width="60">

<ItemTemplate>

<asp:LinkButton ID="LinkButton3" runat="server" CommandName="Delete" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>">删除</asp:LinkButton>

</ItemTemplate>

<ItemStyle Width="60px"></ItemStyle>

</asp:TemplateField>

</Columns>

</asp:GridView>

cs文件代码

protected void ClassGridView_RowDeleting(object sender, GridViewDeleteEventArgs e)

{

int id = int.Parse(ClassGridView.DataKeys[e.RowIndex].Value.ToString());

bool tof = false;

tof = SystemColumn.GetSystemColumnClassCountById(id);

if (tof)

{

ShowMessage("该类别含有子类别，请先删除子类别！");

}

else

{

tof = SystemColumn.DeleteSystemColumnData(id);

if(tof)

{

ClientScript.RegisterStartupScript(this.GetType(), "message", "<script language='javascript'>alert('删除成功！');</script>");

GridViewDataBind(1); //重新加载数据

}

else{

ClientScript.RegisterStartupScript(this.GetType(), "message", "<script language='javascript'>alert('删除失败！');</script>");

}

}

}