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. VMWare虚拟机中Ubuntu 16.04 (linux无桌面)配置静态IP上网

    1. 基础环境说明 虚拟机: VMWare 12.5.2 操作系统: Ubuntu 16.04 (无桌面) 物理主机操作系统: win 7 旗舰版 2. 摸底 VMware在安装之后,会创建2个虚拟的 ...

  2. ThinkPHP---AR模式

    [前言] 在之前学习框架时介绍过 (1)什么是框架? ①框架是一堆包含了常量.方法和类等代码集合: ②半成品应用,只包含了项目开发时的底层架构,并不包含业务逻辑: ③包含一些设计模式,例如单例模式,工 ...

  3. Eigen库笔记整理(一)

    首先熟悉Eigen库的用途,自行百度. 引入头文件: // Eigen 部分 #include <Eigen/Core> // 稠密矩阵的代数运算(逆,特征值等) #include < ...

  4. cmd命令安装、卸载、启动和停止Windows Service

    1.运行--〉cmd:打开cmd命令框 2.在命令行里定位到InstallUtil.exe所在的位置 InstallUtil.exe 默认的安装位置是在C:/Windows/Microsoft.NET ...

  5. 牛客练习赛25 C 再编号

    解题思路 我们先来观察一下题目中给出的公式 $$a'_i=(\sum_{j=1}^na_j)-a_i$$ 通过这个公式推一下经过再编号后的序列的总和,因为我们推出这个和之后可以进行下一次计算. $$\ ...

  6. STL++?pb_ds平板电视初步探索

    什么是pb_ds? 除了众所周知的STL库,c++还自带了ext库(应该可以这么叫吧),其中有用pb_ds命名的名称空间(俗称平板电视).这个名称空间下有四个数据类型结构.这些都是鲜为人知的.经过测试 ...

  7. 阿里云安装nodejs

    cd进入root目录下: cd /root 下载node.js安装包 wget https://nodejs.org/dist/v8.11.2/node-v8.11.2-linux-x64.tar.x ...

  8. 【Codeforces 369C】 Valera and Elections

    [链接] 我是链接,点我呀:) [题意] 给你一棵树 让你选择若干个修理点. 这些修理点被选中之后,节点i到1号节点之间的所有"坏路"都会被修好 问最少需要选择多少个点才能将所有的 ...

  9. Stones HDU 1896

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1896 题目大意: 有n个石头,每个石头有:p  它所在的位置 ,d  它能扔多远 从0 开始,遇到第奇 ...

  10. Meanshift,聚类算法

    记得刚读研究生的时候,学习的第一个算法就是meanshift算法,所以一直记忆犹新,今天和大家分享一下Meanshift算法,如有错误,请在线交流. Mean Shift算法,一般是指一个迭代的步骤, ...