改造一下jeecg中的部门树
生活随笔
收集整理的這篇文章主要介紹了
改造一下jeecg中的部门树
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
改造一下jeecg中的部門樹
假裝有需求
關于 jeecg 提供的部門樹，相信很多小伙伴都已經用過了，今天假裝有那么一個需求 "部門樹彈窗選擇默認展開下級部門"，帶著這個需求再次去探索一下吧。
一、改造之前的部門選擇樹流程
1.1 t:departSelect標簽
代碼片段：
<t:departSelect?selectedNamesInputId="orgNames"?selectedIdsInputId="orgIds"></t:departSelect>關于 selectedNamesInputId 與 selectedIdsInputId 屬性：
- selectedNamesInputId：用于顯示勾選后的部門名稱
- selectedIdsInputId：用于記錄勾選后的部門id
使用 "t:departSelect" 標簽其實幫我們創建了兩個 input，orgNames 與 orgIds，就是上方指定的兩個屬性名稱，效果如下：
<input?class="inuptxt"?readonly="true"?type="text"?id="orgNames"?name="orgNames"?style="width:?150px"?onclick="openDepartmentSelect()"><input?class="inuptxt"?id="orgIds"?name="orgIds"?type="hidden"?value=",">
通過生成的這兩個 input，我們發現重點落在了 openDepartmentSelect() 這個方法，下面來看一下這個方法。
1.2 openDepartmentSelect()方法
方法代碼：
function?openDepartmentSelect()?{????????$.dialog.setting.zIndex?=?9999;?????
????$.dialog({
????????content:?'url:departController.do?departSelect',?
????????zIndex:?2100,?
????????title:?'組織機構列表',?
????????lock:?true,?
????????width:?'400px',?
????????height:?'350px',?
????????opacity:?0.4,?
????????button:?[???????
????????{name:?'確定',?callback:?callbackDepartmentSelect,?focus:?true},???????
????????{name:?'取消',?callback:?function?(){}}???]
????}).zindex();
}
知識點： jeecg 中所有的表單彈出采用的技術都是 lhgdialog ，技術鏈接：http://www.lhgdialog.com/
通過上方的請求鏈接，我們找到最終的跳轉界面（departSelect.jsp）：
1.3 departSelect.jsp界面
<html><head>
<title>組織機構集合</title>
···
<script?type="text/javascript">
????...
????//加載展開方法
????function?zTreeOnExpand(event,?treeId,?treeNode){
?????????var?treeNodeId?=?treeNode.id;
?????????$.post(
????????????'departController.do?getDepartInfo',
????????????{parentid:treeNodeId,orgIds:$("#orgIds").val()},
????????????function(data){
????????????????var?d?=?$.parseJSON(data);
????????????????if?(d.success)?{
????????????????????var?dbDate?=?eval(d.msg);
????????????????????var?tree?=?$.fn.zTree.getZTreeObj("departSelect");
????????????????????if?(!treeNode.zAsync){
????????????????????????tree.addNodes(treeNode,?dbDate);
????????????????????????treeNode.zAsync?=?true;
????????????????????}?else{
????????????????????????tree.reAsyncChildNodes(treeNode,?"refresh");
????????????????????}
????????????????????//tree.addNodes(treeNode,?dbDate);
????????????????}
????????????}
????????);
????}
????//首次進入加載level為1的
????$(function(){
????????$.post(
????????????'departController.do?getDepartInfo',
????????????{orgIds:$("#orgIds").val()},
????????????function(data){
????????????????var?d?=?$.parseJSON(data);
????????????????if?(d.success)?{
????????????????????var?dbDate?=?eval(d.msg);
????????????????????$.fn.zTree.init($("#departSelect"),?setting,?dbDate);
????????????????}
????????????}
????????);
????});
</script>
</head>
<body?style="overflow-y:?auto"?scroll="no">
<input?id="orgIds"?name="orgIds"?type="hidden"?value="${orgIds}">
<ul?id="departSelect"?class="ztree"?style="margin-top:?30px;"></ul>
</body>
</html>
知識點： jeecg 中所采用的樹列表是 ztree ，技術鏈接：http://www.treejs.cn/
關于上方這兩個方法的解讀：
界面加載，首先請求數據，獲取數據后初始化 ztree,每次部件被點擊都會觸發 zTreeOnExpand 方法，附帶父部門 id 獲取子部門數據。
通過該界面我們找到了最先請求數據的方法：getDepartInfo 方法，那么這個方法其實我們通過上方的注釋已經了解到 首次進入加載level為1的，意味著只加載了父部門的數據，通過具體后臺代碼驗證：
(params?=?"getDepartInfo")public?AjaxJson?getDepartInfo(HttpServletRequest?request,?HttpServletResponse?response){
????AjaxJson?j?=?new?AjaxJson();
????String?orgIds?=?request.getParameter("orgIds");
????String[]?ids?=?new?String[]{};?
????if(StringUtils.isNotBlank(orgIds)){
????????orgIds?=?orgIds.substring(0,?orgIds.length()-1);
????????ids?=?orgIds.split("\\,");
????}
????List<TSDepart>?tSDeparts?=?new?ArrayList<TSDepart>();
????StringBuffer?hql?=?new?StringBuffer("?from?TSDepart?t?where?1=1?");
????tSDeparts?=?this.systemService.findHql(hql.toString());
????List<Map<String,Object>>?dateList?=?new?ArrayList<Map<String,Object>>();
????if(tSDeparts.size()>0){
????????Map<String,Object>?map?=?null;
????????String?sql?=?null;
?????????Object[]?params?=?null;
????????for(TSDepart?depart:tSDeparts){
????????????map?=?new?HashMap<String,Object>();
????????????map.put("id",?depart.getId());
????????????map.put("name",?depart.getDepartname());
????????????map.put("code",depart.getOrgCode());
????????????if(ids.length>0){
????????????????for(String?id:ids){
????????????????????if(id.equals(depart.getId())){
????????????????????????map.put("checked",?true);
????????????????????}
????????????????}
????????????}
????????????if(depart.getTSPDepart()?!=?null){
????????????????map.put("pId",?depart.getTSPDepart().getId());
????????????}else{
????????????????map.put("pId",?"1");
????????????}
????????????if(ids.length>0){
????????????????for(String?id:ids){
????????????????????if(id.equals(depart.getId())){
????????????????????????map.put("checked",?true);
????????????????????}
????????????????}
????????????}
????????????dateList.add(map);
????????}
????}
????net.sf.json.JSONArray?jsonArray?=?net.sf.json.JSONArray.fromObject(dateList);
????j.setMsg(jsonArray.toString());
????return?j;
}
果不其然，只加載了 orgType = 1 的結節。
至此，我們已經清楚地了解到具體改造步驟在于數據，接下來要開始改造了。
二、改造需求中的部門樹
2.1 后臺getDepartInfo方法
刪除掉了 parentid 的判斷條件
if(StringUtils.isNotBlank(parentid)){????????TSDepart?dePart?=?this.systemService.getEntity(TSDepart.class,?parentid);
????hql.append("?and?TSPDepart?=??");
????tSDeparts?=?this.systemService.findHql(hql.toString(),?dePart);
}?else?{
????hql.append("?and?t.orgType?=??");
????tSDeparts?=?this.systemService.findHql(hql.toString(),?"1");
}
2.2 departSelect.jsp
$(function(){????$.post(
????????'departController.do?getDepartInfo',
????????{orgIds:$("#orgIds").val()},
????????function(data){
????????????var?d?=?$.parseJSON(data);
????????????if?(d.success)?{
????????????????var?dbDate?=?eval(d.msg);
????????????????$.fn.zTree.init($("#departSelect"),?setting,?dbDate);
????????????????//1、全部展開
????????????????//$.fn.zTree.init($("#departSelect"),?setting,?dbDate).expandAll(true);
????????????????var?treeObj?=?$.fn.zTree.getZTreeObj("departSelect");
????????????????var?nodes?=?treeObj.getNodes();
????????????????//設置節點展開
????????????????for?(var?i=?0;?i?<?nodes.length;?i++)?{
????????????????????//2、第二種方式實現全部展開
????????????????????//treeObj.expandNode(nodes[i],?true,?true,?true);
????????????????}
????????????????//3、只展開第一個節點
????????????????treeObj.expandNode(nodes[0],?true,?true,?true);
????????????}
????????}
????);
});
效果圖：
上方代碼，提供了1、2、3，其中1、2都是事先全部展開節點，3表示展開指定的節點，具體用法請參考：http://www.treejs.cn/v3/api.php
三、試一試
既然我們了解到了ztee的使用，那么我們不防再完善一下這個部門選擇，增加一個模糊搜索的功能，具體實現效果如下。
最后
文章作者：niceyoo
文章地址：https://www.cnblogs.com/niceyoo/p/10527254.html
如果覺得文章對你有所幫助，右下方點個推薦~
posted @ 2019-03-13 22:47 niceyoo 閱讀(...) 評論(...) 編輯 收藏
總結
以上是生活随笔為你收集整理的改造一下jeecg中的部门树的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Security 认证执行
- 下一篇： 原生js实现删除节点操作