本文转载至
天朗工作室
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 显示删除按钮
待续……
分享到:
相关推荐
HOWTO Navigating Pager Navigator Custom Buttons HOWTO Formatter Predefined Formatter Custom Formatter HOWTO Searching Configuration Toolbar Searching Custom Searching Single Searching Advanced ...
HOWTO Navigating Pager Navigator Custom Buttons HOWTO Formatter Predefined Formatter Custom Formatter HOWTO Searching Configuration Toolbar Searching Custom Searching Single Searching Advanced ...
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...
jqgrid
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqgrid中文文档API,使用JQGRID
JqGrid插件+JqGridDemo+JqGrid主题,自己项目里引入的文件
JqGrid中文API文档,包含了基础的JqGrid控件的属性方法事件等,有如何使用JqGrid的Demo.
jquery.jqgrid
jqGrid5.5 学习
jQgrid+demo
jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0
本文档是由 jqGrid 3 .6.5... For more information on jQuery, please refer to the jQuery web site. jqGrid's Home page can be found here. Working examples of jqGrid, with explanations, can be found here.
jqGrid demo
jqGrid_API中文
jqgrid实现分组显示和统计的功能,jqgrid实现分组显示和统计
jqgrid 的帮助文档 jqGrid属性
jqgrid jqgrid 增删查改 添加toolbar 不保存到数据库 artdialog 弹出框
jquery jqgrid 参数详