通天塔 刺客信条:jquery easyui datagrid的增加，修改，删除

截图:

页面:

引用的JS:

1. "stylesheet" type="text/css" href="http://www.cnblogs.com/script/themes/default/easyui.css" />  
2.     "stylesheet" type="text/css" href="http://www.cnblogs.com/script/themes/icon.css" />  
3.     "text/javascript" src="http://www.cnblogs.com/script/jquery-1.4.2.min.js"   
4.     "text/javascript" src="http://www.cnblogs.com/script/jquery.easyui.min.js"   
5.     "text/javascript" src="http://www.cnblogs.com/script/locale/easyui-lang-zh_CN.js" mce_src="script/locale/easyui-lang-zh_CN.js">   

JS:

1. "text/javascript">  

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

获取数据和分页ashx:

1. using System;  
2. using System.Web;  
3. using System.Data;  
4. using System.Text;  
5.   
6. public class studentHandler : IHttpHandler {  
7.       
8.     public void ProcessRequest (HttpContext context) {  
9.         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. }  

删除ashx

1. using System;  
2. using System.Web;  
3. using System.Web.SessionState;  
4.   
5. public class delHandler : IHttpHandler,IRequiresSessionState {  
6.       
7.     public void ProcessRequest (HttpContext context) {  
8.         context.Response.ContentType = "text/plain";  
9.         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. }  

加载相关js和css，因为easyui依赖jquery，所有加载easyui前要先加载jquery，否则为提示找不到datagrid

界面加入

加载datagrid的js代码

1. //页面加载  
2. $(document).ready(function(){  
3.             loadGrid();  
4. });  
5.   
6. //加载表格datagrid  
7. function loadGrid()  
8. {  
9.     //加载数据  
10.     $('#cxdm').datagrid({  
11.                 width: 'auto',  
12.                 height:300,               
13.                 striped: true,  
14.                 singleSelect : true,  
15.                 url:'getPsNewConsultList.action',  
16.                 //queryParams:{},  
17.                 loadMsg:'数据加载中请稍后……',  
18.                 pagination: true,  
19.                 rownumbers: true,     
20.                 columns:[[  
21.                     {field:'adviceid',title: '来文号',align: 'center',width: getWidth(0.2)},  
22.                     {field:'consulter',title: '案由',align: 'center',width: getWidth(0.45),  
23.                         //添加超级链，并将来文号作为参数传入  
24.                         formatter:function(val,rec){  
25.                             //alert(rec.adviceid);  
26.                             return ""'>"+val+"";  
27.                        }  
28.                     },  
29.                     {field:'content',title: '状态',align: 'center',width: getWidth(0.2)},  
30.                     {field:'replynumber',title: '回复数',align: 'center',width: getWidth(0.05)}                                                          
31.                 ]]  
32.             });  
33. }  
34.   
35. //为loadGrid()添加参数  
36.         var queryParams = $('#cxdm').datagrid('options').queryParams;  
37.         queryParams.who = who.value;  
38.         queryParams.type = type.value;  
39.         queryParams.searchtype = searchtype.value;  
40.         queryParams.keyword = keyword.value;  
41.         //重新加载datagrid的数据  
42.         $("#cxdm").datagrid('reload');