easyui 中的datagrid分页技术实现

最新推荐文章于 2024-02-27 23:58:17 发布

爱佳男士

最新推荐文章于 2024-02-27 23:58:17 发布

阅读量4.6k

点赞数 1

文章标签： easyui datagrid 分页

本文链接：https://blog.csdn.net/cao478208248/article/details/30510307

版权

一些基本的知识参考官网 http://www.jeasyui.com/documentation/index.php#

这里我强调二点

第一点

datagrid会向后台传递

rows（每一页展示多少条数据），

page（第几页）

这两个数据，而在文档中没有指出来，这也是我今天弄了很久的原因（看别人写的代码发现的这一点）

第二点

后台传json数据时也要按照datagrid的数据格式，另外分页有两个数据，文档也没有指出来

total键存放总记录数
rows键存放每页记录

有了这两点，分页就比较容易实现了

一般按其默认的方法就行

下面贴代码，这里只贴关键的

后台

	private int rows;//每页多少条数据
	private int page;//第几页
	public void setRows(int row){
		System.out.println(row);
		this.rows = row ;
	}
	public void setPage(int page){
		System.out.println(page);
		this.page = page ;
	}
	//传给datagrid的数据
	public Map<String,Object> getMapData(){
		return this.mapData ;
	}
	
	public String getDataGrid(){
		System.out.println("here");
		mapData = new HashMap<String,Object>();
		
		List<Map<String,Object>> listDataGrid;//存放每一页的数据
		Map<String,Object> dgMap;
		List<GpsData> listDG;
		listDG = gpsDataService.getGpsDataList();
		listDataGrid = new ArrayList<Map<String,Object>>();
		
		int len = listDG.size() ;//防止越界
		for(int i=(page-1)*rows ; i<  page*rows && i< len ; i++){//采用分页机制查询
			dgMap = new HashMap<String,Object>();
			dgMap.put("terminalId", listDG.get(i).getTerminalId());
			dgMap.put("msgTime", listDG.get(i).getMsgTime());
			dgMap.put("lon", listDG.get(i).getDegreeLon());
			dgMap.put("lat", listDG.get(i).getDegreeLat());
			dgMap.put("speed", listDG.get(i).getSpeed());
			listDataGrid.add(dgMap);
		}
		
		mapData.put("total", len);//total键 存放总记录数，必须的
		mapData.put("rows", listDataGrid);//rows键 存放每页记录 list
		
		return "datagrid" ;
	}

前台

 $(function(){
  	$('#dg').datagrid({
  		url:'getDataGrid',
  		singleSelect:true,
  		ctrlSelect:true,
  		method:'post',
  		loadMsg:'loading......',
  		collapsible:true,//可折叠
  		pagination:true,	
  		rownumbers:true,
  		pageSize:15,
  		pageList:[5,15,30]
  		});
  	$('#dg').datagrid('getPager').pagination({

  		displayMsg:'当前显示第 {from}-{to} 条记录 ， 共 {total} 条记录'

  	});
  	});

  <body>
  <div class="easyui-layout" style="width:100%;height:100%">
  	<div data-options="region:'west',title:'时间',split:'true'" style="width:300px">时间
  	</div>
  	<div data-options="region:'center',title:'后台数据信息展示'" >
  	
  	 <div id="tdg" class="easyui-layout" style="width:100%;height:100%">
  	  <div data-options="region:'center'" >
		<table id="dg" class="easyui-datagrid" title="data grid" style="height:500px">
			<thead>
				<tr>
					<th data-options="field:'terminalId',width:80,align:'center'">设备号</th>
					<th data-options="field:'msgTime',width:120,align:'center'">GPS时间</th>
					<th data-options="field:'lon',width:150,align:'center'">经度</th>
					<th data-options="field:'lat',width:150,align:'center'">纬度</th>
					<th data-options="field:'speed',width:80,align:'center'">车速</th>
				</tr>
			</thead>
		</table>
	  </div>
	 </div>
	 
	</div>
  </div>
  </body>