.引用相关头文件

引入CSS：

<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />

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

引入JS：

<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>

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

<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>

<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

因为jqGrid3.6及以后的版本集成了jQuery UI，所以，此处需要导入UI相关js和css。另外grid.locale-en.js这个语言文件必须在jquery.jqGrid.min.js之前加载，否则会出问题。

2.将jqgrid加入页面中

根据jqGrid的文档，要想生成一个jqGrid，最直接的方法就是：

$("#list").jqGrid(options);

其中list是页面上的一个table：<table id="list"></table>

下面是一个简单的例子：

<script type="text/javascript">

$(document).ready(function () {

jQuery("#list").jqGrid({

url: 'Handler.ashx',

datatype: "json",

mtype: 'GET',

colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'],

colModel: [

{ name: 'SalesReasonID', index: 'SalesReasonID', width: 40, align: "left", editable: true },

{ name: 'Name', index: 'Name', width: 100, align: "center" },

{ name: 'ReasonType', index: 'ReasonType', width: 100, align: "center" },

{ name: 'ModifiedDate', index: 'ModifiedDate', width: 150, align: "center", search: false }

],

rowList: [10, 20, 30],

sortname: 'SalesReasonID',

viewrecords: true,

sortorder: "desc",

jsonReader: {

root: "griddata",

total: "totalpages",

page: "currpage",

records: "totalrecords",

repeatitems: false

},

pager: jQuery('#pager'),

rowNum: 5,

altclass: 'altRowsColour',

//width: 'auto',

width: '500',

height: 'auto',

caption: "DemoGrid"

}).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false }); ;

})

二、 jqgrid的重要选项

具体的options参考，可以访问jqGrid文档关于option的章节（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有几个是比较常用的，重点介绍一下：

• url ：jqGrid控件通过这个参数得到需要显示的数据，具体的返回值可以使XML也可以是Json。
• datatype ：这个参数用于设定将要得到的数据类型。类型包括：json 、xml、xmlstring、local、javascript、function。
• mtype : 定义使用哪种方法发起请求，GET或者POST。
• height ：Grid的高度，可以接受数字、%值、auto，默认值为150。
• width ：Grid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置。
• shrinkToFit ：此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。
• autowidth ：默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段；如果当父容器尺寸变化了，同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidth方法来完成。
• pager ：定义页码控制条Page Bar，在上面的例子中是用一个div(<div id=”pager”></div>)来放置的。
• sortname ：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到Server端。
• viewrecords ：设置是否在Pager Bar显示所有记录的总数。
• caption ：设置Grid表格的标题，如果未设置，则标题区域不显示。
• rowNum ：用于设置Grid中一次显示的行数，默认值为20。正是这个选项将参数rows（prmNames中设置的）通过url选项设置的链接传递到Server。注意如果Server返回的数据行数超过了rowNum的设定，则Grid也只显示rowNum设定的行数。
• rowList ：一个数组，用于设置Grid可以接受的rowNum值。例如[10,20,30]。
• colNames ：字符串数组，用于指定各列的题头文本，与列的顺序是对应的。
• colModel ：最重要的数组之一，用于设定各列的参数。（稍后详述）
• prmNames ：这是一个数组，用于设置jqGrid将要向Server传递的参数名称。（稍后详述）
• jsonReader ：这又是一个数组，用来设定如何解析从Server端发回来的json数据。（稍后详述）

2.1 prmNames选项

prmNames是jqGrid的一个重要选项，用于设置jqGrid将要向Server传递的参数名称。其默认值为：

prmNames : {

page:"page", // 表示请求页码的参数名称

rows:"rows", // 表示请求行数的参数名称

sort: "sidx", // 表示用于排序的列名的参数名称

order: "sord", // 表示采用的排序方式的参数名称

search:"_search", // 表示是否是搜索请求的参数名称

nd:"nd", // 表示已经发送请求的次数的参数名称

id:"id", // 表示当在编辑数据模块中发送数据时，使用的id的名称

oper:"oper", // operation参数名称

editoper:"edit", // 当在edit模式中提交数据时，操作的名称

addoper:"add", // 当在add模式中提交数据时，操作的名称

deloper:"del", // 当在delete模式中提交数据时，操作的名称

subgridid:"id", // 当点击以载入数据到子表时，传递的数据名称

npage: null,

totalrows:"totalrows" // 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal

}

2.2 jsonReader选项

jsonReader是jqGrid的一个重要选项，用于设置如何解析从Server端发回来的json数据，如果Server返回的是xml数据，则对应的使用xmlReader来解析。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",

subgrid: {

root:"rows",

repeatitems: true,

cell:"cell"

}

}

假如有下面一个json字符串：

{"totalpages":"3","currpage":"1","totalrecords":"11","griddata":[{"SalesReasonID":"1","Name":"Price","ReasonType":"Other","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998年6月1日"}]}

其对应的jsonReader为：jsonReader: {

root: "griddata",

total: "totalpages",

page: "currpage",

records: "totalrecords",

repeatitems: false

}

注：cell、id在repeatitems为true时可以用到，即每一个记录是由一对id和cell组合而成，即可以适用另一种json结构。援引文档中的例子：

repeatitems为true时：

jQuery("#gridid").jqGrid({

...

jsonReader : {

root:"invdata",

page: "currpage",

total: "totalpages",

records: "totalrecords"

},

...

});

json结构为：

{

"totalpages": "xxx",

"currpage": "yyy",

"totalrecords": "zzz",

"invdata" : [

{"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, // cell中不需要各列的name，只要值就OK了，但是需要保持对应

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

...

]

}

repeatitems为false时：

jQuery("#gridid").jqGrid({

...

jsonReader : {

root:"invdata",

page: "currpage",

total: "totalpages",

records: "totalrecords",

repeatitems: false,

id: "0"

},

...

});

json结构为：

{

"totalpages" : "xxx",

"currpage" : "yyy",

"totalrecords" : "zzz",

"invdata" : [

{"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"},

...

]

}

2.3 colModel的重要选项

colModel也有许多非常重要的选项，在使用搜索、排序等方面都会用到。这里先只说说最基本的。

• name ：为Grid中的每个列设置唯一的名称，这是一个必需选项，其中保留字包括subgrid、cb、rn。
• index ：设置排序时所使用的索引名称，这个index名称会作为sidx参数（prmNames中设置的）传递到Server。
• label ：当jqGrid的colNames选项数组为空时，为各列指定题头。如果colNames和此项都为空时，则name选项值会成为题头。
• width ：设置列的宽度，目前只能接受以px为单位的数值，默认为150。
• sortable ：设置该列是否可以排序，默认为true。
• search ：设置该列是否可以被列为搜索条件，默认为true。
• resizable ：设置列是否可以变更尺寸，默认为true。
• hidden ：设置此列初始化时是否为隐藏状态，默认为false。
• formatter ：预设类型或用来格式化该列的自定义函数名。常用预设格式有：integer、date、currency、number等（具体参见文档 ）。

三、 注意事项

1. 动态改变Add Form或者Edit Form中的select的内容，如：改变下图中的Comparator下拉中的内容。

$("#list_d").navGrid('#pager_d',{add:true,edit:true,del:true,search:false,refresh:false},

{

checkOnSubmit:false, closeAfterEdit: true,recreateForm:true,

beforeInitData:function(formid){

initComparator();

},

beforeShowForm: function(formid){

$("#list_d").jqGrid('setColProp', 'Name', { editrules:{required:false},});

$('#tr_Name', formid).hide();

}

}，//edit

{},//add

{}//del

）

beforeInitData, beforeShowForm在每次点击编辑的时候都会执行。initComparator的作用是通过ajax获取数据，然后利用$("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });来设置Comparator下拉中的内容。其中valueString的格式如下’ equal to: equal to; not equal to: not equal to’。键值之间用冒号隔开，2项之间用分号隔开。注意：把recreateForm设为true，否则'setColProp'只在第一次调用时有效。

2. var rowNum = parseInt($(this).getGridParam("records"), 10); 得到数据条数。

3. jQuery("#list_d").clearGridData();清空数据。

4. jQuery("#list").getCell(ids,"Key");获取第ids行的key列。

5. $("#list").jqGrid('setSelection', "1");选中第一行。放在loadComplete：中在gird加载完成的时候自动选中第一行。loadComplete:function(data){$("#list").jqGrid('setSelection', "1");

}

6. 对于像1中的可编辑的字段，可以设定rule，参见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules

7. 修改Option，以URL为例

jQuery("#list_d").jqGrid('setGridParam',{url:"xxx.aspx",page:1}).trigger('reloadGrid');

享一款jQuery表格插件，今天我要介绍的不是DataTables，而是相对没有那么出名的jqGrid，它基于jquery UI主题，同时也支持Bootstrap，能够根据需求使用不同主题。兼容目前主流浏览器，有丰富的配置项和方法事件接口，能够轻松应对一般的表格需求，功能强大，扩展方便，支持多语言。

• 1、下载及引入jqGrid

  https://github.com/tonytomov/jqGrid

下载jqGrid后，把文件存放到你项目的任意目录中，使用时引入js、css即可，下面以引入Bootstrap样式为例，i18n下的js为语言包，需要注意的是请务必把语言包放在jqGrid的js之前引入，以免后续出现问题。

• 2、初始化表格

页面中输入<table id="grid-table"></table><div id="grid-pager"></div>，页面基本就这样，然后在js中配置相关信息初始化表格。

下图opt的基本参数，请到api文档查看更多配置属性

在opt中还有一个表格配置属性colModel，该属性就是我们要展示的表头，数据等信息的配置，下图是一个简单的例子。

后台需要返回如下格式的json数据，page为当前页数，records为总共有多少条数据，rows为数据，total为总共页数

最后我们配置完成后是这样的。

刷新页面后大概就是下面的样子，没有真实姓名之后的列和导航栏中的工具按钮。

想要配置工具按钮也很简单，配置以下信息即可，内置按钮有新增、编辑、删除、搜索、刷新、查看按钮，可以添加自定义按钮，内置按钮也可以重写其方法，能够方便的实现我们想要的功能。

• 3、新增、编辑、删除功能

大致可以分为弹窗和内联两种操作，可以自己进行自定义，也可以跳转页面进行新增、编辑

弹窗

内联

• 4、页脚汇总和分组

• 5、分页

分页方式有两种，导航分页和无限滚动分页

导航分页

无限滚动分页

• 6、其他

还有很多其他的功能如多选、单选、多层次结构展示、排序、搜索过滤等。唯一的缺陷是树形表格，目前它的树形表格配置繁琐，也存在比较的的问题，但也还勉强能接受，希望树形表格在以后能够有所改善。

API文档：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

在线演示：http://www.guriddo.net/demo/bootstrap/

、表格树控件 jqGrid

jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面。

它的主要特点包括：

• 基于jquery UI主题，开发者可以根据客户要求更换不同的主题

• 兼容目前所有流行的web浏览器

• Ajax分页，可以控制每页显示的记录数

• 支持XML，JSON，数组形式的数据源

• 提供丰富的选项配置及方法事件接口

• 支持表格排序，支持拖动列、隐藏列

• 支持滚动加载数据

• 支持实时编辑保存数据内容

• 支持子表格及树形表格

主页：http://www.trirand.com/blog/

2、搜索补全 Bootstrap Search Suggest

这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件，必须使用于按钮式下拉菜单组件上。

它的主要功能包括：

• 搜索方式：从 data.value 的有效字段数据中查询 keyword 的出现，或字段数据包含于 keyword 中

• 支持单关键字、多关键字的输入搜索建议，多关键字可自定义分隔符

• 支持按 data 数组数据搜索、按 URL 请求搜索和按首次请求URL数据并缓存搜索三种方式

• 单关键字会设置 data-id 和输入框内容两个值，以 indexId/idField 和 indexKey/idFiled 取值 data 的数据为准；多关键字只设置输入框值

主页：https://github.com/lzwme/bootstrap-suggest-plugin

3、代码编辑器 CodeMirror

CodeMirror 是一个灵活的文本代码编辑器。它是专门用于编辑代码，并附带一些语言模块和插件，实现更先进的编辑功能。提供丰富的API接口和CSS主题

它有如下特点：

• 支持超过100种语言

• 一个强大的，可组合的语言模式系统

• 自动完成（XML）

• 代码折叠

• 搜索和替换接口

• 混合字体大小和样式

• 各种主题

• 可以调整大小以适应内容

• 内联和块部件

• 许多扩展的方法和插件 ...

主页：http://codemirror.net/

4、富文本编辑器 Simditor

Simditor是Tower开源的所见即所得的在线富文本编辑器。它是一款十分优秀的国产富文本编辑器。Simditor的理念是保持简单，避免过度的功能，每一个特性都追求极致的用户体验。同时，Simditor也很容易扩展。

主页：https://github.com/mycolorway/simditor

5、旁注插件 Marginotes

Marginotes，使用jQuery实现的添加旁注插件，快速，炫酷。

主页：https://github.com/fdansv/marginotes

6、侧边栏 Slidebars

Slidebars是一个jQuery框架，用于为你的网页或web应用添加off-canvas菜单和侧边栏

主页：https://github.com/adchsm/Slidebars

7、动画 anime.js

anime.js是一个灵活轻便的JavaScript动画库。它通过CSS，独立变换，SVG，DOM属性和JS对象实现。

主页：https://github.com/juliangarnier/anime

8、图像灯箱插件 Lightgallery.js

Lightgallery.js是一个功能齐全的JavaScript图像灯箱插件。

他的主要特点：

• 它使用CSS，使用唯一的方法调整大小的图像和视频。因此，它非常灵活的，并且比使用JavaScript方法快。

• 它带有内置模块，如缩略图，全屏，变焦等几个很容易创建使用的模块，还可以分离你不希望使用的模块。

• 它配备了众多的选项，让你很轻松的自定义插件。

• 它使用硬件加速 CSS3过渡的动画性能。

主页：https://github.com/sachinchoolur/lightgallery.js

9、创建工具提示样式的工具栏 Toolbar.Js

Toolbar.Js可以让你在Web应用程序和网站，快速创建工具提示风格的工具栏。

它有如下特点：

• 简单的实现，简单的选项。

• 包括与工具栏使用一组CSS按钮。

• 您可以根据需要运行尽可能多的工具栏。

• 工具栏可以连接到所需的任何元素。

• 工具栏中的图标很容易通过图标库定制。

• 丰富的选项，让你可以完整控制包括位置，动画和事件等。

主页：http://paulkinzett.github.io/toolbar/

10、树插件 zTree

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

• 将核心代码按照功能进行了分割，不需要的代码可以不用加载

• 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀

• 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

• 支持 JSON 数据

• 支持静态 和 Ajax 异步加载节点数据

• 支持任意更换皮肤 / 自定义图标（依靠css）

• 支持极其灵活的 checkbox 或 radio 选择功能

• 提供多种事件响应回调

• 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟

• 在一个页面内可同时生成多个 Tree 实例

• 简单的参数配置实现 灵活多变的功能

主页：http://www.treejs.cn/

这次就到这里，下次继续，请多多关注，谢谢。