DataGrid是我们做网页常用到的组件之一,对它的操作也无非是增删改查操作。单条数据的增删改相对来说比较简单,增加、修改可以直接在DataGrid中进行,也可以用弹出框的形式把数据装载在文本框等各种控件中呈现给用户,让用户自动填写或修改,删除的事稍后再说,个人认为“查”是最难的,因为它涉及到了表格的各种加载问题等等,如果你觉得这是危言耸听,那就我的期待后续博客吧!
不知道上边在说什么的可以忽略不计,接下来进行正文部分,这次的DataGrid分三部分来写:批量删除、批量修改,动态加载列。本文先以最简单的删除操作来开刀,其实删除操作的重点(不是难点,搞不清楚为什么很多人非把这两个相提并论)就在传递字符串or传递拼接字符串(≈数组小功能),这两个一个是单条数据的删除,一个就是批量删除了。
一、先来看下效果图
1.选中两项后,点击删除,呈现如下效果
2.点击确定后,这两条数据将被删除
本来打算让大家看下数据库的,没想到把数据库的截图贴到这儿来……太影响眼睛的审美了,也没什么必要,所以凭借你的高智商水准,用上边两幅图完全可以说明效果了
二、代码实现
在项目中,客户端我们用的是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是学习网页设计必不可少的东西,再者就是要学会看文档。文档相当于一部字典,遇到想做而不会做的时候多番几遍大有裨益