截图:
页面:
view plaincopy to clipboardprint?01.<body> 02. <form id="form1" runat="server"> 03. <table id="tt"> 04. 05. </table> 06. 07. 08. </form> 09.</body> <body> <form id="form1" runat="server"> <table id="tt"> </table> </form></body>
引用的JS:
view plaincopy to clipboardprint?01.<link rel="stylesheet" type="text/css" href="../../script/themes/default/easyui.css" /> 02. <link rel="stylesheet" type="text/css" href="../../script/themes/icon.css" /> 03. <script type="text/javascript" src="../../script/jquery-1.4.2.min.js" </script> 04. <script type="text/javascript" src="../../script/jquery.easyui.min.js" </script> 05. <script type="text/javascript" src="../../script/locale/easyui-lang-zh_CN.js" mce_src="script/locale/easyui-lang-zh_CN.js"></script> <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:
view plaincopy to clipboardprint?01.<script type="text/javascript"><!-- 02. $(function(){ 03. $('#tt').datagrid({ 04. width:810, 05. height:400, 06. idField:'xsbh', 07. url:'studentHandler.ashx', 08. singleSelect:true, 09. columns:[[ 10. {field:'xsbh',title:'编号',width:80}, 11. {field:'UserName',title:'姓名',width:100}, 12. {field:'Sex',title:'性别',width:30}, 13. {field:'SchoolYear',title:'年份',width:50}, 14. {field:'opt',title:'操作',width:100,align:'center', 15. formatter:function(value,rec,index){ 16. var s = '<a href="#" mce_href="#" οnclick="view(/''+ rec.xsbh + '/')">查看</a> '; 17. var e = '<a href="#" mce_href="#" οnclick="edit(/''+ rec.xsbh + '/')">编辑</a> '; 18. var d = '<a href="#" mce_href="#" οnclick="del(/''+ index +'/')">删除</a> '; 19. return s+e+d; 20. } 21. } 22. ]], 23. toolbar:[{ 24. text:'增加',iconCls:'icon-add',handler:function(){ 25. window.location.href='StuAdd.aspx'; 26. } 27. }, 28. {text:'导入',iconCls:'icon-add',handler:function(){ 29. window.location.href='StuImport.aspx' 30. } 31. }, 32. {text:'查找',iconCls:'icon-search'} 33. ], 34. pagination:true 35. }); 36. }) 37. 38. function view(bh) //转到查看页面 39. { 40. window.location.href='StuView.aspx?id='+bh+'&page=stu'; 41.// var row = $('#tt').datagrid('getSelected'); 42.// if(row) 43.// { 44.// alert(row.xsbh); 45.// } 46. } 47. function edit(bh) //转到编辑页面 48. { 49. window.location.href='StuEdit.aspx?id='+bh; 50. } 51. 52. function del(index){ //删除操作 53. $.messager.confirm('确认','确认删除?',function(row){ 54. if(row){ 55. var selectedRow = $('#tt').datagrid('getSelected'); //获取选中行 56. $.ajax({ 57. url:'delHandler.ashx?id='+selectedRow.xsbh+'&type=stu', 58.//加了个type,作用是以后不管什么删除,都可以转到这个ashx中处理 59. success:function(){alert('删除成功');} 60. }); 61. $('#tt').datagrid('deleteRow',index); 62. } 63. }) 64. } 65. 66.// --></script> <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="#" οnclick="view(/''+ rec.xsbh + '/')">查看</a> '; var e = '<a href="#" mce_href="#" οnclick="edit(/''+ rec.xsbh + '/')">编辑</a> '; var d = '<a href="#" mce_href="#" οnclick="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:
view plaincopy to clipboardprint?01.using System; 02.using System.Web; 03.using System.Data; 04.using System.Text; 05. 06.public class studentHandler : IHttpHandler { 07. 08. public void ProcessRequest (HttpContext context) { 09. context.Response.ContentType = "text/plain"; 10. DataSet ds = new DataSet(); 11. //点击datagrid的分页按钮,自动向后台发送2个参数,rows和page,代表每页记录数和页索引 12. int row = int.Parse(context.Request["rows"].ToString()); 13. int page = int.Parse(context.Request["page"].ToString()); 14. ds = GetContent(row, page); 15. string text =json.Dataset2Json(ds); 16. context.Response.Write(text); 17. } 18. 19. private DataSet GetContent(int pagesize,int pageindex) 20. { 21. Graduate.BLL.Student bll = new Graduate.BLL.Student(); 22. return bll.GetList(pagesize, pageindex); 23. } 24. public bool IsReusable { 25. get { 26. return false; 27. } 28. } 29. 30.} 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
view plaincopy to clipboardprint?01.using System; 02.using System.Web; 03.using System.Web.SessionState; 04. 05.public class delHandler : IHttpHandler,IRequiresSessionState { 06. 07. public void ProcessRequest (HttpContext context) { 08. context.Response.ContentType = "text/plain"; 09. string id = context.Request["id"].ToString(); 10. string type = context.Request["type"].ToString(); 11. switch (type) 12. { 13. case "stu": 14. Graduate.BLL.Student stubll = new Graduate.BLL.Student(); 15. stubll.Delete(id, HttpContext.Current.Session["username"].ToString(), HttpContext.Current.Session["usertype"].ToString()); 16. break; 17. default: 18. break; 19. } 20. } 21. 22. public bool IsReusable { 23. get { 24. return false; 25. } 26. } 27. 28.} 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,没有用到的话可以去掉
本文来自博客,转载请标明出处:http://blog.csdn.net/l277759183/archive/2010/12/01/6048120.aspx