jqGrid⽤法汇总（全经典）1.⽀持多种类型的数据集合作为数据源
$("#grid1").jqgrid(
........
datatype: "xml",
........
);
XML格式：
<rows>
<page></page>
<total></total>
<records></records>
<row id="rowid">
<cell>value1</cell>
<cell>valueN</cell>
</row>
</rows>
json格式：
{"page":"页号",
"rows":[
{name1:'value1',name2:'value2',.....nameN:'valueN'},
{....}
]
,
"total"：记录数,
"records"：总记录数
}
数组格式：
var datas = [
{name1:'value1',name2:'value2',..... nameN:'valueN'},
{....}
];
//把数据添加到jqgrid⾥
for (var i = 0; i <= mydata.length; i++) {
jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);
}
或者设置data属性：
$("#grid1").jqgrid(
data:mydata,   
datatype:'local',
);
View Code
2.统计运算的功能
将footerrow设为true，绑定gridComplete事件。
统计时利⽤getCol⽅法，
第⼀个参数为colMode的name值，
第⼆个设为false，否则会返回⼀个数组⽽不是但⼀个数据，
第三个是设置统计⽅式，有'sum','avg'和'count'。
$("#grid1").jqgrid(
......
footerrow: true,
gridComplete: completeMethod,
);
function completeMethod(){
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: '合计:', amount: sum_amount, tax: sum_tax, total: sum_total });
}
View Code
3.排序
只要单击列的标题，就可以对该列进⾏升序或降序的排序。设置该列是否允许排序，在列的属性⾥设置sortable，同时对于不同的数据类型，也需要设置其相应的排序类型sorttype，类型有int/integer 整型,float/number/currency 浮点型，date ⽇期，text ⽂本，
function定义函数来实现⾃定的排序规则。
$("#grid1").jqgrid(
........
colModel: [
.........
{ name: 'id', index: 'id', width: 60, myexport: true, editable: true , sorttype: "int", sortable: true},
],
);
View Code
4.分组
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-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
{id:"5",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
];
jQuery("#list48").jqGrid({
data: mydata,
datatype: "local",
height: 'auto',
rowNum: 30,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100, editable:true},
jquery在线库
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: "#plist48",
viewrecords: true,
sortname: 'name',
grouping:true,
groupingView : {
groupField : ['name']
},
caption: "Grouping Array Data"
});
View Code
5.筛选
jqGrid的筛选并不是在grid⾥⾯的内容进⾏筛选，其实是对数据库⾥的数据筛选查询。html:
<table id="s2list"></table>
<div id="s2pager"></div>
javascript:
jQuery("#s3list").jqGrid(
'navGrid','#s3pager',
{edit:false,add:false,del:false,search:false,refresh:false}
);
jQuery("#s3list").jqGrid(
'navButtonAdd',"#s3pager",
{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',        onClickButton:function(){     
mygrid[0].toggleToolbar();  　
}
});
jQuery("#s3list").jqGrid(
'navButtonAdd',"#s3pager",
{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',   
onClickButton:function(){      　
mygrid[0].clearToolbar()  　
}
});
jQuery("#s3list").jqGrid('filterToolbar');
View Code
6.增删改查⼯具栏及分页栏
jqGrid附带了分页栏，在分页栏上可以添加增加，修改，删除以及查询按钮。
在html多添加⼀个层，这个层就存放分页栏：
记得要在colModel⾥给可供编辑的列的editable赋值为true，才可以编辑。
<div id="pager"></div>
$("#grid1").jqgrid(
.......
pager:"#pager",    　
//通过这属性还可以设置可选的页⾯⼤⼩   
rowList: [10, 20, 30],
);
//这⾥的 edit,add等就是对应编辑新增等按钮，通过设置布尔值来决定是否显⽰jQuery("#grid1").jqGrid(
'navGrid', '#pager',
{ edit: true, add: true, del: true, search: true, refresh: true}
);
//或者⽤这种形式
jQuery("#grid1").jqGrid(
'navGrid',
'#pager',
//options
{},
// edit options
  {height: 280, reloadAfterSubmit: false },
// add options
  {height: 280, reloadAfterSubmit: false },
// del options
  {reloadAfterSubmit: false },
// search options
  {}
);
View Code
7.分页读取数据
既然上⾯已提及到分页，下⾯则介绍另⼀种分页⽅式，通过滚动条进⾏翻页。
在这种分页⽅式中，数据库的所有数据并⾮⼀下⼦读取出来填充到grid中，
⽽是通过滚动条的位置得出当前浏览到的哪⼀页数据，才从数据库读取那部分的数据。$("#grid1").jqgrid(
......
//设置了这个才会根据滚动分页读取数据
scroll: 1,
  //设置页⾯的⼤⼩
  rowNum: 10,
);
下⾯的例⼦只是⽤到本地的数据，同样也是实现了滚动翻页的效果
jQuery("#scrolling").jqGrid({
scroll: 1,
datatype: "local",
data:mydata,
height: 100,
width: 600,
colNames: ['Index', 'Name', 'Code'],
colModel: [
{ name: 'id', index: 'id', width: 65 },
{ name: 'name', index: 'name', width: 150 },
{ name: 'note', index: 'note', width: 100 }
],
rowNum: 5,
gridview: true,
pager: '#pscrolling',
sortname: 'item_id',
viewrecords: true,
sortorder: "asc",
caption: "Loading data while scrolling"
});
View Code
8.⽗⼦表
通过以下设置可使⽤⼦表
$("#grid1").jqgrid(
......
//启⽤⼦表
subGrid : true,
subGridUrl: '............',
//设置⼦表的属性
subGridModel: [{
name : ['name1','name2',......,'nameN'],
width : [width1,width2,.....,widthN] } ],
);
这⾥⼦表的设置只是最基本的，更多属性的资料可参阅
irand/jqgridwiki/doku.php?id=wiki:subgrid
View Code
9.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的⽅法
irand/jqgridwiki/doku.php?id=wiki:methods
View Code
10.数据验证
通过设置colModel的editrules属性，可以对输⼊的数据进⾏验证
jQuery("#grid_id").jqGrid({
...
colModel: [
{name:'price', ..., editrules:{edithidden:true, }, editable:true },
]
});
下⾯则是可⽤的验证选项
View Code
11.设置条带状的列
jQuery("#ghcs").jqGrid(
'setGroupHeaders', {　
//设置列头是否启⽤colSpan效果
useColSpanStyle: false,
groupHeaders:[{
startColumnName: 'colName',
//合并列组的第⼀个列名   
numberOfColumns: number,
//合并列的数量   
titleText: 'title'
//合并列的标题  　
},]
}
View Code
12.编辑器
jqGrid的模板列⾃带了⼀些很基本的编辑器，
包括：
'text'单⾏⽂本框,
'textarea'多⾏⽂本框,
'select'下拉框,
'checkbox'复选框,
'password'密码框,
'button'按钮,
'image'图⽚按钮,
'file'⽂件上传框以及
'custom'⾃定义编辑器。
在colModel⾥设置edittype则可
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{
name:'price',
...,
editable:true,
edittype:'text',
editoptions: {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。