【EasyUi DataGrid】批量删除
DataGrid是我们做网页经常使用到的组件之中的一个,对它的操作也无非是增删改查操作。单条数据的增删改相对来说比較简单。添加、改动能够直接在DataGrid中进行,也能够用弹出框的形式把数据装载在文本框等各种控件中呈现给用户,让用户自己主动填写或改动。删除的事稍后再说。个人觉得“查”是最难的。由于它涉及到了表格的各种载入问题等等。假设你觉得这是危言耸听。那就我的期待兴许博客吧!
不知道上边在说什么的能够忽略不计。接下来进行正文部分。这次的DataGrid分三部分来写:批量删除、批量改动。动态载入列。
本文先以最简单的删除操作来开刀,事实上删除操作的重点(不是难点,搞不清楚为什么非常多人非把这两个相提并论)就在传递字符串or传递拼接字符串(≈数组小功能),这两个一个是单条数据的删除。一个就是批量删除了。
一、先来看下效果图
1.选中两项后。点击删除。呈现例如以下效果
2.点击确定后。这两条数据将被删除
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
本来打算让大家看下数据库的,没想到把数据库的截图贴到这儿来……太影响眼睛的审美了,也没什么必要,所以凭借你的高智商水准,用上边两幅图全然能够说明效果了
二、代码实现
在项目中。client我们用的是MVC框架,当中仅仅用到了视图和控制器。然后通过控制器把数据传递给服务端。
1.在HTML页面中主要就是设置几个DataGrid的属性,这些不用我多说。大家查看帮助文档就OK了。
当数据载入到表格中,选择了要删除的数据后,我们仅仅须要在js中获取这些选中行。然后把标识这些数据行的字符串传递给Controller,代码例如以下:
//删除评分项操作
function DeleteJudgeItem() {
//获取选中行的数据,返回的是数组
//获取选中行的数据
var selectRows = $("#dg").datagrid("getSelections"); //假设没有选中行的话,提示信息
if (selectRows.length < 1) {
$.messager.alert("提示消息", "请选择要删除的记录。", 'info');
return;
} //假设选中行了,则要进行推断
$.messager.confirm("确认消息", "确定要删除所选记录吗?", function (isDelete) { //假设为真的话
if (isDelete) {
//定义变量值
var strIds = "";
//拼接字符串,这里也能够使用数组,作用一样
for (var i = 0; i < selectRows.length; i++) {
strIds += selectRows[i].JudgeId + ",";
}
//循环分割
strIds = strIds.substr(0, strIds.length - 1);
$.post('/JudgeItem/DeleteJudgeItem? id=' + strIds, function (jsonObj) {
if (jsonObj > 0) {
$.messager.alert('提示', '删除成功!');
$("#dg").datagrid("reload"); //删除成功后 刷新页面
} else { $.messager.alert('提示信息', '删除失败,请联系管理员。', 'warning');
}
}, "JSON");
}
});
}
2.在Controller中接收View传过来的信息,然后对这个信息进行解析。变成我们须要的数据,最后调用服务端方法对数据库进行改动
#region 删除评分项 + DeleteJudgeItem() + 王静娜 2015-5-30 18:01:02
public int DeleteJudgeItem()
{
try
{
//获得要删除的评分项JudgeId
string delJudgeId = Request.QueryString["id"];
//通过分割的方式。把要删除的评分项编号取出
string[] judgeId = delJudgeId.Split(',');
//循环调用后台方法删除
for (int i = 0; i < judgeId.Length; i++)
{
//创建新的评分项
Guid JudgeId = new Guid(judgeId[i]);
judgeItemService.DeleteJudgeItem(JudgeId);
}
return 1;
}
catch (Exception)
{
throw new Exception("删除失败,请联系管理员。");
}
}
#endregion
以上就是批量删除的内容了,当中用到的js、jQuery、ajax是学习网页设计不可缺少的东西,再者就是要学会看文档。文档相当于一部字典,遇到想做而不会做的时候多番几遍大有裨益
【EasyUi DataGrid】批量删除的更多相关文章
- easyui datagrid 批量编辑和提交数据
easyui datagrid 行编辑和提交方,废话就不多说了,直接上代码 <div style="margin: 5px;"> <table id=" ...
- easyui datagrid连续删除问题
如果在datagrid中直接将index传给easyui自带的deletRow方法来删除当前点击行,一开始并没有问题,但是当连续删除的时候就或出问题了. 原因是datagrid行是根据datagrid ...
- [转]easyui datagrid 批量编辑和提交
web前台主要代码: <script type="text/javascript"> $(function() { var $dg = $("#dg" ...
- Easyui datagrid 批量编辑和提交
<script type="text/javascript"> $(function() { var $dg = $("#dg"); $dg.dat ...
- EasyUI - DataGrid 组建 - [ 删除,修改 ]
效果: html代码: <div style="padding-top: 50px; width: 800px; margin: 0 auto;"> <!--使用 ...
- EASYUI datagrid批量修改与提交
http://www.cnblogs.com/szytwo/archive/2012/08/29/2662169.html 前台主要代码: <script type="text/jav ...
- easyui datagrid 取消删除的方法
下面为取消方法 ... { field: 'Guid', title: '操作', width: 80, align: 'center', formatter: function (value, ro ...
- EasyUI DataGrid 实现单行/多行编辑功能
要实现 EasyUI DataGrid 的可编辑很简单,在需要编辑的列添加 editor [编辑器]就可以了. 单行编辑 // 初始化数据列表 function initDatagrid() { $( ...
- 实例:SSH结合Easyui实现Datagrid的批量删除功能
在我先前的基础上面添加批量删除功能.实现的效果如下 删除成功 通常情况下删除不应该真正删除,而是应该有一个标志flag,但flag=true表示状态可见,但flag=false表示状态不可见,为删除状 ...
随机推荐
- 什么是vuejs之重新认识vuejs
什么是vuejs? 1.它是一个轻量级的mvvm框架 2.数据驱动+组件化的前端开发 3.github超过25k+的stat数,社区完善 4.vuejs更轻量,gzip后大小只有20k+ 5.vuej ...
- Windows Server 2008不能Ping改为允许的方法
用了Windows Server 2008朋友肯定都知道,2008在很多设置方面与2003不同,尤其在安全上进行了加强,例如:默认情况下Windows 2008是不允许PING的,那么如何打开允许PI ...
- Beta冲刺提交-星期四
这个作业属于哪个课程 软件工程 这个作业要求在哪里 <作业要求的链接> 团队名称 唱跳RAP编程 这个作业的目标 1.进行每日例会,每个成员汇报自己今天完成 的工作,PM安排明天的 ...
- PHP封装数据库
(1)按照步骤封装数据库 ①引入抽象类和抽象方法,即引入模板: ②继承抽象类,注意参数(规定几个就传入几个): ③逐个写入抽象方法,必须一一对应:(抽象方法必须一一引入,否则会报错-->有个抽象 ...
- Java怎么实现文件数据拷贝
实现一个文件的内容拷贝到另一个文件里 public void copyDemo () throws IOException { //创建文件输入流 FileInputStream fis = new ...
- Python爬虫:抓取手机APP的数据
摘要 大多数APP里面返回的是json格式数据,或者一堆加密过的数据 .这里以超级课程表APP为例,抓取超级课程表里用户发的话题. 1.抓取APP数据包 表单: 表单中包括了用户名和密码,当然都是加密 ...
- Pycharm中通过扩展工具添加QTDesigner
1.在电脑中找到Designer.exe的安装目录: 2.在pycharm中打开file->Settings->Tools->External Tools进行配置: 配置如下图所示: ...
- 对vuex的一点理解
vuex是vue.js的一个状态管理工具,它适用于解决平行组件之间的数据共享问题.一般情况下,我们更多的是父子组件之间通过props或$emit来实现传值,如何不满足以上情况那只有使用vuex进行解决 ...
- Python学习-while循环练习
1.计算1-100的和 i = 1; total = 0; while i <= 100: total = total + i; i = i + 1; print(total); 2.打印出1- ...
- laravel 开发辅助工具
laravel 开发辅助工具 配置 添加服务提供商 将下面这行添加至 config/app.php 文件 providers 数组中: 'providers' => [ ... App\Plug ...