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" onLoadSuccess="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" onLoadSuccess="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 }