首页 > 代码库 > jqGrid表格控件
jqGrid表格控件
一、 jqGrid的加载。
1.引用相关头文件
引入CSS：
<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/scripts/pagekage/utils/widget/jqGrid/redmond/jquery-ui-1.8.2.custom.css"/>
<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/scripts/pagekage/utils/widget/jqGrid/ui.jqgrid.css"/>
引入JS：
<script type="text/javascript" src="http://www.mamicode.com/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/scripts/pagekage/utils/widget/jqGrid/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/scripts/pagekage/utils/widget/jqGrid/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/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:‘‘}",
autowidth:true,
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>
jqGrid表格控件