jqGrid用法汇总(全经典)

支持多种类型的数据集合作为数据源

　　jqGrid可以绑定三种类型的数据:XML,JSON和数组。使用不同的数据类型主要是设置datatype属性,它的值分别为'xml','json','local'(数组)

　　下面则列举各种数据类型的格式

XML格式：

@H_502_15@ value1 ......... valueN

　json格式

{"page":"页号","rows":[{name1:'value1',name2:'value2',.....nameN:'valueN'},.... {....} ],"total":记录数,"records":总记录数}

　　数组格式

添加到jqgrid里 for (var i = 0; i <= mydata.length; i++) { jQuery("#grid1").jqGrid('addRowData',i + 1,mydata[i]); }

或者设置data属性

统计运算的功能

　　将footerrow设为true,绑定gridComplete事件。

　　统计时利用getCol方法，第一个参数为colMode的name值，第二个设为false，否则会返回一个数组而不是但一个数据，第三个是设置统计方式，有'sum','avg'和'count'。

排序

　　只要单击列的标题，就可以对该列进行升序或降序的排序。设置该列是否允许排序，在列的属性里设置sortable，同时对于不同的数据类型，也需要设置其相应的排序类型sorttype，类型有int/integer 整型,float/number/currency 浮点型，date 日期，text 文本，function 定义函数来实现自定的排序规则。

分组

还有复杂一点的排序，那还是上jqGrid Demos看看吧！

筛选

　　jqGrid的筛选并不是在grid里面的内容进行筛选，其实是对数据库里的数据筛选查询。

　　html:

　　javascript:

增删改查工具栏及分页栏

　　jqGrid附带了分页栏，在分页栏上可以添加增加，修改，删除以及查询按钮。

　　在html多添加一个层，这个层就存放分页栏：

记得要在colModel里给可供编辑的列的editable赋值为true，才可以编辑。

分页读取数据

　　既然上面已提及到分页，下面则介绍另一种分页方式，通过滚动条进行翻页。在这种分页方式中，数据库的所有数据并非一下子读取出来填充到grid中，而是通过滚动条的位置得出当前浏览到的哪一页数据，才从数据库读取那部分的数据。

分页读取数据 scroll: 1,　　 //设置页面的大小　　 rowNum: 10,....... );

下面的例子只是用到本地的数据，同样也是实现了滚动翻页的效果

父子表

　　通过以下设置可使用子表

属性 subGridModel: [{ name : ['name1','name2',......,'nameN'],width : [width1,width2,.....,widthN] } ],....... );

这里子表的设置只是最基本的，更多属性的资料可参阅

Get/Set 单元格的值

　　获取某个单元格的值就调用getCell(rowid,iCol) 。iCol既可以是当前列在colModel中的位置索引也可以是name值。注意：在编辑行或者单元格时不能使用此方法，此时返回的并不是改变的值，而是原始值。

　　设置某个单元格的值就调用setCell(rowid,colname,data,class,properties)。rowid：当前行id；colname：列名称，也可以是列的位置索引，从0开始；data：改变单元格的内容，如果为空则不更新；class：如果是string则会使用addClass方法将其加入到单元格的css中，如果是array则会直接加到style属性中；properties：设置单元格属性colModel。

　　当然也可以Get/Set 行或者列，在这里可查阅更多get/set/add的方法

其中editoption是对编辑器的一些设置，文本框就可以设置size,maxlength等；复选框可设置value ；

ditoptions: { value:"Yes:No" }

下拉框以这种形式

editoptions: { value: “val1:text1; val2:text2; val3:text3” }

更多资料参阅

模板列 调用其他编辑器

上面介绍的编辑器只是使用了html的表单元素而已，下面介绍的是调用插件。