jquery easyui datagrid实现增加，修改，删除方法总结

本文实例讲述了jquery easyui datagrid实现增加，修改，删除的方法。分享给大家供大家参考，具体如下：
页面:

<body><form id="form1" runat="server"><table id="tt"></table></form></body>

引用的JS:

<link rel="stylesheet" type="text/css" href="/script/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="/script/themes/icon.css" /><script type="text/javascript" src="/script/jquery-1.4.2.min.js" </script><script type="text/javascript" src="/script/jquery.easyui.min.js" </script><script type="text/javascript" src="/script/locale/easyui-lang-zh_CN.js" mce_src="script/locale/easyui-lang-zh_CN.js"></script>

JS:

<script type="text/javascript"><！--$（function（）{$（"#tt"）.datagrid（{width:810,height:400,idField:"xsbh",url:"studentHandler.ashx",singleSelect:true,columns:[[{field:"xsbh",title:"编号",width:80}, {field:"UserName",title:"姓名",width:100}, {field:"Sex",title:"性别",width:30}, {field:"SchoolYear",title:"年份",width:50}, {field:"opt",title:"操作",width:100,align:"center",formatter:function（value,rec,index）{var s = "<a href="#" mce_href="#" onclick="view（""+ rec.xsbh + ""）">查看</a> ";var e = "<a href="#" mce_href="#" onclick="edit（""+ rec.xsbh + ""）">编辑</a> ";var d = "<a href="#" mce_href="#" onclick="del（""+ index +""）">删除</a> ";return s+e+d;} }]],toolbar:[{text:"增加",iconCls:"icon-add",handler:function（）{window.location.href="StuAdd.aspx";}},{text:"导入",iconCls:"icon-add",handler:function（）{window.location.href="StuImport.aspx"}},{text:"查找",iconCls:"icon-search"}],pagination:true}）;}） function view（bh） //转到查看页面{window.location.href="StuView.aspx?id="+bh+"&page=stu";// var row = $（"#tt"）.datagrid（"getSelected"）;//if（row）//{// alert（row.xsbh）;//}} function edit（bh） //转到编辑页面 {window.location.href="StuEdit.aspx?id="+bh; } function del（index）{ //删除操作$.messager.confirm（"确认","确认删除?",function（row）{if（row）{var selectedRow = $（"#tt"）.datagrid（"getSelected"）; //获取选中行$.ajax（{url:"delHandler.ashx?id="+selectedRow.xsbh+"&type=stu",//加了个type，作用是以后不管什么删除，都可以转到这个ashx中处理success:function（）{alert（"删除成功"）;}}）;$（"#tt"）.datagrid（"deleteRow",index）;}}） }// --></script>

这里面要注意的是，"操作"的跨行，一定要带上field:"opt",当然，field可以是任何值，这个值不用从数据库中绑定，随便取.如果没有field的话，会弹出 "rowspan为空或不是对象"的错误
获取数据和分页ashx:

using System;using System.Web;using System.Data;using System.Text;public class studentHandler : IHttpHandler {public void ProcessRequest （HttpContext context） {context.Response.ContentType = "text/plain";DataSet ds = new DataSet（）;//点击datagrid的分页按钮，自动向后台发送2个参数,rows和page，代表每页记录数和页索引int row = int.Parse（context.Request["rows"].ToString（））;int page = int.Parse（context.Request["page"].ToString（））;ds = GetContent（row, page）;string text =json.Dataset2Json（ds）;context.Response.Write（text）;}private DataSet GetContent（int pagesize,int pageindex）{Graduate.BLL.Student bll = new Graduate.BLL.Student（）;return bll.GetList（pagesize, pageindex）;}public bool IsReusable {get {return false;}}}

删除ashx

using System;using System.Web;using System.Web.SessionState;public class delHandler : IHttpHandler,IRequiresSessionState {public void ProcessRequest （HttpContext context） {context.Response.ContentType = "text/plain";string id = context.Request["id"].ToString（）;string type = context.Request["type"].ToString（）;switch （type）{case "stu":Graduate.BLL.Student stubll = new Graduate.BLL.Student（）;stubll.Delete（id, HttpContext.Current.Session["username"].ToString（）, HttpContext.Current.Session["usertype"].ToString（））;break;default:break;}}public bool IsReusable {get {return false;}}}

IRequiresSessionState 是因为用到了服务器端的session，没有用到的话可以去掉
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格（table）操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。