JQGrid 学习1

这几天一直在学习基于MVC的JQGrid. 记得刚毕业时候做web最头疼的就是GridView，各种分页查询删除，后来学习了Ajax,使用的jqury UI框架ligerui给公司做ERP系统，再后来看到前辈用的JQgrid，决定拿来学习下，并且想跟以前用过的技术做一个对比。

JQGrid很好上手，但是里面有很多规则记起来比较头疼。

1.下载文件

下载jqGrid的软件包，目前最新版本为4.4.1 下载地址为：http://www.trirand.com/blog/?page_id=6
下载jQuery文件，目前最新版本为1.8.2 下载地址为：http://code.jquery.com/jquery-1.8.2.min.js
下载jqGrid皮肤，下载地址为：http://jqueryui.com/themeroller/ 我使用的是：ThemeRoller->gallery->cupertino样式

2.referance

和其他的jquery框架一样，首先需要引用jquery类库，jquery.jqgrid类库即可。

<scriptsrc="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"></script>

<scriptsrc="~/Scripts/jquery-ui-1.8.20.min.js"type="text/javascript"></script>

<scriptsrc="~/jqGrid/js/jquery.jqGrid.min.js"type="text/javascript"></script>

基本上到这里我们就可以简单做一个jqgrid，我模仿着demos做了一个。http://www.trirand.com/blog/jqgrid/jqgrid.html

$(this).ready(function () {

    jQuery("#list1").jqGrid({

        url: "/Home/SearchResult",

        datatype: "json",

        colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],

        colModel: [

                 { name: 'InvNo', index: 'InvNo', width: 55 },

                 { name: 'InvDate', index: 'InvDate', width: 90 },

                 { name: 'Client', index: 'Client', width: 100 },

                 { name: 'Amount', index: 'Amount', width: 80, align: "right" },

                 { name: 'Tax', index: 'Tax', formatter: 'currency', width: 80, align: "right" },

                 { name: 'Total', index: 'Total', width: 80, align: "right" },

                 { name: 'Note', index: 'Note', width: 150, sortable: false }

        ],

        rowNum: 10,

        rowList: [10, 20, 30],

        pager: '#pager1',

        pgbuttons:true,

        sortname: 'id',

        mtype: "post",

        viewrecords: true,

        sortorder: 'desc',

        emptyrecords: "NO records",

        multiselect: true,

        rownumbers: true,

        caption: "JSON 实例"

    });

    jQuery("#list1").jqGrid('navGrid', '#pager1', { edit: true, add: true, del: true });

URL:获取数据的地址

datatype：从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside

colNames：列显示名字，数组

colModel：常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序

rowNum：默认每页显示的条数

rowList：下拉列表，可以改变每页显示的条数

pager：html元素，分页栏放置的位置。（如div的id）

sortname：默认排序的列

mtype：ajax提交方式。POST或者GET，默认GET

viewrecords：显示总的记录数（bool）

sortorder：排序方式

emptyrecords：没有记录时候显示的文字

multiselect：是否可以多选

rownumbers：如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为'rn'.

caption：表格的标题

更多属性参考：http://blog.mn886.net/jqGrid/

Json格式的呈现：

刚开始有点想不通jqGrid到底接受什么样格式的Json呢。

后来查到有一个重要的选项jsonReader

jsonReader：默认的jsonReader设置：

jsonReader : {

 root: "rows",    // json中代表实际模型数据的入口

 page: "page",    // json中代表当前页码的数据

 total: "total",    // json中代表页码总数的数据

 records: "records", // json中代表数据行总数的数据

 repeatitems: true, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。

 cell: "cell",

 id: "id",

 userdata: "userdata"}

通常jsonReader和repeatitems是配合使用的，如果repeatitems为false，json中数据可以乱序，jqGrid会根据colModel中name属性和json数据对应，根据属性名解析。

repeatitems为true，json格式

{

 "page": "xxx",

 "total": "yyy",

 "records": "zzz",

 "rows" : [

{ "cell" :["cell11", "cell12", "cell13"]},    // cell中不需要各列的name，但是需要与colModel一一对应

 {"cell" :["cell21", "cell22", "cell23"]},

               ... ]

}

注意大小写，期间把cell写成Cell一直没有出来数据

repeatitems为false，json格式

{

  "page" : "xxx",

  "total" : "yyy",

  "records" : "zzz",

  "rows" : [  {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 数据中需要各列的name，但是可以不按列的顺序     {"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"}, ...   ]

}

这里有一个自动生成json格式的泛型类：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace MVC4.BusinessLogic

{

    public class JQGrid

    {

        private class JsonRow

        {

            public object[] cell { get; set; }

            public JsonRow(int Columns)

            {

                cell = new object[Columns];

            }

            public void SetJsonCol(object data, int colnum)

            {

                cell[colnum] = data;

            }

        }

        public object JsonRowModel { get; set; }

        public JQGrid(IEnumerable<object> gridData, int columnTotal, int currentPage, int totalRecords, int totalPages)

        {

            List<JsonRow> jsonRowData = new List<JsonRow>();

            for (var d = 0; d < totalRecords; d++)

            {

                var data = gridData.ToList()[d];

                Type t = data.GetType();

                var pops = t.GetProperties();

                var row = pops.Select(p => p.GetValue(data, null)).ToArray();

                JsonRow jsonRow = new JsonRow(columnTotal);

                for (int c = 0; c < columnTotal; c++)

                {

                    jsonRow.SetJsonCol(row[c], c);

                }

                jsonRowData.Add(jsonRow);

            }

            JsonRowModel = new { page = currentPage,total = totalPages, records = totalRecords, rows = jsonRowData.ToArray() };

        }

    }

}

1.下载文件

相关文章