MVC列表页通过CheckBox进行批量选择删除
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进行批量选择删除的更多相关文章
- PHP+MySql+Bootstrap实现用户界面数据的删除、修改与批量选择删除——实例操作
第一步:在数据库中建立要操作的信息表 如下图: 第二步:实现对该信息表中数据的删除功能 代码如下:main(主页面) <!DOCTYPE html><html> < ...
- Android开发之ListView条目批量选择删除
ListView实现的列表,假设是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验非常不好,也给用户带来了非常大的麻烦. 实现效果图 详细实现代码 select.xml 主布局 ...
- 更好列表页中一个航班.先unset删除数组中一个键值对,再追加,最后按键排序
<?php $arr = array( '0' => array('item' => array( 'aa' => 'aaa', 'bb' => 'bbb' )), '1 ...
- Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页
在完成产品列表页前要做一些准备功夫.首先是去下载MvcPager用了为产品列表分页.下载的可能是基于MVC 2的,没关系,可以用在MVC 3上.如果有担心,下载源代码重新编译一次好了.下载后将DLL添 ...
- python实现列表页数据的批量抓取练手练手的
python实现列表页数据的批量抓取,练手的,下回带分页的 #!/usr/bin/env python # coding=utf-8 import requests from bs4 import B ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
- 夺命雷公狗ThinkPHP项目之----企业网站18之网站配置列表页的完成
我们点击下配置列表即可查看我们列表页的配置信息了: 其实这个最简单了,首先我们先来完成他控制器的代码: public function lists(){ $mod = M('Conf')->se ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页(转)
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
- Golang在京东列表页实践总结
Golang在京东列表页实践总结 作者:张洪涛 10余年软件开发和设计经验,曾就职于搜狐.搜狗.前matrixjoy公司联合创始人.甘普科技CTO. 目前线上状态 基于搜索实现: 全量数据,搜索结果不 ...
随机推荐
- ZOJ Monthly, July 2015
B http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5552 输入n,表示有n个数1到n.A先拿,B后拿,依次拿,每次可以拿任意一 ...
- ALAssetsLibrary
ALAssetsLibrary详解 ALAssetsLibrary类是代表系统中整个资源库,使用它可以访问资源库中的资源和保存照片,视频等功能. _library = [[ALAssetsLibr ...
- aspose.cell 自定义模板 SUM无效
数字类型的单元格, 显示 解决方案: 绑定的DataTable的列为字符串类型. 应该将其设置成数字类型的列
- lagstash + elasticsearch + kibana 3 + kafka 日志管理系统部署 02
因公司数据安全和分析的需要,故调研了一下 GlusterFS + lagstash + elasticsearch + kibana 3 + redis 整合在一起的日志管理应用: 安装,配置过程,使 ...
- HTML5程序设计--SVG
SVG(Scalable Vector Graphics):可缩放矢量图形,一种二维图形表示语言. 借助SVG,我们可以实现很多同Canvas API类型的绘制操作,但在Canvas元素上绘制文本的时 ...
- POJ1811 Prime Test(miller素数判断&&pollar_rho大数分解)
http://blog.csdn.net/shiyuankongbu/article/details/9202373 发现自己原来的那份模板是有问题的,而且竟然找不出是哪里的问题,所以就用了上面的链接 ...
- POJ 3982 序列(JAVA,简单,大数)
题目 //在主类中 main 方法必须是 public static void 的,在 main 中调用非static类时会有警告信息, //可以先建立对象,然后通过对象调用方法: import ja ...
- [C++]iostream的几种输入形式
做ACM题的时候,发现cin并不能满足所有输入要求.比如说: 每行给出一款运动鞋信息,若该款写不打折,则先后给出每种运动鞋单价P,所购买的数量Q:若打折,则先后给出每种运动鞋单价P,所购买的数量Q,折 ...
- iScroll.js 用法参考
本文原文链接:http://www.cnblogs.com/duanhuajian/archive/2013/04/08/3008323.html 概要 iScroll 4 这个版本完全重写了iScr ...
- 最近在看 ASP.NET 5,有关官方实现的 OAuth 2 包
有了官方实现的 OAuth 2 包,再扩展到国内就方便多了(懒得找第三方). 官方实现的有关授权和验证的包:https://github.com/aspnet/Security 根据这些,我就扩展了几 ...