jqGride 插件使用简介

刚刚自己做了一个jqGride 实例。 这个js插件很好用，也很实用。下面简单介绍下使用心得并在文章最后附上源代码。

一. 环境配置：

  需要引用的文件：

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.11.0.min.js" type="text/ｊａｖａｓｃｒｉｐｔ"></script>

<script src="js/i18n/grid.locale-cn.js" type="text/ｊａｖａｓｃｒｉｐｔ"></script>

<script src="js/jquery.jqGrid.min.js" type="text/ｊａｖａｓｃｒｉｐｔ"></script>

注： 这里用到了jquery-ui.css  改样式可以根据需要到jquery-ui官网生成需要的风格。

   生成地址：http://jqueryui.com/  -》 themes -> 选择“gallery”选项 （点击缩微图下方"download"）.

   <默认生成下载的 jquery-ui文件的 css，js，html 是在同一个目录下，在自己项目中使用是可以根据需要修改jquery-      ui.css 文件中图片，图标指向的 路径。>   

二. 编写html 

  

   HTML很简单：

  

  <table id="list2" class="ui-jqgrid-htable"></table> -》 数据表格

   <div id="pager2" class="ui-pager-control"></div>  -》 底部分页

三. 使用jqGrid插件方法进行数据展示

<script type="text/ｊａｖａｓｃｒｉｐｔ">

    $（function （） {

        var lastSel;

        jQuery（"#list2"）.jqGrid（{

            url: "ashx/JsonData.ashx"， //#后端的数据交互程序，改为你的

            editurl: "ashx/JsonData.ashx"，

            datatype: "json"， //前后交互的格式是json数据

            //mtype: 'GET'，//交互的方式是发送httpget请求

            colNames: ['序号'， '姓名'， '性别'， '邮箱']， //表格的列名

            colModel: [

{ name: 'id'， index: 'id'， width: 130 }， //每一列的具体信息，index是索引名，当需要排序时，会传这个参数给后端

{name: 'name'， index: 'name'， width: 165， align: "right"， editable: true }， /*运行编辑项，需设置editable属性*/

{name: 'sex'， index: 'sex'， width: 165， align: "right"， editable: true， edittype: "select"， editoptions: { value: "1:男;2:女"} }，

{ name: 'email'， index: 'email'， width: 165， align: "right"， editable: true }

]，

            rowNum: 6， //每一页的行数

            height: 'auto'，

            rowList: [6， 10， 16]，

            pager: '#pager2'，

            sortname: 'id'，

            viewrecords: true，

            sortorder: "desc"，

            jsonReader: {//读取后端json数据的格式

                root: "rows"， //保存详细记录的名称

                total: "total"， //总共有页

                page: "page"， //当前是哪一页

                records: "records"， //总共记录数

                repeatitems: false

            }，

        /*    onSelectRow: function （id） { //添加该事件 表格点击单元格时，将进入表格行编辑模式

                if （id && id != lastSel） {

                    jQuery（'#list2'）.restoreRow（lastSel）;

                    jQuery（'#list2'）.editRow（id，

                       { 

                        "keys": true，

                        "oneditfunc": null，

                        "successfunc": null，

                        "url": "ashx/JsonData.ashx"，

                        "extraparam": {}，

                        "aftersavefunc": null，

                        "errorfunc": null，

                        "afterrestorefunc": null，

                        "restoreAfterError": true，

                        "mtype": "POST"

                    }）;

                    lastSel = id;

                }

            }，*/

            caption: "jqGrid Demo"//表格名称

        }）;

        jQuery（"#list2"）.jqGrid（'navGrid'， '#pager2'， { edit: true， add: true， del: true }）;

    }）

</script>

四. 服务器端代码 

  ashx 文件代码：

 using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Script.Serialization;

namespace jqGridDemo.ashx

{

    /// <summary>

    /// JsonData 的摘要说明

    /// </summary>

    public class JsonData : IHttpHandler， System.Web.SessionState.IRequiresSessionState

    {

        public void ProcessRequest（HttpContext context）

        {

            HttpRequest request = context.Request;

            HttpResponse response = context.Response;

            if （request["id"] != null）//数据模拟

            {

                context.Session["name"] = request["name"];

                context.Session["id"] = request["id"];

            }

            int _rows = request["rows"]!=null ? int.Parse（request["rows"]） : 0; ;

            int _padgIndex = request["page"] != null ? int.Parse（request["page"]） : 0;

            string sortNmae = request["sortname"];

            string sortType = request["sortorder"];

            string id = request["id"];

            string name = request["name"];

            string sex = request["sex"];

            string email = request["email"];

            response.Write（Build_jqGrid_Data（getSource（context.Session["id"] == null ? "" : context.Session["id"].ToString（），context.Session["name"] ==null?"":context.Session["name"].ToString（）， sex， email）， _rows， _padgIndex））;

        }

        private List<entity> getSource（string id，string name， string sex，string email）

        {

            List<entity> lisEnt = new List<entity>（）;

            for （var i = 0; i < 100; i++） {

                entity ent = new entity（）;

                if （id != "" && i == int.Parse（id））//更新操作模拟

                {

                    ent.id = i.ToString（）;

                    ent.name = name;

                    ent.sex = sex;

                    ent.email = email;

                }

                else

                {

                    ent.id = i.ToString（）;

                    ent.name = "姓名" + i;

                    ent.sex = "男" + i;

                    ent.email = i + "aaaaaaaaa@162.com";

                }

                lisEnt.Add（ent）;

            }

            return lisEnt;

        }

        private string Build_jqGrid_Data（List<entity> list， int rows， int pageIndex） {

            try

            {

                jqGrid_entity jqe = new jqGrid_entity（）;

                jqe.rows = new entity[rows];

                if （rows * （pageIndex） > list.Count）

                {

                    //不允许返回null  行数据，否则jqGrid插件无法正常显示数据

                    jqe.rows = new entity[list.Count-（rows * （pageIndex - 1））];

                    for （int i = rows * （pageIndex - 1），j = 0; i < list.Count; i++）

                    {

                        jqe.rows[j] = list[i];

                        j++;

                    }

                }

                else

                {

                    for （int i = rows * （pageIndex - 1），j=0; i < rows * （pageIndex）; i++）

                    {

                        jqe.rows[j] = list[i];

                        j++;

                    }

                }

                jqe.page = pageIndex;

                jqe.total = （list.Count / rows）+1;

                jqe.records = list.Count;

                return new ｊａｖａｓｃｒｉｐｔSerializer（）.Serialize（jqe）;

            }

            catch （Exception ex） {

                return ex.Message;

           }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

  jqGrid_entity.cs

 public class jqGrid_entity

    {

        public int page;

        public int total;

        public int records;

        public entity[] rows;

    }

entity.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace jqGridDemo

{

    [Serializable]

    public class entity

    {

        public string ID { get; set; }

        public string name { get; set; }

        public string sex { get; set; }

        public string email { get; set; }

    }

}

运行页面看到如下效果：

注： jqGrid 请求的数据不能存在null 行，否则会影响jqGrid正常展示。

四. jqGrid 插件跟能非常丰富。

  可以参考：http://blog.mn886.net/jqGrid/。 API及实例

 关于jqGird 表格增删改，可查考博客：http://wstcwlr.iteye.com/blog/1654869 讲得很详细