一些基本的知识参考官网 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>