利用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>

    <p id="pager3">

    </p>

    </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', width: 20 },

                            { name: 'UserName', index: 'UserName', width: 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; }

    }

}

發佈留言