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】批量删除的更多相关文章

  1. easyui datagrid 批量编辑和提交数据

    easyui datagrid 行编辑和提交方,废话就不多说了,直接上代码 <div style="margin: 5px;"> <table id=" ...

  2. easyui datagrid连续删除问题

    如果在datagrid中直接将index传给easyui自带的deletRow方法来删除当前点击行,一开始并没有问题,但是当连续删除的时候就或出问题了. 原因是datagrid行是根据datagrid ...

  3. [转]easyui datagrid 批量编辑和提交

    web前台主要代码: <script type="text/javascript"> $(function() { var $dg = $("#dg" ...

  4. Easyui datagrid 批量编辑和提交

    <script type="text/javascript"> $(function() { var $dg = $("#dg"); $dg.dat ...

  5. EasyUI - DataGrid 组建 - [ 删除,修改 ]

    效果: html代码: <div style="padding-top: 50px; width: 800px; margin: 0 auto;"> <!--使用 ...

  6. EASYUI datagrid批量修改与提交

    http://www.cnblogs.com/szytwo/archive/2012/08/29/2662169.html 前台主要代码: <script type="text/jav ...

  7. easyui datagrid 取消删除的方法

    下面为取消方法 ... { field: 'Guid', title: '操作', width: 80, align: 'center', formatter: function (value, ro ...

  8. EasyUI DataGrid 实现单行/多行编辑功能

    要实现 EasyUI DataGrid 的可编辑很简单,在需要编辑的列添加 editor [编辑器]就可以了. 单行编辑 // 初始化数据列表 function initDatagrid() { $( ...

  9. 实例:SSH结合Easyui实现Datagrid的批量删除功能

    在我先前的基础上面添加批量删除功能.实现的效果如下 删除成功 通常情况下删除不应该真正删除,而是应该有一个标志flag,但flag=true表示状态可见,但flag=false表示状态不可见,为删除状 ...

随机推荐

  1. 解决:未能加载文件或程序集“System.Web.Http, Version=5.2.4.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)

    今天发布web API,调用接口报错了:未能加载文件或程序集“System.Web.Http, Version=5.2.4.0, Culture=neutral, PublicKeyToken=31b ...

  2. 【Python-2.7】大小写转换函数

    字母大小写是编程过程中经常遇到的问题,如下函数可以灵活的进行大小写转换: title():把单词首字母转换为大写: upper():把每个字母转换为大写: lower():把每个字母转换为小写. 示例 ...

  3. swift- mutating

    struct Stack<Element> { var items = [Element]() func push(_ item:Element){ self.items.append(i ...

  4. R语言学习 - 线图一步法

    首先把测试数据存储到文件中方便调用.数据矩阵存储在line_data.xls和line_data_melt.xls文件中 (直接拷贝到文件中也可以,这里这么操作只是为了随文章提供个测试文件,方便使用. ...

  5. es6常用的语法

    刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中.但是ES6那么多那么多特性,我们需要全部都掌握吗?秉着二八原则,掌握好常用的,有用的这个可以让我们快速起飞. 接下来 ...

  6. jQuey中的return false作用是什么?

    jQuey中的return false作用是什么?在众多的语句中都有return false的使用,当然对于熟悉它的开发者来说,当然是知根知底,知道此语句的作用,当然也就知道在什么时候使用此语句,不过 ...

  7. 数塔(hdoj 2084,动态规划递推)

    在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大是多少? 已经告诉你了,这是个DP的题目 ...

  8. 洛谷——P3919 【模板】可持久化数组(可持久化线段树/平衡树)

    P3919 [模板]可持久化数组(可持久化线段树/平衡树) 题目背景 UPDATE : 最后一个点时间空间已经放大 标题即题意 有了可持久化数组,便可以实现很多衍生的可持久化功能(例如:可持久化并查集 ...

  9. CF 429B B.Working out (四角dp)

    题意: 两个人一个从左上角一个从左下角分别开始走分别走向右下角和右上角,(矩阵每个格子有数)问到达终点后可以得到的最大数是多少,并且条件是他们两个相遇的时候那个点的数不能算 思路: 首先这道题如果暴力 ...

  10. (C/C++学习)18.C语言双向链表

    说明:数组提供了连续内存空间的访问和使用,而链表是对内存零碎空间的有效组织和使用.链表又分为单向链表和双向链表,单向链表仅提供了链表的单方向访问,相比之下,双向链表则显得十分方便. 一.单向链表的节点 ...