easyui datagrid 增删改查
前台显示页面：grid.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="easyui/css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="easyui/css/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="easyui/css/demo.css" rel="stylesheet" type="text/css" />
<link href="easyui/css/dlg.css" rel="stylesheet" type="text/css" />
<script src="easyui/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="easyui/js/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tab").datagrid({
title: "学生信息",
iconCls: "icon-save",
width: 600,
height: 300,
collapsible: true,
autoRowHeight: true,
striped: true,
queryParams: { "action": "query" },
url: "grid.ashx",
frozenColumns: [[{ field: "chk", "checkbox": true}]],
columns: [[
{ field: 'JSON_no', title: "编号", width: 80 },
{ field: 'JSON_name', title: "姓名", width: 100 },
{ field: 'JSON_pwd', title: "密码", width: 100 },
{ field: 'JSON_sex', title: "性别", width: 100 },
{ field: 'JSON_age', title: "年龄", width: 100 },
{ field: 'JSON_address', title: "住址", width: 100 },
]],
// toolbar:"#tool",
toolbar:[{
id:'btnadd',
text:'添加',
iconCls:'icon-add',
handler:function(){
$('#btnsave').linkbutton('enable');
add_dg();
}
},{
id:'btnedit',
text:'编辑',
iconCls:'icon-edit',
handler:function(){
$('#btnsave').linkbutton('enable');
edit_dg();
}
},{
id:'btncut',
text:'删除',
iconCls:'icon-no',
handler:function(){
$('#btnsave').linkbutton('enable');
dele_dg();
}
}],
pagination: true,
rownumbers: true,
singleSelect:true
});
//////////////分页//////////////////
$("#tab").datagrid('getPager').pagination({
beforePageText: '当前第',
afterPageText: '页，共{pages}页',
displayMsg: ' 当前显示{from} - {to} 条记录 共 {total}条记录',
pagesize: 10, //页面大小
pageList:[10,15,20,30]
});
})
//////////////////////删除/////////////////
function dele_dg() {
//**********返回选中的复选框,返回值是数组(object类型)
var checked = $("#tab").datagrid('getChecked');
if (checked[0] != null) {
var v = '';
for (var i = 0; i < checked.length; i++) {
v += checked[i].JSON_id + ',';
}
//************所有选中记录的id和','组成的字符串
var str = v.substring(0, v.length - 1);
$.post("grid.ashx", {"action":"del", id: str }, function (data) {
$.messager.alert('提示', data, 'info', function () { $("#tab").datagrid("reload"); });
});
}
}
////////////////////////////添加///////////////////
function add_dg() {
//*********************$('#fm')[0](转化为dom对象)先重置表单以免编辑功能的影响
$('#fm_dg')[0].reset();
$('#dd_dg').show();
$('#dd_dg').dialog({
title: '记录修改',
width: 400,
height: 200,
closed: false,
cache: false,
modal: true,
buttons: [{
text: '保存',
iconCls: 'icon-save',
handler: function () {
var param = $("#fm_dg").serialize();
//解决中文乱码的
var params = decodeURIComponent(param, true);
$.post("grid.ashx", { "action": "add", data: params }, function (data) {
if (data == 'ok') {
$.messager.show({
title: 'success',
msg: '插入成功！'
});
$('#tab').datagrid('reload');
} else {
$.messager.show({
title: 'Error',
msg: '插入失败！'
});
}
$('#tab').datagrid('reload');
$('#dd_dg').window('close');
});
}
}, {
text: '关闭',
iconCls: 'icon-cancel',
handler: function () {
$('#dd_dg').window('close');
}
}]
});
}
/////////////////////////////修改//////////////////////////
function edit_dg() {
var selected = $('#tab').datagrid('getSelected');
if (selected != null) {
$('#dd_dg').show();
//***********将表格中选中的一条记录值传到编辑窗口
$('#id').val(selected.JSON_id);
$("#no").val(selected.JSON_no);
$('#name').val(selected.JSON_name);
$('#pwd').val(selected.JSON_pwd);
//显示下拉框的选中项
if (selected.JSON_sex == "男") {
$("#sex").find("option").eq(0).attr("selected", "selected");
} else {
$("#sex").find("option").eq(1).attr("selected", "selected");
}
$('#age').val(selected.JSON_age);
$('#address').val(selected.JSON_address);
$('#dd_dg').dialog({
title: '记录修改',
width: 400,
height: 200,
closed: false,
cache: false,
modal: true,//显示遮罩层
buttons: [{
text: '保存',
iconCls: 'icon-save',
handler: function () {
var param = $("#fm_dg").serialize();
var params = decodeURIComponent(param, true);
$.post("grid.ashx", { "action":"edit",data:params}, function (data) {
if (data == 'ok') {
$.messager.show({
title: 'success',
msg: '修改成功！'
});
$('#tab').datagrid('reload');
} else {
$.messager.show({
title: 'Error',
msg: '修改失败！'
});
}
$('#dg').datagrid('reload');
$('#dd_dg').window('close');
});
}
}, {
text: '关闭',
iconCls: 'icon-cancel',
handler: function () {
$('#dd_dg').window('close');
}
}]
});
}
}
</script>
</head>
<body>
<!-- datagrid -->
<table id="tab"></table>
<!-- 添加窗体 -->
<div id="dd_dg" style="display:none;" >
<form id="fm_dg" method="post" action="grid.ashx">
<input type="hidden" name="id" id="id"/>
编号:<input type="text" name="no" id="no" class="easyui-validatebox" required="true"/><br/>
姓名:<input type="text" name="name" id="name" class="easyui-validatebox" required="true"/><br/>
密码:<input type="password" name="pwd" id="pwd" class="easyui-validatebox" required="true"/><br/>
性别:<select name="sex" id="sex">
<option value="1">男</option>
<option value="0">女</option>
</select><br/>
年龄:<input type="text" name="age" id="age" class="easyui-validatebox" required="true"/><br/>
住址:<input type="text" name="address" id="address" class="easyui-validatebox" required="true"/><br/>
</form>
</div>
</body>
</html>
//后台数据处理页面grid.ashx
public class grid : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action = context.Request["action"].ToString();
switch (action)
{
case "query":
Query();
break;
case "del":
Del();
break;
case "add":
Add();
break;
case "edit":
Edit();
break;
}
}
/// <summary>
/// 查询并分页
/// </summary>
private void Query()
{
string str = string.Empty;
string rows = HttpContext.Current.Request["rows"].ToString(); //获取datagrid传来的行数
string page = HttpContext.Current.Request["page"].ToString(); //获取datagrid传来的页码 当前页
// GetTablebyproc上篇文章的调用带参数的存储过程，返回datat
DataTable dt1 = SqlHelper.GetTablebyproc("pageFileter", int.Parse(rows), int.Parse(page), "stu");
DataTable dt = SqlHelper.GetTable("select * from stu");
str = JSonHelper.CreateJsonParameters(dt1, true, dt.Rows.Count);
HttpContext.Current.Response.Write(str);
}
/// <summary>
/// 删除一行数据
/// </summary>
private void Del()
{
string str = "删除失败";
string id = HttpContext.Current.Request["id"] != "" ? HttpContext.Current.Request["id"].ToString() : "";
if (id != string.Empty)
{
int num = SqlHelper.DelData("stu", id);
if (num > 0)
{
str = string.Format("删除成功，本次共删除{0}条", num.ToString());
}
else
{
str = "删除失败";
}
}
HttpContext.Current.Response.Write(str);
}
/// <summary>
/// 添加一条数据
/// </summary>
private void Add()
{
StringBuilder sb = new StringBuilder();
foreach (string s in HttpContext.Current.Request.Form.AllKeys)
{
sb.AppendFormat("{0}: {1}\n", s, HttpContext.Current.Request.Form[s]);
}
string str = sb.ToString();
string[] str1 = str.Split('&');
string no = str1[1].Split('=')[1];
string name = str1[2].Split('=')[1];
string pwd = str1[3].Split('=')[1];
string sex = str1[4].Split('=')[1]=="1"?"男":"女";
int age = int.Parse(str1[5].Split('=')[1]);
string add = str1[6].Split('=')[1];
string address = add.Substring(0, add.Length - 1);
string sql = string.Format("insert into stu values('{0}','{1}','{2}','{3}',{4},'{5}')", no, name, pwd, sex, age, address);
int count = 0;
count = SqlHelper.ExeNonQuery(sql, CommandType.Text, null) ? 1 : 0;
if (count > 0)
{
HttpContext.Current.Response.Write("ok");
}
else
{
HttpContext.Current.Response.Write("no");
}
}
/// <summary>
/// 修改一条数据
/// </summary>
private void Edit()
{
StringBuilder sb = new StringBuilder();
foreach (string s in HttpContext.Current.Request.Form.AllKeys)
{
sb.AppendFormat("{0}: {1}\n", s, HttpContext.Current.Request.Form[s]);
}
string str = sb.ToString();
string[] str1 = str.Split('&');
int id = int.Parse(str1[0].Split('=')[1]);
string no = str1[1].Split('=')[1];
string name = str1[2].Split('=')[1];
string pwd = str1[3].Split('=')[1];
string sex = str1[4].Split('=')[1] == "1" ? "男" : "女";
int age = int.Parse(str1[5].Split('=')[1]);
string add = str1[6].Split('=')[1];
string address = add.Substring(0, add.Length - 1);
string sql = string.Format("update stu set no='{0}',name='{1}',pwd='{2}',sex='{3}',age={4},address='{5}' where id={6}", no, name, pwd, sex, age, address, id);
int count = 0;
count = SqlHelper.ExeNonQuery(sql, CommandType.Text, null) ? 1 : 0;
if (count > 0)
{
HttpContext.Current.Response.Write("ok");
}
else
{
HttpContext.Current.Response.Write("no");
}
}