<!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>
