Mikel
[转载]jquery easyui datagrid的增加，修改，删除 – dodo-yufan – 博客园.
截图:
页面:
- <body>
- <form id=“form1” runat=“server”>
- <table id=“tt”>
- </table>
- </form>
- </body>
引用的JS:
- <link rel=“stylesheet” type=“text/css” href=“http://www.cnblogs.com/script/themes/default/easyui.css” />
- <link rel=“stylesheet” type=“text/css” href=“http://www.cnblogs.com/script/themes/icon.css” />
- <script type=“text/JavaScript” src=“http://www.cnblogs.com/script/JQuery-1.4.2.min.js” </script>
- <script type=“text/JavaScript” src=“http://www.cnblogs.com/script/JQuery.easyui.min.js” </script>
- <script type=“text/javascript” src=“http://www.cnblogs.com/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，没有用到的话可以去掉
