百科狗-知识改变命运!
--

js查询access数据库后怎样转为jqGrid需要的格式?

梵高10个月前 (12-18)阅读数 6#综合百科
文章标签设备前台

jqGrid 实例

$(function(){

pageInit();

});

function pageInit(){

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"}

? ];

jQuery("#list48").jqGrid({

? data: mydata,

? datatype: "local",

js查询access数据库后怎样转为jqGrid需要的格式?

? 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},

{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'], groupSummary : [true],//是否开启汇总页脚

groupColumnShow : [true],//是否展示分组列

groupText : ['{0}'],//组名的展示文字

groupCollapse : false,

?},

?caption: "Grouping Array Data"

});

}

看下加粗的这段吧

1

后台向前台传的数据

{"page":1,"total":1,"records":8,"rows":[{"sn":1,"id":1,"devtypename":"台式机","nextdevsn":42,"devcodehead":"C-"},{"sn":2,"id":2,"devtypename":"笔记本","nextdevsn":1,"devcodehead":"B-"},{"sn":3,"id":3,"devtypename":"服务器","nextdevsn":6,"devcodehead":"S-"},{"sn":4,"id":4,"devtypename":"网络设备","nextdevsn":1,"devcodehead":"N-"},{"sn":5,"id":5,"devtypename":"扫描打印设备","nextdevsn":1,"devcodehead":"P-"},{"sn":6,"id":6,"devtypename":"UPS","nextdevsn":1,"devcodehead":"U-"},{"sn":7,"id":7,"devtypename":"投影仪","nextdevsn":3,"devcodehead":"Y-"},{"sn":8,"id":8,"devtypename":"其他设备","nextdevsn":16,"devcodehead":"O-"}]}

前台的格式

js:

$(function(){

jQuery("#list2").jqGrid({ url:'Devtype.do?oper=list', datatype: "json", colNames:['','id','名称', '下一个新设备的序号', '设备编号头','操作'], colModel:[ {name:'sn',index:'sn', width:20,sortable:false,align:"right",search:false}, {name:'id',index:'id', width:30,align:"right",search:false,key:true}, {name:'devtypename',index:'devtypename', width:200, editable:true,align:"center",editrules:{custom:true, custom_func:vali_devtypename}}, {name:'nextdevsn',index:'nextdevsn', width:100, editable:true, align:"right",editrules:{custom:true, custom_func:vali_nextdevsn}}, {name:'devcodehead',index:'devcodehead', width:100, editable:true, align:"center",editrules:{custom:true, custom_func:vali_devcodehead}}, {name:'act2',index:'act2', width:60,fixed:true, sortable:false, resize:false, formatter:'actions',formatoptions:{keys:false,editbutton:true,delbutton:true},align:"center"} ], rowNum:15, rowList:[10,15,20,50], pager: '#pager2', jsonReader:{ repeatitems : false }, height:"auto", width:800, strinkToFit:true, sortname: 'id', viewrecords: true, sortorder: "asc", editurl: "Devtype.do", caption:"设备类型" }); jQuery("#list2").jqGrid('navGrid',"#pager2",{search:false,edit:false,add:false,del:true}); }); html:

官方例子http://zhidao.baidu.com/question/438319519.html?oldq=1

官方手册http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs 

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)