jqgrid小demo（加载本地数据）

最新推荐文章于 2023-07-03 22:00:00 发布

魏亚强

最新推荐文章于 2023-07-03 22:00:00 发布

阅读量255

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wyq188945/article/details/99345810

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<link rel="stylesheet" href="css/ui.jqgrid.css" />
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table  id="commonList2"></table>
		<div id="commonPager2"><div>
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.jqGrid.min.js" ></script>
	<script type="text/javascript" src="js/grid.locale-en.js" ></script>
	<script>
		$(function(){
			initializeListNew()
		})
		function initializeListNew(){
	 	var zfjqydSqList = $("#commonList2").jqGrid({
		 	datatype: 'local', 
	        autowidth: true,
	        height:400,
	        colNames: ["ID", "罪犯姓名","罪犯编号","罪犯状态","操作"],
	        colModel: [
	            { name: "id", index:"id"},
	            { name: "xm", index:"xm", align:"center", sortable: true,sorttype:'int'},
	            { name: "bh", index:"bh", align:"center", sortable: true},
	            { name: "zfztName", index:"zfztName", align:"center", sortable: true},
				{ name: "customColumn",align:"center", sortable: true}
	            ],
            sortable: true,
	        pager: "#commonPager2",	       
	         loadonce: false,        
	        rowNum: 20,
	        rowList: [10, 20, 30],
	         sortname: "xm",
			sortorder:"desc",
	        viewrecords: true,
	        gridview: true,
	        autoencode: true
	   });
	 	var dataList=[
	 	{id:1,xm:3,bh:"aaa",zfztName:"asd",customColumn:"123"},
	 	{id:2,xm:2,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:3,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:398,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:3,xm:33,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:4,xm:32,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:35,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:36,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:30,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:378,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:334,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:32342,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:323,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:323,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:387,bh:"aaa",zfztName:"asd",customColumn:"123"}
	 	,{id:1,xm:32,bh:"aaa",zfztName:"asd",customColumn:"123"}]
	 	var localData = {page: 1, total: 0, records: "0", rows: dataList};
	    localData.records = dataList.length;	   
	    localData.total = (dataList.length % 5 == 0) ? (dataList.length / 5) : (Math.floor(dataList.length / 5) + 1); 
	    var reader = {  
          root: function(obj) { return localData.rows; },  
          page: function(obj) { return localData.page; },   
          total: function(obj) {  return localData.total; },  
          records: function(obj) { return localData.records; },  repeatitems : false};
	    $("#commonList2").setGridParam({data: localData.rows, localReader: reader}).trigger('reloadGrid');
	    alert(localData.records)
}
	</script>
</html>