首页 > 代码库 > Jeecg中的<t:datagrid treegrid="true">实现

Jeecg中的<t:datagrid treegrid="true">实现

2024-09-06 18:15:11   236人阅读

Jeecg的代码生成器很不错，但是可能有的时候不是那么符合我们实际项目的功能需求，这里会首先介绍jeecg原生生成的样子，以及根据需求进行的改造。Jeecg中的<t:datagrid>就是将easyui进行封装而成。jsp页面引入：<%@include file="/context/mytags.jsp"%>，在mytags.jsp中<%@ taglib prefix="t" uri="/easyui-tags"%>的这条即为jeecg对easyui的封装。扯得有点远了，回到主题上来。Jeecg中的treegrid的树形结构的实现：

部分需求构造：树形结构图中的是区域划分。区域存于一张表，通过parientid判断其父节点。

需求症状：根据登陆用户所在区域，选择监测区域时为其显示该区域下的子级区域供其选择。并且默认选中原先保存的区域。选中子级区域时不得默认为其选中父级区域。

需求诊断：treegrid为懒加载形式，先加载的是最外层的区域，当点击某区域要为其展开下级时，又会去controller加载出其子级。

需求药方：

　　1：jsp页面中的<t:datagrid>中的treegrid设置为true。形式为：

<!--  title表格标题，pagination是否分页，由于是树形最好是设置为不显示分页比较符合逻辑的，actionUrl为访问的Controller，checkbox为是否显示复选框

　　treegrid为是否是树形列表，idField为主键字段，onLoadSuccess为数据加载成调用方法

 -->

<t:datagrid name="addList" title="树形列表" pagination="false" actionUrl="regimeController.do?departFunction&monitorId=${monitorId}" checkbox="true" treegrid="true" idField="id" onl oadSuccess="loadSuccess">

 

　　2：在RegimeController类里添加方法：departFunction并为其添加注解。函数如下：

　　　

　@RequestMapping(params = "departFunction")
　　　　@ResponseBody
　　　　public List<TreeGrid> departFunction(TSDepart tSDepart,HttpServletRequest request, HttpServletResponse response, TreeGrid treegrid) {
　　　　　　String departid = request.getParameter("monitorId");//获取页面参数 即用户区域id
　　　　　　StringBuffer sqlList = new StringBuffer();
　　　　　　sqlList.append("SELECT * FROM T_S_DEPART WHERE DELFLAG =0 ");//利用的是原生的depart表，文末我会给出depart类和表形式
　　　　　　if (treegrid.getId() != null) {
　　　　　　　　sqlList.append(" AND parentdepartid = ‘"+treegrid.getId()+"‘");//点击下级时加载下级列表
　　　　　　} else {
　　　　　　　　sqlList.append(" AND id = ‘"+departid+"‘");//查找当前登录用户对应的区域
　　　　　　}
　　　　　　List<Record> parList = Db.use("gl").find(sqlList.toString()); //jFinal  数据库走起
　　　　　　List<TSDepart> parDepart = new ArrayList<TSDepart>();
　　　　　　for (int i = 0; i < parList.size(); i++) {
　　　　　　　　TSDepart tagDepart = new TSDepart();
　　　　　　　　tagDepart.setId(parList.get(i).getStr("id"));
　　　　　　　　tagDepart.setDepartname(parList.get(i).getStr("departname"));
　　　　　　　　tagDepart.setDescription(parList.get(i).getStr("description"));
　　　　　　　　List<TSDepart> sonDepartList = new ArrayList<TSDepart>();
　　　　　　　　//有下级则继续 否则为null
　　　　　　　　String sql = "SELECT * FROM T_S_DEPART WHERE DELFLAG =0 AND PARENTDEPARTID=‘"+parList.get(i).getStr("id")+"‘";
　　　　　　　　List<Record> sonList = Db.use("gl").find(sql);

　　　　　　　　//这里的目的是没有下级了则需要显示为文件的形式，而不是文件夹的形式。不理解的话，注释了再看效果你就明白了
　　　　　　　　if(sonList.size()>0){
　　　　　　　　　　tagDepart.setTSDeparts(sonDepartList);
　　　　　　　　}else{
　　　　　　　　　　tagDepart.setTSDeparts(null);
　　　　　　　　}
　　　　　　　　TSDepart sonDepart = new TSDepart();
　　　　　　　　sonDepartList.add(sonDepart);
　　　　　　　　parDepart.add(tagDepart);
　　　　　　}
　　　　　　//树形列表模型设置类  页面上要对应起来显示的
　　　　　　List<TreeGrid> treeGrids = new ArrayList<TreeGrid>();
　　　　　　TreeGridModel treeGridModel = new TreeGridModel();
　　　　　　treeGridModel.setTextField("departname");
　　　　　　treeGridModel.setParentText("TSPDepart_departname");
　　　　　　treeGridModel.setParentId("TSPDepart_id");
　　　　　　treeGridModel.setSrc("description");
　　　　　　treeGridModel.setIdField("id");
　　　　　　treeGridModel.setChildList("TSDeparts");
　　　　　　treeGrids = systemService.treegrid(parDepart, treeGridModel);
　　　　　　return treeGrids;
　　　　}

 

　　　　3：回到原来那个jsp页面上

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html >
<html>
<head>
<title>树形列表</title>
<t:base type="jquery,easyui,tools"></t:base>
</head>
<body style="overflow-y: hidden" scroll="no"> 
<input type="hidden" name="departId" value="${departId}" id="departId"> 
<t:datagrid name="addList" title="树形列表" pagination="false" actionUrl="regimeController.do?departFunction&monitorId=${monitorId}" checkbox="true" treegrid="true" idField="id" onl oadSuccess="loadSuccess">
<t:dgCol title="编号" field="id" treefield="id" hidden="false"></t:dgCol>
<t:dgCol title="单位名称" field="departname" treefield="text"></t:dgCol>
<t:dgCol title="所属区域" field="description" treefield="src"></t:dgCol>
</t:datagrid>
</body>

<script type="text/javascript">

function loadSuccess(data){
　　var departId = $(‘#departId‘).val();//默认选中的区域
　　var monitorId = "${monitorId}";//第一行树形
　　if(!(departId=="")){
　　　　$(‘#addList‘).treegrid(‘collapseAll‘);//合并树形
　　　　$(‘#addList‘).treegrid(‘expandAll‘);//展开树形
　　　　$(‘#addList‘).treegrid(‘select‘,monitorId);//选中第一行
　　　　$("#addList").treegrid("unselectAll");//取消选择
　　　　var result=departId.replace(/\s+/g,"");//去空格
　　　　var ids=result.split(",");//分割
　　　　//$.each(ids,function(index,obj){
　　　　　　//    $("#addList").treegrid("select",obj);
　　　　//});
　　　　for(var i = 0;i<ids.length;i++){
　　　　$("#addList").treegrid("select",ids[i]);//默认选中
　　}
　　}
}

</script>

 

　　看到这里也许就要问了：为何有这五行代码

　　　　$(‘#addList‘).treegrid(‘collapseAll‘);//合并树形
　　　　$(‘#addList‘).treegrid(‘expandAll‘);//展开树形
　　　　$(‘#addList‘).treegrid(‘select‘,monitorId);//选中第一行
　　　　$("#addList").treegrid("unselectAll");//取消选择
　　　　var result=departId.replace(/\s+/g,"");//去空格

　 问题很多，要不就是前边的序列号全是0，要不就是多行被默认选中时，只能选几条，要不就是无法选中等等问题，其实解决的思路就是模拟人实际操作的时候要点击才会加载，去空格这是个好习惯，未加这行前，就是不能选中，只能选中一条，简直就是莫名其妙的bug啊，想了好几天，边维护其他项目，边想这个，最后在alrt的时候，看着那id发呆，然后发现是页面直接写的值就行，传过来就不行，思前想后啊，才发现是空格的原因啊。哎，还是太年轻啊。、

最后跟上代码，利用的是张大大的类来模拟了一下的功能。写的不是很好呀，小菜一枚望见谅。

  1 package org.jeecgframework.web.system.pojo.base;
  2 
  3 import java.util.ArrayList;
  4 import java.util.List;
  5 
  6 import javax.persistence.CascadeType;
  7 import javax.persistence.Column;
  8 import javax.persistence.Entity;
  9 import javax.persistence.FetchType;
 10 import javax.persistence.JoinColumn;
 11 import javax.persistence.ManyToOne;
 12 import javax.persistence.OneToMany;
 13 import javax.persistence.Table;
 14 
 15 import org.jeecgframework.core.common.entity.IdEntity;
 16 
 17 /**
 18  * 部门机构表
 19  * @author  张代浩
 20  */
 21 @Entity
 22 @Table(name = "t_s_depart")
 23 public class TSDepart extends IdEntity implements java.io.Serializable {
 24     private TSDepart TSPDepart;//上级部门
 25     private String departname;//部门名称
 26     private String description;//部门描述
 27     private String longitude;//经度
 28     private String latitude;//纬度
 29     private String address;//地址
 30     private String code;
 31     private Integer dtype;
 32     private Integer delflag;
 33     private Integer xh;
 34     private List<TSDepart> TSDeparts = new ArrayList<TSDepart>();//下属部门
 35 
 36     @ManyToOne(fetch = FetchType.LAZY)
 37     @JoinColumn(name = "parentdepartid")
 38     public TSDepart getTSPDepart() {
 39         return this.TSPDepart;
 40     }
 41 
 42     public void setTSPDepart(TSDepart TSPDepart) {
 43         this.TSPDepart = TSPDepart;
 44     }
 45     
 46     @Column(name = "address", nullable = false, length = 100)
 47     public String getAddress() {
 48         return this.address;
 49     }
 50 
 51     public void setAddress(String address) {
 52         this.address = address;
 53     }
 54     
 55     @Column(name = "longitude", nullable = false, length = 50)
 56     public String getLongitude() {
 57         return this.longitude;
 58     }
 59 
 60     public void setLongitude(String longitude) {
 61         this.longitude = longitude;
 62     }
 63     
 64     @Column(name = "latitude", nullable = false, length = 50)
 65     public String getLatitude() {
 66         return this.latitude;
 67     }
 68 
 69     public void setLatitude(String latitude) {
 70         this.latitude = latitude;
 71     }
 72 
 73     @Column(name = "departname", nullable = false, length = 100)
 74     public String getDepartname() {
 75         return this.departname;
 76     }
 77 
 78     public void setDepartname(String departname) {
 79         this.departname = departname;
 80     }
 81 
 82     @Column(name = "description", length = 500)
 83     public String getDescription() {
 84         return this.description;
 85     }
 86 
 87     public void setDescription(String description) {
 88         this.description = description;
 89     }
 90     
 91     @OneToMany(cascade = CascadeType.ALL, fetch = FetchType.LAZY, mappedBy = "TSPDepart")
 92     public List<TSDepart> getTSDeparts() {
 93         return TSDeparts;
 94     }
 95 
 96     public void setTSDeparts(List<TSDepart> tSDeparts) {
 97         TSDeparts = tSDeparts;
 98     }
 99 
100     public String getCode() {
101         return code;
102     }
103 
104     public void setCode(String code) {
105         this.code = code;
106     }
107 
108     public Integer getDtype() {
109         return dtype;
110     }
111 
112     public void setDtype(Integer dtype) {
113         this.dtype = dtype;
114     }
115 
116     public Integer getDelflag() {
117         return delflag;
118     }
119 
120     public void setDelflag(Integer delflag) {
121         this.delflag = delflag;
122     }
123     @Column(name = "xh", nullable = false, length = 50)
124     public Integer getXh() {
125         return xh;
126     }
127 
128     public void setXh(Integer xh) {
129         this.xh = xh;
130     }
131     
132     
133     
134 }

 转载请注明出处：http://www.cnblogs.com/aryun/p/6496631.html 

Jeecg中的<t:datagrid treegrid="true">实现


联系
我们