datagrid选中的多行数据删除功能的实现
一、前台代码:
<head>
<meta charset="UTF-8">
<title>Start from zero</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/demo/demo.css">
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
</head>
<body>
<form id="fm">
<table id="dg" title="Client Side Pagination" toolbar="#tb" fitcolumns="true" rownumbers="true"
showfooter="true" style="width: 640px; height: 600px" data-options="
remoteSort:false,
rownumbers:true,
singleSelect:false,
autoRowHeight:true,
pagination:true,
showFooter: true,
fitColumns: true,
pageSize:20">
<thead frozen="true">
<tr>
<th data-options="field:'ck',checkbox:true,width:40">
</th>
<th data-options="field:'LoginID',width:100" sortable="true">
LoginID
</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'UserName',width:120" sortable="true">
UserName
</th>
<th data-options="field:'Sex',align:'center',width:80" sortable="true">
Sex
</th>
<th data-options="field:'Department',width:140" sortable="true">
Department
</th>
<th data-options="field:'Age',width:80" sortable="true">
Age
</th>
</tr>
</thead>
</table>
<div id="tb" style="padding: 3px">
<input id="btn_delete" type="button" value="Deletes" οnclick="DeleteData()" />
</div>
<script type="text/javascript">
function getData()
{
$('#dg').datagrid({
url: 'Handler.ashx',
method: 'get',
striped: true,
title: "员工列表",
onSortColumn: function (sort, order)
{
//alert("sort:" + sort + ",order:" + order + "");
$('#dg').datagrid('reload', {
sort: sort,
order: order
});
}
})
}
function pagerFilter(data)
{
if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize)
{
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', data);
}
});
if (!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
function DeleteData()
{
$("#test").val("deletes");
var ids = "";
var rows = $('#dg').datagrid('getSelections');
if (rows.length > 0) {
for (var i = 0; i < rows.length; i++) {
ids += rows[i].LoginID + "|";
}
if (confirm("确认要删除?")) {
$('#dg').datagrid('reload', {
test: $('#test').val(),
array: ids
});
}
}
else {
alert('请选择要删除的数据行!');
}
$("#test").val("");
$('#dg').datagrid('reload', {
test: $('#test').val(),
});
}
$(function ()
{
$('#dg').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', getData());
});
</script>
<div id="dlg">
</div>
<input name="Test" id="test" type="hidden" />
</form>
</body>
</html>
这里遇到点问题:
function DeleteData()
{
$("#test").val("deletes");
var ids = "";
var rows = $('#dg').datagrid('getSelections');
if (rows.length > 0) {
for (var i = 0; i < rows.length; i++) {
ids += rows[i].LoginID + "|";
}
if (confirm("确认要删除?")) {
$('#dg').datagrid('reload', {
test: $('#test').val(),
array: ids
});
}
}
else {
alert('请选择要删除的数据行!');
}
<span style="color:#ff0000;"> $("#test").val("");
$('#dg').datagrid('reload', {
test: $('#test').val(),
});</span>
}
1.不加这几行代码,删除数据后,页面不刷新,也就是datagrid没有重新加载数据,真是恼火,个人感觉上面几行的 $('#dg').datagrid('reload', {这个已经请求重新加载了啊,不知道为什么没有反应。
2.要是有大神了解这里的话,还请留言或者私信指导一下,在这里谢了。
3.test依然是操作标识,给它赋值deletes,array为所有选中行的id集合,我是通过拼接字符串,然后把整个字符串传向处理页面。感觉这样子不是很灵性,觉得应该把这些被选中的行id添加到一个数组中,把这个数组的数组名传过去就行了,不过这种方法,我在一般处理程序里获取数组时遇到了问题,表示现在还不会获取数组,实在是汗颜。
二、一般处理程序Handler.ashx:
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using Newtonsoft.Json;
using System.Text;
public class Handler : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
string test = context.Request.QueryString["test"];//前台传的标示值
string username = context.Request.QueryString["username"];//前台传的标示值
string loginid = context.Request.QueryString["loginid"];//前台传的标示值
string array = context.Request.QueryString["array"];//前台传的id集合
string sort = !string.IsNullOrEmpty(context.Request.QueryString["sort"])?context.Request.QueryString["sort"]:"LoginID";
string order = !string.IsNullOrEmpty(context.Request.QueryString["order"])?context.Request.QueryString["order"]:"asc";
if (string.IsNullOrEmpty(test))
{
Query(context,sort,order);
}
else if (test == "search")
{
SearchData(context, username, loginid);
}
else if (test == "deletes")
{
DeleteData(context, array);
}
}
public void Query(HttpContext context,string sort,string order)
{
context.Response.ContentType = "text/plain";
SqlHelp sqla = new SqlHelp();
string stra = "select * from tTestTable order by "+sort+" "+order;
DataTable dta = sqla.GetDataTable(stra);
sqla.SqlClose();
string json = JsonConvert.SerializeObject(dta);
context.Response.Write(json);
}
public void SearchData(HttpContext context, string username, string loginid)
{
context.Response.ContentType = "text/plain";
SqlHelp sqlb = new SqlHelp();
string strb = "select * from tTestTable where 1=1";
if (!string.IsNullOrEmpty(username))
{
strb += " and " + "UserName" + " like '%" + username + "%'";
}
if (!string.IsNullOrEmpty(loginid))
{
strb += " and " + "LoginID" + " like '%" + loginid + "%'";
}
strb += " order by LoginID desc";
DataTable dtb = sqlb.GetDataTable(strb);
sqlb.SqlClose();
string jsonb = JsonConvert.SerializeObject(dtb);
context.Response.Write(jsonb);
}
public void DeleteData(HttpContext context, string array)
{
context.Response.ContentType = "text/plain";
array = array.TrimEnd('|');
string[] loginids = array.Split('|');
for (int i = 0; i < array.Length; i++)
{
SqlHelp sqlc = new SqlHelp();
string strc = "delete from tTestTable where LoginID='" + loginids[i] + "'";
sqlc.ExecuteNonQuery(strc);
sqlc.SqlClose();
}
SqlHelp sqla = new SqlHelp();
string stra = "select * from tTestTable order by LoginID asc";
DataTable dta = sqla.GetDataTable(stra);
sqla.SqlClose();
string json = JsonConvert.SerializeObject(dta);
context.Response.Write(json);
}
public bool IsReusable
{
get
{
return false;
}
}
}
三、运行结果截图:
感觉还有好多东西不明白,有待提高啊,加油......