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. 目前线上状态 基于搜索实现: 全量数据,搜索结果不 ...
随机推荐
- 【Java】Eclipse导出jar包与javadoc
1.导出jar包 2.导出javadoc 3.jar包添加javadoc 4.出错解决 参考资料: http://www.cnblogs.com/cyh123/p/3345889.html http: ...
- 数据类型的处理(提取自FMDB)
if ((!obj) || ((NSNull *)obj == [NSNull null])) { sqlite3_bind_null(pStmt, idx); } // FIXME - someda ...
- Auto Layout - 使用总结
1.要开始使用AutoLayout,请先设置要约束的view的translatesAutoresizingMaskIntoConstraints属性为NO.在xib或者sb中勾选Use Auto La ...
- jquery 插件开发及extend
以下信息是在看了IBM上的一篇文章(使用 jQuery(中级),第 2 部分: 创建自己的插件)http://www.ibm.com/developerworks/cn/web/wa-aj-jquer ...
- css 内联元素inline 行框全解
首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...
- NGUI无法按住鼠标按住时无法监听OnHover事件
UICamera.cs 修改前: if ((!isPressed) && highlightChanged) { currentScheme = ControlScheme.Mouse ...
- MariaDB Galera Cluster集群
一.MariaDB Galera Cluster概要: 1.简述: MariaDB Galera Cluster 是一套在mysql innodb存储引擎上面实现multi-master及数据实时同步 ...
- Win7 VMWare 串口通信
下载安装工具: 1. 如果电脑(笔记本)没有串口接口,则需要使用一个 USB-Serial 转换线,这里使用 prolific usb-serial USB--串口转换线,首先需要在win7上安装对应 ...
- POJ 1947 Rebuilding Roads(树形DP)
题目链接 题意 : 给你一棵树,问你至少断掉几条边能够得到有p个点的子树. 思路 : dp[i][j]代表的是以i为根的子树有j个节点.dp[u][i] = dp[u][j]+dp[son][i-j] ...
- Ajax的进阶学习(一)
在Ajax课程中,我们了解了最基本的异步处理方式.本章,我们将了解一下Ajax的一些全局请求事件.跨域处理和其他一些问题. 加载请求 在Ajax异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长 ...