jqGrid可以绑定XML，JSON和数组三种类型的数据。接下来通过本文给大家介绍jqGrid用法的相关知识，感兴趣的朋友一起学习吧
支持多种类型的数据集合作为数据源
jqGrid可以绑定三种类型的数据：XML，JSON和数组。使用不同的数据类型主要是设置数据类型属性，它的值分别为xml '，' json '，' local '(数组)
$('#grid1 ').jqgrid(
.
数据类型：“xml”，
.
);
下面则列举各种数据类型的格式
XML格式：
行
第/页
总计/总计
记录/记录
行id='rowid '
单元格值1/单元格
..
单元格值n/单元格
/行
/行
json格式
{'page ':'页号，' rows':[{name1:'值1 '，名称2:'值2 ',nameN:'valueN'}，{.} ],'总计：记录数，'记录：总记录数}
数组格式
定义变量数据=[
{名称1:'值1 ',名称2:'值2 ',nameN:'valueN'}，
.
{.}
];
//把数据添加到jqgrid里
for(var I=0；i=mydata.lengthi ) {
jQuery(“# grid 1”).jqGrid('addRowData '，i 1，my data[I])；
}
或者设置data属性
$('#grid1 ').jqgrid(
.
数据：mydata，数据类型："本地",
.
);
统计运算的功能
将足球设为没错，绑定网格完成事件。
$('#grid1 ').jqgrid(.
没错，
网格完成：完成方法，
.);
函数完整方法()
{
var sum_amount=$('#grid1 ').getCol('amount '，false，' sum ')；
var sum_tax=$('#grid1 ').getCol('tax '，false，' sum ')；
var sum_total=$('#grid1 ').getCol('total '，false，' sum ')；
$('#grid1 ').footerData('set '，{ name:'合计：',金额：sum_amount税金：sum_tax，合计：sum _ total })；
}
统计时利用getCol方法，第一个参数为colMode的名字值，第二个设为假的，否则会返回一个数组而不是但一个数据，第三个是设置统计方式，有总和','平均值'和数数。
排序
只要单击列的标题，就可以对该列进行升序或降序的排序。设置该列是否允许排序，在列的属性里设置可分类的，同时对于不同的数据类型，也需要设置其相应的排序类型排序类型，类型有整数/整数整型，浮动/数字/货币浮点型，日期日期，文本文本，功能定义函数来实现自定的排序规则。
$('#grid1 ').jqgrid(.
列模型：[
..
{名称：' id '，索引：' id '，宽度：60，myexport: true，editable: true，sorttype: 'int '，sortable: true}，
..
],
.);
分组
var mydata=[
{id:'1 '，invdate:'2010-05-24 '，name:'test '，note:'note '，tax:'10.00 '，total:'2111.00'}，
{id:'2 '，invdate:'2010-05-25 '，name:'test2 '，note:'note2 '，tax:'20.00 '，total:'320.00'}，
{id:'3 '，invdate:'2007-09-01 '，name:'test3 '，note:'note3 '，tax:'30.00 '，total:'430.00'}，
{id:'4 '，invdate:'2007-10-04 '，name:'test '，note:'note '，tax:'10.00 '，total:'210.00'}，
{id:'5 '，invdate:'2007-10-05 '，name:'test2 '，note:'note2 '，tax:'20.00 '，total:'320.00'}，
{id:'6 '，invdate:'2007-09-06 '，name:'test3 '，note:'note3 '，tax:'30.00 '，total:'430.00'}，
{id:'7 '，invdate:'2007-10-04 '，name:'test '，note:'note '，tax:'10.00 '，total:'210.00'}，
{id:'8 '，invdate:'2007-10-03 '，name:'test2 '，note:'note2 '，amount:'300.00 '，tax:'21.00 '，total:'320.00'}，
{id:'9 '，invdate:'2007-09-01 '，name:'test3 '，note:'note3 '，amount:'400.00 '，tax:'30.00 '，total:'430.00'}，
{id:'11 '，invdate:'2007-10-01 '，name:'test '，note:'note '，amount:'200.00 '，tax:'10.00 '，total:'210.00'}，
{id:'12 '，invdate:'2007-10-02 '，name:'test2 '，note:'note2 '，amount:'300.00 '，tax:'20.00 '，total:'320.00'}，
{id:'13 '，invdate:'2007-09-01 '，name:'test3 '，note:'note3 '，amount:'400.00 '，tax:'30.00 '，total:'430.00'}，
{id:'14 '，invdate:'2007-10-04 '，name:'test '，note:'note '，amount:'200.00 '，tax:'10.00 '，total:'210.00'}，
{id:'15 '，invdate:'2007-10-05 '，name:'test2 '，note:'note2 '，amount:'300.00 '，tax:'20.00 '，total:'320.00'}，
{id:'16 '，invdate:'2007-09-06 '，name:'test3 '，note:'note3 '，amount:'400.00 '，tax:'30.00 '，total:'430.00'}，
{id:'17 '，invdate:'2007-10-04 '，name:'test '，note:'note '，amount:'200.00 '，tax:'10.00 '，total:'210.00'}，
{id:'18 '，invdate:'2007-10-03 '，name:'test2 '，note:'note2 '，amount:'300.00 '，tax:'20.00 '，total:'320.00'}，
下面的例子只用到了本地数据，也达到了滚动页面的效果。
jQuery(“# scrolling”)。jqGrid({
卷轴：1，
数据类型：“本地”，
数据：mydata，
身高：100，
宽度：600，
colNames: ['Index '，' Name '，' Code']，
列模型：[
{名称：' id '，索引：' id '，宽度：65 }，
{名称：'名称'，索引：'名称'，宽度：150 }，
{名称：'注释'，索引：'注释'，宽度：100 }
],
rowNum: 5，
没错，
传呼机：“#滚动”，
排序名称：' item_id '，
viewrecords: true，
排序顺序：“asc”，
标题：“滚动时加载数据”
});
增删改查工具栏及分页栏
可以通过以下设置使用子表。
$('#grid1 ')。jqgrid(
.
//启用子表
子网格：真，
subGridUrl:“..”,
//设置子表的属性
子网格模型：[{
名称：['名称1 '，'名称2 '，' nameN']，
宽度：[宽度1，宽度2，widthN] } ]，
.
);
这里的子表设置只是最基本的。更多关于属性的信息，请参考http://www.trirand.com/jqgridwiki/doku.php? id=wiki:sub grid
分页读取数据
获取单元格的值并调用getCell(rowid，iCol)。ICol可以是colModel中当前列的位置索引，也可以是名称值。注意：在编辑行或单元格时，不能使用此方法。此时，您将返回原始值，而不是更改后的值。
设置单元格的值时，将调用Setcell (rowid，colname，data，class，properties)。Rowid:当前行id；Colname:列的名称，或列的位置索引，从0开始。数据：改变单元格的内容，如果是空的，就不更新；Class:如果是字符串，会用addClass方法添加到单元格的css中；如果是数组，会直接添加到style属性中；属性：设置单元格属性colModel。
当然，也可以获取/设置行或列。在这里，您可以参考更多的获取/设置/添加http://www.trirand.com/jqgridwiki/doku.php?的方法。
id=wiki:方法
数据验证
您可以通过设置colModel的editrules属性来验证输入数据。
jQuery('#grid_id ')。jqGrid({
.
列模型：[
.
{名称：'价格'，editrules:{edithidden:true，必需：true.}，可编辑：true }，
.
]
.
});
以下身份验证选项可用。
父子表
JQuery(“# GHCS”)。jQGrid ('setGroupHeaders '，{//设置是否为列标题启用colSpan效果。
useColSpanStyle: false，
组头：[
{startColumnName: 'colName '，//合并列组numberOfColumns的第一列名：number，//合并列的数目titleText: 'title' //合并列的标题}，.
]
}
Get/Set 单元格的值
jqGrid的模板栏自带了一些基本的编辑器，包括：' text '单行文本框，' textarea '多行文本框，' select '下拉框，' checkbox '，' password '按钮，' image '图片按钮，' file '上传框和' custom '自定义编辑器。
在colModel中设置edittype。
jQuery('#grid_id ')。jqGrid({
.
列模型：[
.
{名称：'价格'，editable:true，edittype:'text '，editoptions: {size:10，maxlength: 15}.},].});
editoption是编辑器的一些设置，文本框可以设置大小，maxlength等。复选框可以设置值；
ditoptions: { value:'是：否' }
此表单中的下拉框
edit options:{ value:" val 1:text 1；val 2:text 2；val3:text3" }
更多信息见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype
设置条带状的列
上面描述的编辑器只使用html表单元素，下面是调用插件。
script src=' js/my97 date picker/wdatepicker . js ' type=' text/JavaScript '/script
脚本类型='文本/javascript '
函数InitDatePicker(cl) {
$(cl)。单击(函数(){
WdatePicker()；
});
}
.
jQuery('#grid_id ')。jqGrid({
.
列模型：[
.
{姓名：'日期'，editable:true，edittype:'text '，edit options:{ data init:initdate picker }.},
.
] ,
.
});
.
/脚本
My97DatePicker插件在这里被称为日历编辑器。
如果要在模板列中放置多个控件，可以使用下面的方法。
jQuery('#grid_id ')。jqGrid({
.
afterInsertRow: function (rowid，aData) {
var控件=“”；//放置在模板中的控件
.
$('#grid_id ')。jqGrid('setCell '，rowid，' tag '，controls)；
}
.
});
事实上，这是通过编辑网格单元格中的html来实现的。
编辑器
设置好单元格编辑模式后，可以通过上下左右导航键跳转到要编辑的单元格，回车进入编辑状态，按Esc保存更改，回车保存更改。
jQuery('#grid_id ')。jqGrid({
.
cellEdit:对，
Cellsubmit:'clientArray '，//定义单元格内容的存储位置。默认值为“远程”
.
});
以上是边肖介绍的jqGrid的使用总结。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。