jqGrid how to

本文转载至天朗工作室
1.使用json数据格式

（json）数据:
      [{categoryId:'a',categoryCode:'a',categoryName:'a',level:0,parentId:0,creator:'a'},{categoryId:'b',categoryCode:'b',categoryName:'b',level:0,parentId:0,creator:'b'}]
   
html:
<table id="jqGrid"><!--只能是table-->
</table>
js:
jqGrid  = $('#jqGrid').jqGrid({
url:'http://www.51better.info/index.html‘,//获取数据url
//loadComplete:function(data) {console.log(data);},
datatype:'json',//设置数据格式 （json,xml,local）
colNames:['品类编号','品类代号','品类名称','品类级别','上级编号','创建人'],
colModel:[
{name:'categoryId',index:'categoryId',align:'center'},
{name:'categoryCode',index:'categoryCode',align:'center',editable:true,edittype:'text'},
{name:'categoryName',index:'categoryName',align:'center',editable:true,edittype:'text'},
{name:'level',index:'level',align:'center'},
{name:'parentId',index:'parentId',align:'center'},
{name:'creator',index:'creator',align:'center'}
],
autowidth:true,
jsonReader:{
/*total:'total',
records:'rows',
page:'page',*/
repeatitems: false  //如果表格不能正常显示 请检查此设置是否设置为false
}
});

2.添加分页（pagebar）
html:
<table id="jqGrid"><!--只能是table-->
</table>
<div id="pagebar"></div>

js:
jqGrid  = $('#jqGrid').jqGrid({
url:'http://www.51better.info/index.html‘,//获取数据url
//loadComplete:function(data) {console.log(data);},
datatype:'json',//设置数据格式 （json,xml,local）
colNames:['品类编号','品类代号','品类名称','品类级别','上级编号','创建人'],
colModel:[
{name:'categoryId',index:'categoryId',align:'center'},
{name:'categoryCode',index:'categoryCode',align:'center',editable:true,edittype:'text'},
{name:'categoryName',index:'categoryName',align:'center',editable:true,edittype:'text'},
{name:'level',index:'level',align:'center'},
{name:'parentId',index:'parentId',align:'center'},
{name:'creator',index:'creator',align:'center'}
],
                                pager:"#pagebar",
autowidth:true,
jsonReader:{
/*total:'total',
records:'rows',
page:'page',*/
repeatitems: false  //如果表格不能正常显示 请检查此设置是否设置为false
}
});
3.在分页栏显示按钮
js:
jqGrid  = $('#jqGrid').jqGrid({
url:'http://www.51better.info/index.html‘,//获取数据url
//loadComplete:function(data) {console.log(data);},
datatype:'json',//设置数据格式 （json,xml,local）
colNames:['品类编号','品类代号','品类名称','品类级别','上级编号','创建人'],
colModel:[
{name:'categoryId',index:'categoryId',align:'center'},
{name:'categoryCode',index:'categoryCode',align:'center',editable:true,edittype:'text'},
{name:'categoryName',index:'categoryName',align:'center',editable:true,edittype:'text'},
{name:'level',index:'level',align:'center'},
{name:'parentId',index:'parentId',align:'center'},
{name:'creator',index:'creator',align:'center'}
],
                                pager:"#pagebar",
autowidth:true,
jsonReader:{
/*total:'total',
records:'rows',
page:'page',*/
repeatitems: false  //如果表格不能正常显示 请检查此设置是否设置为false
}
}).navGrid("#toolbar",{add:false,edit:false,del:false,search:true,refresh:true});

                       //add:true 显示添加按钮 edit:true 显示编辑按钮 del:true 显示删除按钮

待续……