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

最新推荐文章于 2023-08-31 10:07:14 发布

herestay

最新推荐文章于 2023-08-31 10:07:14 发布

阅读量2.1k

点赞数

分类专栏： JAVASCRIPT 文章标签： jqgrid jqGrid jQgrid jquery grid jquery table jquery 列表

本文链接：https://blog.csdn.net/herestay/article/details/8567932

版权

JAVASCRIPT 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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