easyui 中的datagrid分页技术实现

来源：互联网发布：powershell 登录linux 编辑：程序博客网时间：2024/04/29 00:18

一些基本的知识参考官网 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键 存放每页记录 listreturn "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>

0 0