学习JQGRID

前台

 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', 排序模式