使用jQGrid实现简单的列表数据呈现

公司做项目,当初选择jQGrid的原因是其扩展性好,支持不同的数据源(XML,HTML,JOSN),同时,使用JSON时还提供了JSON Reader,所以决定用它了,现在我们看下如何利用jQGrid实现简单的列表显示。

 

一些公用的参数,我们抽取出来:

 

 

showGrid.js

 

 
 

 

 

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

 

 
 
 

你可能感兴趣的:(jquery,jqGrid,jquery列表,数据列表)