Jquery实现循环删除Reaper某一行

时间:2021-09-09 09:01:44

一、实现的效果图:(点击删除图标,juery实现删除整行)

Jquery实现循环删除Reaper某一行

二、MVC开发模式

SQLServer层

#region 删除
/// <summary>
/// 根据自动编号删除快递线路信息 (假删)
/// </summary>
/// <param name="Id">自动编号</param>
/// <returns></returns>
public int DelExpressLine(int Id)
{
string sql = string.Format("update ExpressLine set Status=3 where Id={0}", Id);
return DBUtility.SqlHelper.ExecuteNonQuery(ConnString.conn, CommandType.Text, sql, null);
}
#endregion

Models层——>DAL层

#region 删除快递线路
/// <summary>
/// 根据自动编号删除快递线路
/// </summary>
/// <param name="Id">自动编号</param>
/// <returns></returns>
public static int DelExpressLine(int Id)
{
return new SQLServerDAL.ExpressLine().DelExpressLine(Id);
}
#endregion

Controllers层

using System;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using System.Web.Mvc;
namespace Wutong.WebSite.Controllers
{
public class MemberController : BaseController
{
/// <summary>
/// 删除快递线路信息
/// </summary>
/// <param name="id">自动编号</param>
/// <returns></returns>
public JsonResult DelExpressLine(int id)
{
if (Models.DAL.ExpressLine.DelExpressLine(id) > )
{
return Json(new { code = , msg = "删除成功" });
}
else
{
return Json(new { code = , msg = "删除失败" });
}
}
}

View层

@model IEnumerable<Wutong.Model.ExpressLine>
@{
ViewBag.Title = "会员中心-快递线路管理";
}
<table width="720" class="tb2" cellpadding="0" cellspacing="0">
<tr>
<td class="dh strong" width="40"><input type="checkbox"></td>
<td class="dh strong" width="150">出发地->到达地</td>
<td class="dh strong" width="100"> 发布/刷新时间</td>
<td class="dh strong" width="50">线路状态</td>
<td class="dh strong" width="50">管理线路</td>
<td class="dh strong" width="30">查看</td>
<td class="dh strong" width="30">修改</td>
<td class="dh strong" width="30">删除</td>
</tr>
@foreach (var item in Model)
{
<tr data="@item.Id" data1="@item.IsSpecial">
<td width="40"><input type="checkbox"></td>
<td style="line-height: 15px;">@item.StartArea -> @item.ArriveArea</td>
<td style="line-height: 15px;">@item.AddDate</td>
<td style="line-height: 15px;">@((item.IsSpecial) == true ? "专线" : "非专线")</td>
<td><input type="button" value='@((item.IsSpecial) == true ?"关闭专线" : "开通专线")' class="btnUpdateSpecial"></td>
<td><a href="/ExpressLineInfo/@item.Id"><img src="/images/find.png" width="19" height="19"></a></td>
<td><a href="/Member/PublishExpressLine/?type=get&id=@item.Id"><img src="/images/xg.png" width="16" height="16"></a></td>
<td><a href="javascript:void" class="del" ><img src="/images/del.png" width="19" height="19" title="删除"></a></td>
</tr>
}
</table>
@section Js{
<script type="text/javascript">
$(function () {
$(".del").click(function () {
if (confirm("确实要删除此记录?")) {
         //获取表中tr
var $this = $(this).parent().parent();
         //获取表中tr中data的值
var _id = $this.attr("data");
$.post("/Member/DelExpressLine/", { id: _id }, function (json) {
if (json.code == 1) {
//删除成功,移除这一行
$this.remove();
return true;
}
else {
//删除失败
alert(json.msg);
return false;
}
});
}
});
});
</script>
}

备注:1、Jquery循环访问Repeater中控件不能直接使用控件id访问字段,否则只能对repeater第一行有效,可以使用控件CSS类名访问,即(.del)。