使用jQGrid實現簡單的列表數據呈現

原創

herestay

2020-02-21 19:46

公司做項目，當初選擇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>