前台
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 <link href="themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /> 5 <link href="themes/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 6 <script src="js/jquery.min.js" type="text/javascript"></script> 7 <script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> 8 <script src="grid.locale-zh_CN.js" type="text/javascript"></script> 9 <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 10 <script type="text/javascript"> 11 $(function () { 12 $("#gridTable").jqGrid({ 13 url: 'ww.ashx', 14 datatype: "json", 15 height: 250, 16 colNames: ['一', '二', '三', '四', '五', '六', '七', "八"], 17 colModel: [ 18 { name: 'a1', index: 'a1', 60 }, 19 { name: 'a2', index: 'a2', 90, editable: true }, 20 { name: 'a3', index: 'a3', 90, editable: true }, 21 { name: 'a4', index: 'a4', 125, editable: true }, 22 { name: 'a5', index: 'a5', 100, editable: true }, 23 { name: 'a6', index: 'a6', 120, editable: true }, 24 { name: 'a7', index: 'a7', 100, editable: true }, 25 { name: 'a8', index: 'a8', 100, editable: true } 26 ], 27 cellEdit:true, 28 cellurl: 'Handler1.ashx', 29 rowNum: 10, 30 rowList: [10, 20, 30], 31 pager: "#gridPager", 32 girdview: true, 33 emptyrecords: "无数据", 34 loadtext: "草泥马 等待下...", 35 rownumbers: true, 36 caption: "jqGrid与Servlet集成", 37 sortname: 'id', 38 viewrecords: true, 39 editurl: 'Handler1.ashx', 40 sortable:true, 41 sortorder: 'asc', 42 jsonReader: { 43 id: 'a1', 44 repeatitems: false 45 } 46 }).navGrid('#gridPager', { edit: true, add: true, del: true, search: false }); 47 }); 48 // function editRow() { 49 // var index = $("#gridTable").jqGrid('getGridParam', 'selrow'); 50 // if (index == null) { alert('次奥选一行在编辑啊'); return; } 51 // $("#edit").attr("disabled", true); 52 // $("#save").attr("disabled", false); 53 // $("#cancel").attr("disabled", false); 54 // $("#gridTable").jqGrid('editRow', index); 55 // } 56 // function saveRow() { 57 // var index = $("#gridTable").jqGrid('getGridParam', 'selrow'); 58 // if (index == null) { alert('次奥选一行在编辑啊'); return; } 59 // $("#edit").attr("disabled", false); 60 // $("#save").attr("disabled", true); 61 // $("#cancel").attr("disabled", true); 62 // $("#gridTable").jqGrid('saveRow', index); 63 // var a1 = $("#gridTable").getRowData(index); 64 // var url = "Handler1.ashx?a1=" + a1.a1; 65 // $.get(url, function (d) { 66 // if (d == "success") { 67 // alert("回发成功!"); 68 // } 69 // }) 70 // } 71 // function restoreRow() { 72 // var index = $("#gridTable").jqGrid('getGridParam', 'selrow'); 73 // if (index == null) { alert('次奥选一行在编辑啊'); return; } 74 // $("#edit").attr("disabled", false); 75 // $("#save").attr("disabled", true); 76 // $("#cancel").attr("disabled", true); 77 // $("#gridTable").jqGrid('restoreRow', index); 78 // } 79 </script> 80 </head> 81 <body> 82 <form id="form1" runat="server"> 83 <div> 84 <%-- <input id="add" type="button" value="添加" /> 85 <input id="del" type="button" value="删除" /> 86 <input id="edit" type="button" value="编辑" onclick="editRow()" /> 87 <input id="save" type="button" disabled="disabled" value="保存编辑" onclick="saveRow()" /> 88 <input id="cancel" type="button" disabled="disabled" value="取消编辑" onclick="restoreRow()" />--%> 89 <table id="gridTable"> 90 </table> 91 <div id="gridPager"> 92 </div> 93 </div> 94 </form> 95 </body> 96 </html>
编辑后台
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace JQgird { /// <summary> /// ww 的摘要说明 /// </summary> public class ww : IHttpHandler { public void ProcessRequest(HttpContext context) { int index = Convert.ToInt32(HttpContext.Current.Request.QueryString["page"]); int count = Convert.ToInt32(HttpContext.Current.Request.QueryString["rows"]); wqDataContext ww = new wqDataContext(); int records = 100;//ww.userInfo.Count(); //List<userInfo> val = ww.userInfo.Skip((index - 1) * count).Take(10).ToList(); System.Text.StringBuilder sb = new System.Text.StringBuilder(); System.Text.StringBuilder info = new System.Text.StringBuilder(); int total = 0; if (records % count == 0) { total = records/ count; } else { total = records / count + 1; } int begin = (index - 1) * count + 1; int end = index * count; //foreach (userInfo uu in val) //{ // string hh = "{"a1":"" + uu.a1.ToString() + "","a2":"" + uu.a2.ToString() + "","a3":"" + uu.a3.ToString() + "","a4":"" + uu.a4.ToString() + "","a5":"" + uu.a5.ToString() + "","a6":"" + uu.a6.ToString() + "","a7":"" + uu.a7.ToString() + "","a8":"" + uu.a8.ToString() + "" },"; // info.Append(hh); //} for (int i = begin; i <= end; i++) { info.Append("{"a1":"aaa" + i.ToString() + "","a2":"bbb" + i.ToString() + "","a3":"ccc" + i.ToString() + "","a4":"ddd" + i.ToString() + "","a5":"eee" + i.ToString() + "","a6":"fff" + i.ToString() + "","a7":"ggg" + i.ToString() + "","a8":"hhh" + i.ToString() + ""},"); } string str = info.ToString().Substring(0, info.ToString().Length - 1); sb.Append("{ "page":" + index + ","total":" + total + ","records":" + records + ","rows":[" + str + "]}"); string v = sb.ToString(); context.Response.Write(sb.ToString()); } public bool IsReusable { get { return false; } } } }
行编辑后台
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace JQgird { /// <summary> /// Handler1 的摘要说明 /// </summary> public class Handler1 : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string a1 = context.Request.Params["id"]; string a2 = context.Request.Params["a2"]; string a3 = context.Request.Params["a3"]; string a4 = context.Request.Params["a4"]; string a5 = context.Request.Params["a5"]; string a6 = context.Request.Params["a6"]; string a7 = context.Request.Params["a7"]; string a8 = context.Request.Params["a8"]; string method = context.Request.Params["oper"]; switch (method) { case "edit": break; case "add": break; case "del": break; } context.Response.Write("success"); } public bool IsReusable { get { return false; } } } }
其中几个容易忽略的参数
cellEdit:true, 是否启动行编辑
cellurl: 'Handler1.ashx', 行编辑调用的URL
editurl: 'Handler1.ashx', 增删改查排序调用的URL 数据行要添加可编辑属性
sortname: 'id', 排序ID
sortable:true, 是否启动排序
sortorder: 'asc', 排序模式