公司做项目,当初选择jQGrid的原因是其扩展性好,支持不同的数据源(XML,HTML,JOSN),同时,使用JSON时还提供了JSON Reader,所以决定用它了,现在我们看下如何利用jQGrid实现简单的列表显示。
一些公用的参数,我们抽取出来:
<script>
//JSON Reader
var jqGridJsonReader = {
root: "data",
records: "totalSize",
page: "page",
total: "total",
repeatitems: false
};
//JQGrid 菜单栏,默认全部false
var navGridParams = {
edit:false,add:false,del:false,search:false
};
//JQGrid列表的一些公共参数,这里抽取出来
var gridParams={
mtype:'post',
datatype:'json',
autowidth:true,
height:'auto',
viewrecords: true,
multiselect:true,
multiboxonly:true,
sortorder:'desc',
rowNum:10,
rowList:[5,10,15,20],
toolbar:[false]
};
/**
加载数据列表
**/
function showGird(){
var params = {
url:'testUser!findPager.action',
caption:'用户列表',
colNames:['用户ID','用户名'],
colModel:[
{name:'id',width:60,align:'center',sortable:true},
{name:'userName',width:150},
],
jsonReader:$.extend({},jqGridJsonReader,{id:'id'}),
sortname:'id',
pager:'#testUserGridPager',
autowidth:true,
gridComplete:function(){
$('#testUserGrid_add').unbind().click(function(){
$('#add_user_window').window('open');
});
}
};
$.extend(params,gridParams);
$("#testUserGrid").jqGrid(params);
$("#testUserGrid").navGrid('#testUserGridPager',navGridParams);
$("#t_testUserGrid").css(jqGridTopStyles);
$("#t_testUserGrid").append($('#testUserGridToolbar').html());
}
</script>
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>数据列表演示</title>
<head>
<!-- JQGrid样式继承了JQuery UI -->
<link rel="stylesheet" type="text/css" media="screen" href="jquery/jqgrid/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui-1.8.20.custom/css/redmond/jquery-ui-1.8.20.custom.css">
<!-- jQuery -->
<script src="jquery/jquery-1.4.2.min.js"></script>
<!-- JQGrid语言包及主函数 -->
<script src="jquery/jqgrid/js/i18n/grid.locale-cn.js"></script><script src="jquery/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="js/showGrid.js"></script>
<script>
$(function(){
showGird();
});
</script>
<body>
<table id="testUserGrid"></table>
<div id="testUserGridPager"></div>
</body>
</html>