Spring与Mybatis实现异步加载esayui的treegrid树形网格并分页
Spring与Mybatis实现异步加载esayui的treegrid树形网格并分页
游离于山间之上的Java爱好者
发布于 2022-08-09 15:10:51
发布于 2022-08-09 15:10:51
文章被收录于专栏：你我杂志刊
其实Jquery Easyui的treegrid是一个组合组件（tree组件+datagrid组件），所以只要掌握了以上两个组件，这个treegrid就不难了，虽然说是这么说，但是实现起来并不是那么尽如人意啊！好了，废话少扯，切入正题。那就先看一下treegrid最终实现的效果图吧！
表还是上一篇的表数据与结构以及实体Ztree整合SpringMVC实现异步加载树 故而，这里笔者就不在叙述了，不太清楚的可查看上篇文章。 先是在Dao接口中添加以下抽象方法
/**
* 查找顶级节点 并分页
* @param pageNow
* @param pageSize
* @return
*/
public List<CityZtree> findParentNodeByPage(@Param("pageNow") int pageNow, @Param("pageSize") int pageSize);对应的xml文件添加如下：
<select id="findParentNodeByPage" resultMap="resultCity">
select * from city_ztree where parent_id='0' limit #{pageNow},#{pageSize}
</select>相应的Service接口也添加抽象方法。
/**
* 获取顶级节点的总数 也就是parentId为0的节点
* @return
*/
public Integer getParentCount();
public Object getEasyuiTreegridPageJson(Integer page,Integer size,String parentId);Service的实现类去实现刚添加的抽象方法。或许在实现类有用到上一篇的方法，而这里没有贴出来，需要的可查看上一篇文章，这里就不在叙述！
@Override
public Object getEasyuiTreegridPageJson(Integer page, Integer size, String parentId) {
parentId=StringUtils.isNotBlank(parentId) ? parentId : "0";
page=null==page ? 1 : page;
size=null==size ? 2 : size;
int pageStart=(page-1)*size;
List<Map<String,Object>> result=new ArrayList<>();
Map<String,Object> item=new HashMap<>();
if("0".equals(parentId)){
item.put("total",getParentCount());
List<CityZtree> list= cityZtreeDao.findParentNodeByPage(pageStart,size);
List<Map<String,Object>> children=new ArrayList<>();
for(CityZtree cityZtree : list){
Map<String,Object> cityMap=new HashMap<>();
cityMap.put("id",cityZtree.getId());
cityMap.put("name",cityZtree.getCityName());
cityMap.put("parentId","0");
if(hasChild(cityZtree.getId())){
cityMap.put("state","closed");
}else{
cityMap.put("state","open");
}
children.add(cityMap);
}
item.put("rows",children);
return item;
}else{
List<CityZtree> list= findByParentId(parentId);
for(CityZtree cityZtree : list) {
Map<String, Object> cityMap = new HashMap<>();
cityMap.put("id", cityZtree.getId());
cityMap.put("name", cityZtree.getCityName());
cityMap.put("parentId",parentId);
if (hasChild(cityZtree.getId())) {
cityMap.put("state", "closed");
} else {
cityMap.put("state", "open");
}
result.add(cityMap);
}
return result;
}
}
@Override
public Integer getParentCount() {
return cityZtreeDao.hasChild("0");
}而后新建一个Controller类，具体类文件如下：
package com.zhenqi.controller;
import com.zhenqi.entity.CityZtree;
import com.zhenqi.service.CityZtreeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
/**
* Created by wuming on 2019/4/6.
*/
@Controller
@RequestMapping
public class EayuiTreeGridController {
@Autowired
private CityZtreeService cityZtreeService;
@RequestMapping("/easyui/getTreeGrid")
@ResponseBody
public Object getTreeGrid(HttpServletRequest request){
String id=request.getParameter("id");
String pageStr=request.getParameter("page");
String rowStr=request.getParameter("rows");
int page=pageStr==null ? Integer.parseInt("0") : Integer.parseInt(pageStr);
int rows=rowStr==null ? Integer.parseInt("2") : Integer.parseInt(rowStr);
List<Map<String,Object>> searchList=new ArrayList<>();
List<CityZtree> searchCityList=new ArrayList<>();
List<CityZtree> parentCityList=new ArrayList<>();
return cityZtreeService.getEasyuiTreegridPageJson(page,rows,id);
}
}到这里，接下来就是视图层，首先你得引入以下easyui相关文件。
<link rel="stylesheet" type="text/css" href="/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/static/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/static/easyui/demo/demo.css">
<script type="text/javascript" src="/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/static/easyui/locale/easyui-lang-zh_CN.js"></script>界面完整源码如下：
<!DOCTYPE html >
<html>
<head>
<title>Spring与Mybatis实现异步加载esayui的treegrid树形网格并分页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/static/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/static/easyui/demo/demo.css">
<script type="text/javascript" src="/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/static/easyui/locale/easyui-lang-zh_CN.js"></script>
<body>
<table id="myTreeGrid" class="easyui-treegrid" ></table>
</body>
<script>
$(function(){
$('#myTreeGrid').treegrid({
url:'/easyui/getTreeGrid',
nowrap: true,
fit:true,
fitColumns:true ,//表格自动适应
rownumbers: true,//显示行号
pagination: true,
pageSize: 2,
pageList: [2,10,20],
idField:'id',
treeField:'name',
onLoadSuccess:function(data){
delete $(this).treegrid('options').queryParams['id'];
},
columns:[
[
{
title:'编号',
field:'id'
},
{
title:'名称',
field:'name'
}
]
]
})
})
</script>
</head>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-04-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
