1、Html代码,将所有CheckBox包含于删除表单,并且所有列表项的CheckBox使用相同的Name,并且Value设置为数据项主键ID

 @using (Html.BeginForm("Delete", null, FormMethod.Post, new { id = "DeleteForm" }))
 {
     @Html.AntiForgeryToken()
     <div id="table-scrollable" class="table-scrollable">
         <table class="table table-striped table-hover table-border-top">
             <thead>
                 <tr>
                     <th class="table-checkbox">
                         <input id="checkall" type="checkbox" class="group-checkable" />
                     </th>
                     <th>序号</th>
                     <th>
                         其它数据
                     </th>
                 </tr>
             </thead>
             <tbody>
                 @{ ;}
                 @foreach (var item in Model) {
                     <tr>
                         <td>
                             <input name="guids" type="checkbox" class="checkboxes" value="@item.GUID" />
                         </td>
                         <td>@(Model.StartItemIndex + i++)</td>
                         <td>
                             其它数据
                         </td>
                     </tr>
                 }
             </tbody>
         </table>
     </div>
 }

2、JS脚本,主要用于操作表头进行全选和取消全选,此处需注意,存在分页情况时,全选操作只针对当前页的列表项,不能选择未展示的数据;

 //表头CheckBox操作全选或取消全选
 $("#checkall").click(function () {
     var ischecked = this.checked;
     $("input:checkbox[name='guids']").each(function () {
         this.checked = ischecked;
     });
 });

同时,JS也负责表单提交前进行弹窗提醒,此处使用的是bootbox控件弹出提示窗,也可以使用其它弹窗组件

 $("#delete").click(function () {
     ;
     $("input:checkbox[name='guids']").each(function () {
         if (this.checked) count++;
     });
     ) {
         bootbox.dialog({
             size: "small",
             onEscape: "true",
             message: "你确定要批量删除勾选的 " + count + " 条记录吗?",
             title: "操作确认",
             buttons: {
                 OK: {
                     label: " 确定 ",
                     className: "red-haze fa fa-check ",
                     callback: function () {
                         $("#DeleteForm").submit();
                     }
                 },
                 Cancel: {
                     label: " 取消 ",
                     className: "green-jungle fa fa-times ",
                     callback: function () {
                     }
                 }
             }
         });
     }
     else {
         bootbox.dialog({
             size: "small",
             onEscape: "true",
             message: "请先选择你要删除的记录!",
             title: "操作提示",
             buttons: {
                 OK: {
                     label: " 确定 ",
                     className: "green-jungle fa fa-bell-o",
                     callback: function () {
                     }
                 }
             }
         });
     }
 });

3、Controller代码,通过List类型接收同名的表单数据项

         [HttpPost]
         [ValidateAntiForgeryToken]
         public ActionResult Delete(List<Guid> guids)
         {
             )
             {
                 db.TargetTable.Where(x => guids.Contains(x.GUID)).ToList().ForEach(x =>
                 {
                         db.TargetTable.Remove(x);
                 });
                 db.SaveChanges();
             }

             return Redirect(Request.UrlReferrer.ToString());
         }    

MVC列表页通过CheckBox进行批量选择删除的更多相关文章

  1. PHP+MySql+Bootstrap实现用户界面数据的删除、修改与批量选择删除——实例操作

    第一步:在数据库中建立要操作的信息表 如下图: 第二步:实现对该信息表中数据的删除功能 代码如下:main(主页面) <!DOCTYPE html><html>    < ...

  2. Android开发之ListView条目批量选择删除

    ListView实现的列表,假设是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验非常不好,也给用户带来了非常大的麻烦. 实现效果图 详细实现代码 select.xml 主布局 ...

  3. 更好列表页中一个航班.先unset删除数组中一个键值对,再追加,最后按键排序

    <?php $arr = array( '0' => array('item' => array( 'aa' => 'aaa', 'bb' => 'bbb' )), '1 ...

  4. Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页

    在完成产品列表页前要做一些准备功夫.首先是去下载MvcPager用了为产品列表分页.下载的可能是基于MVC 2的,没关系,可以用在MVC 3上.如果有担心,下载源代码重新编译一次好了.下载后将DLL添 ...

  5. python实现列表页数据的批量抓取练手练手的

    python实现列表页数据的批量抓取,练手的,下回带分页的 #!/usr/bin/env python # coding=utf-8 import requests from bs4 import B ...

  6. 通过angularjs的directive以及service来实现的列表页加载排序分页

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

  7. 夺命雷公狗ThinkPHP项目之----企业网站18之网站配置列表页的完成

    我们点击下配置列表即可查看我们列表页的配置信息了: 其实这个最简单了,首先我们先来完成他控制器的代码: public function lists(){ $mod = M('Conf')->se ...

  8. 通过angularjs的directive以及service来实现的列表页加载排序分页(转)

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

  9. Golang在京东列表页实践总结

    Golang在京东列表页实践总结 作者:张洪涛 10余年软件开发和设计经验,曾就职于搜狐.搜狗.前matrixjoy公司联合创始人.甘普科技CTO. 目前线上状态 基于搜索实现: 全量数据,搜索结果不 ...

随机推荐

  1. Json Serialize 忽略特定属性

    Json Serialize 忽略特定属性 Json Serialize SerializeFilter 忽略特定属性 key words:Json Serialize jackson fastjso ...

  2. PHP soap Web Service 使用SoapDiscovery.class.php 生成wsdl文件

    PHP soap web service 使用wsdl文件 demo: ============================================================== 服 ...

  3. Sqli-labs less 38

    Less-38 学习了关于stacked injection的相关知识,我们在本关可以得到直接的运用. 在执行select时的sql语句为:SELECT * FROM users WHERE id=' ...

  4. 只 一行显示可左右滚动的文本(UITextField中文限制)

    // // ViewController.m // 一行显示可滚动的文本 // // Created by apple on 15-5-8. // Copyright (c) 2015年 apple. ...

  5. java Timer类

    java.util 类 Timer java.lang.Object java.util.Timer public class Timerextends Object 一种工具,线程用其安排以后在后台 ...

  6. Android——横屏和竖屏的切换,以及明文密码的显示

    查看API文档: android.content.pm.ActivityInfo    在手机的使用中,我们要根据不同的需求来改变屏幕的显示方向,一般在浏览信息时是竖屏,在玩游戏的时候就要切换到横屏. ...

  7. MY_Log,无缝替换原生Log,支持日志输出到文件、FirePHP

    自己扩展了一个MY_Log, 用法类似于log4j,目前支持将日志输出到文件.FirePHP.如果你需要将日志输出到其他地方,比如邮件.数据库等,可以很方便地进行扩展. 用法很简单,大家一看就知道.1 ...

  8. hdu 4768 Flyer 二分

    思路:由于最多只有一个是奇数,所以二分枚举这个点,每次判断这个点的左边区间段所有点的和作为 二分的依据. 代码如下: #include<iostream> #include<cstd ...

  9. Linux之select系统调用_2

    在上一篇博文中,我们的程序中我们有3个客户端,因此也事先建立了3个管道,每个客户端分别使用一个管道向服务器发送消息.而在服务器端使用select系统调用,只要监测到某一管道有消息写入,服务器就将其re ...

  10. BZOJ 2661: [BeiJing wc2012]连连看 费用流

    2661: [BeiJing wc2012]连连看 Description 凡是考智商的题里面总会有这么一种消除游戏.不过现在面对的这关连连看可不是QQ游戏里那种考眼力的游戏.我们的规则是,给出一个闭 ...