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. 【BZOJ】【2038】小Z的袜子

    填个坑吧,学习了莫队算法.我也忘记是看的哪位大牛的博客&代码学习的了T_T,如果您发现了的话请私信我,我会注明学自您的代码. 另外感谢@PoPoQQQ大神 好,进入正文,莫队算法,也算是一种暴 ...

  2. JS的基础语法

    8.运算符号表达式 ①数学运算符 数学运算符有+.-.*./除().%(余数) var a = 10; var b = 5; alert(a+b); 预览以后在网页上弹出的对话框数值就是15. ②逻辑 ...

  3. 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果

    利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...

  4. Node.js NPM国内镜像

    NPM国内镜像 http://npm.hacknodejs.com/ http://registry.npmjs.vitecho.com/ https://registry.npm.taobao.or ...

  5. Telnet、FTP、SSH、SFTP、SCP

    [Telnet]著名的终端访问协议,传统的网络服务程序,如FTP.POP和Telnet,其本质上都是不安全的:因为它们在网络上用明文传送数据.用户帐号和用户口令. [telnet命令]telnet h ...

  6. 从3D Studio Max导入物体 Importing Objects From 3D Studio Max

    原地址:http://game.ceeger.com/Manual/HOWTO-ImportObjectMax.html If you make your 3D objects in 3dsMax, ...

  7. leetcode majority number

    给定一组数,有一个数在这组数里的出现次数超过n/2次. 求出这是哪个数 https://leetcode.com/problems/majority-element/ 一开始考虑的方是将所有数转化为二 ...

  8. JavaWeb-JDK下载安装

    JDK官方下载地址:http://www.oracle.com/index.html JDK下载: 64位的下64的 JDK安装:(这是32位的) JDK部署测试:(配置环境变量) JAVA_HOME ...

  9. JAVA WEB新进展

    哈哈,终于搞来页面来了,丑是丑,但是好的进展. 高手的思路,自己用库建连接池,确实利害. 最关键的一个HELPER代码: package org.smart4j.chapter2.helper; im ...

  10. CS001: 清理浮动的几种方法以及对应规范说明

    以下内容转自 http://www.w3help.org/zh-cn/casestudies/001 <!==================> 前言 浮动 Floats 是 CSS 中的 ...