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

herestay

浏览: 35093 次
性别:
来自: 深圳

最近访客更多访客>>

lhc88815

chm00d339

kania1983

dan938

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

jquery jqgrid jquery列表数据列表

公司做项目，当初选择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>

分享到：