<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/ui.jqgrid-bootstrap-ui.css" /> <link rel="stylesheet" href="../css/ui.jqgrid-bootstrap.css" /> <link rel="stylesheet" href="../css/ui.jqgrid.css" /> <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/jquery.jqGrid.min.js"></script> <script src="../js/i18n/grid.locale-cn.js"></script> <script> $(function(){ var mydata = [ {id:"1",name:"1号"}, {id:"2",name:"2号"}, {id:"3",name:"3号"}, {id:"4",name:"1号"}, {id:"5",name:"2号"}, {id:"6",name:"3号"}, {id:"7",name:"1号"}, {id:"8",name:"2号"}, {id:"9",name:"3号"} ]; jQuery("#column").jqGrid({ data: mydata, datatype: "local", height: 'auto', rowNum: 30, rowList: [10,20,30], colNames:['编号','名称'], colModel:[ {name:'id',index:'id', width:300, sorttype:"int"}, {name:'name',index:'name', width:900,editable:true} ], pager: "#columnPager", viewrecords: true, sortname: 'name', grouping:true, groupingView : { groupField : ['name'] }, caption: "分组" }); }); </script> </head> <body> <div> <table id="column"></table> <div id="columnPager"></div> </div> </body> </html>