利用JqGrid结合ashx显示列表之一

最近项目决定运用JqGrid列表控件显示相关数据，以前接触比较多还是easyui和Ext.Net的列表控件，文章简单写的小实例进行一个总结；

1:引入相关的JS及CSS文件,JqGrid目前可以利用Jquery UI的皮肤：

    <link href="css/ui-lightness/jquery-ui-1.10.4.min.css" rel="stylesheet" type="text/css" />
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

2:Html签标（一个用于列表显示 一个用于分页的存放）：

<body>
    <form id="form1" runat="server">
    <table id="list">
    </table>
    <div id="pager3">
    </div>
    </form>
</body>

3:JS内容：

    <script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url: 'HandlerTest.ashx',
                datatype: "json",
                mtype: "GET",
                colNames: ['ID', 'UserName'],
                colModel: [
                            { name: 'ID', index: 'ID',  20 },
                            { name: 'UserName', index: 'UserName',  80 }

                ],
                rowNum: 10,
                loadonce: true,
                sortname: 'ID',
                viewrecords: true,
                sortorder: 'desc',
                caption: "客户列表",
                jsonReader: {
                    repeatitems: false,
                    root: function (obj) { return obj.rows; },
                    page: function (obj) { return obj.page; },
                    total: function (obj) { return obj.total; },
                    records: function (obj) { return obj.records; }
                }
            }).navGrid("#pager3", { edit: false, add: false, del: false });
        });
    </script>

上面的代码可以查看jqGrid相关属性说明，其中比较重要的jsonReader,刚开始没有编写这个导致数据一直显示不出来；JqGrid对数据的显示格式要求比较严格，

例如下面这个是一个比较准确的JSON格式显示；其属性分别代码分页的相关属性及数据的显示格式；

{
    "page": "1",
    "total": "10",
    "records": "10",
    "rows": [
        {
            "ID": 1,
            "UserName": "Wujy"
        },
        {
            "ID": 2,
            "UserName": "踏浪帅"
        }
    ]
}

4:后端代码HandlerTest.ashx：

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace WebApplication1
{
    /// <summary>
    /// HandlerTest 的摘要说明
    /// </summary>
    public class HandlerTest : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            List<ChinaUser> list = new List<ChinaUser>(){new ChinaUser() { ID=1,UserName="Wujy"},
                new ChinaUser() { ID=2,UserName="踏浪帅"}
            };

            GridData model = new GridData();
            model.page = "1";
            model.records = "10";
            model.total = "10";
            model.rows = list;

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string Resul = serializer.Serialize(model);
            context.Response.Write(Resul);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    public class ChinaUser
    {
        public int ID { set; get; }
        public string UserName { get; set; }
    }

    public class GridData
    {
        public string page { set; get; }

        public string total { get; set; }

        public string records { get; set; }

        public List<ChinaUser> rows { get; set; }
    }
}

二：（补充）接下来设置复杂表头及双击响应事件；

1：后台代码如下：

namespace WebApplication1
{
    /// <summary>
    /// HandlerTest 的摘要说明
    /// </summary>
    public class HandlerTest : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            List<ChinaUser> list = new List<ChinaUser>(){new ChinaUser() { ID=1,UserName="Wujy",PassWord="2111", Address="厦门", Sex="男"},
                new ChinaUser() { ID=2,UserName="踏浪帅3",PassWord="2222", Address="厦门3", Sex="男3"},
                new ChinaUser() { ID=2,UserName="踏浪帅4",PassWord="4444", Address="厦门4", Sex="男4"},
                new ChinaUser() { ID=2,UserName="踏浪帅5",PassWord="25555", Address="厦门5", Sex="男5"},
                new ChinaUser() { ID=2,UserName="踏浪帅6",PassWord="22226", Address="厦门6", Sex="男6"}
            };

            GridData model = new GridData();
            model.page = "1";
            model.records = "10";
            model.total = "10";
            model.rows = list;

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string Resul = serializer.Serialize(model);
            context.Response.Write(Resul);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    public class ChinaUser
    {
        public int ID { set; get; }
        public string UserName { get; set; }
        public string PassWord { get; set; }
        public string Sex { get; set; }
        public string Address { get; set; }
    }

    public class GridData
    {
        public string page { set; get; }

        public string total { get; set; }

        public string records { get; set; }

        public List<ChinaUser> rows { get; set; }
    }
}

2：前台代码如下：

<head runat="server">
    <title></title>
    <link href="css/ui-lightness/jquery-ui-1.10.4.min.css" rel="stylesheet" type="text/css" />
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url: 'HandlerTest.ashx',
                datatype: "json",
                mtype: "GET",
                colNames: ['ID', 'UserName', 'PassWord', 'Address', 'Sex'],
                colModel: [
                            { name: 'ID', index: 'ID',  20 },
                            { name: 'UserName', index: 'UserName',  80 },
                            { name: 'PassWord', index: 'PassWord',  80 },
                            { name: 'Address', index: 'Address',  80 },
                            { name: 'Sex', index: 'Sex',  80 }

                ],
                rowNum: 10,
                rowList: [10, 20, 50],
                loadonce: true,
                sortname: 'ID',
                viewrecords: true,
                sortorder: 'desc',
                pager: "#pager3",
                caption: "客户列表",
                jsonReader: {
                    repeatitems: false,
                    root: function (obj) { return obj.rows; },
                    page: function (obj) { return obj.page; },
                    total: function (obj) { return obj.total; },
                    records: function (obj) { return obj.records; }
                },
                ondblClickRow: function () { SelectShow(); }
            }).navGrid("#pager3", { edit: false, add: false, del: false });


            jQuery("#list").jqGrid('setGroupHeaders', {
                useColSpanStyle: true,
                groupHeaders: [
                    { startColumnName: 'PassWord', numberOfColumns: 2, titleText: '<em>Info</em>' }
              ]
            });

        });

        function SelectShow() {
            var ID = jQuery("#list").jqGrid('getGridParam', 'selrow');
            if (ID) {
                alert("您选中的列为:" + ID);
                $("#list").trigger("reloadGrid");
            }
            else {
                alert("请选择");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="list">
    </table>
    <div id="pager3">
    </div>
    </form>
</body>
</html>

其中下面的代码就是组成复杂表头（表示从哪一列开始，并有几列在其下面,显示的头部名称）：

            jQuery("#list").jqGrid('setGroupHeaders', {
                useColSpanStyle: true,
                groupHeaders: [
                    { startColumnName: 'PassWord', numberOfColumns: 2, titleText: '<em>Info</em>' }
              ]
            });

双击事件并刷新列表的代码如下ondblClickRow: function () { SelectShow(); }：

        function SelectShow() {
            var ID = jQuery("#list").jqGrid('getGridParam', 'selrow');
            if (ID) {
                alert("您选中的列为:" + ID);
                $("#list").trigger("reloadGrid");
            }
            else {
                alert("请选择");
            }
        }

通过上面几步就可以显示列表数据；

注意:

1:网上有很多的JSON在线验证是否正确，例如:http://jsonformatter.curiousconcept.com/ http://jsonlint.com/

2:在访问上面的页面时可以通过网络查看器发现其请求的URL为：

/HandlerTest.ashx?_search=false&nd=1397385085506&rows=10&page=1&sidx=ID&sord=desc 其中可以发现它自动带个几个参数，所以后台可以运用上面的参数进行分页显示；

3:JqGrid官网实例地址：www.trirand.com/blog/jqgrid/jqgrid.html

感谢您的阅读，坚持每天进步一点点，离成功就更近一步；希望文章对您有所帮助；

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wujy/p/3662575.html