jqGrid how to

原创于 2013-01-31 21:10:46 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jqGrid #ViewUI

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文转载至[url=http://blog.51better.info/articles/2013/01/31/1359637388647.html]天朗工作室[/url]
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>
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>
<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 显示删除按钮

待续……