jqGrid表格控件

一、 jqGrid的加载。

1.引用相关头文件

引入CSS:

<link type="text/css" rel="stylesheet" href="scripts/pagekage/utils/widget/jqGrid/redmond/jquery-ui-1.8.2.custom.css"/>
<link type="text/css" rel="stylesheet" href="scripts/pagekage/utils/widget/jqGrid/ui.jqgrid.css"/>

引入JS:

<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="scripts/pagekage/utils/widget/jqGrid/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="scripts/pagekage/utils/widget/jqGrid/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="scripts/pagekage/utils/widget/jqGrid/jquery.jqGrid.min.js"></script>

2.使用jqGrid

<script type="text/javascript">
$(document).ready(function(){
$("#list4").jqGrid({
url:"http://localhost:8080/yxn/student/select.do",
datatype:"json",
mtype:"POST",
height:600,
postData:"{SearchSql:''}",
autotrue,
colNames:['ID','姓名','年龄','性别'],
colModel:[
{name:'id',index:'id',hidden:true},
{name:'name',index:'name'},
{name:'age',index:'age'},
{name:'sex',index:'sex'},

],
rownumbers:true,
viewrecords: true,
rowNum:12,
rowList:[2,4,6,8,10,12],
jsonReader:{
id: "blackId",
repeatitems : false
},
pager:$('#gridPager')
});
});
</script>

<body>
<table border="0" width="100%" cellpadding="0" cellspacing="1" class="ybox06table" id="list4">

</table>
</body>

原文地址:https://www.cnblogs.com/yuxiaona/p/5827584.html