改造一下jeecg中的部门树

喜欢ヅ旅行 2023-06-01 03:24 1阅读 0赞

# [改造一下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**，就是上方指定的两个属性名称，效果如下：

![1104426-20190313223455853-1738085271.png][]

<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/][http_www.lhgdialog.com]

通过上方的请求链接，我们找到最终的跳转界面（departSelect.jsp）：

![1104426-20190313223528287-1279871482.png][]

### 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/][http_www.treejs.cn]

关于上方这两个方法的解读：  
**界面加载，首先请求数据，获取数据后初始化 ztree,每次部件被点击都会触发 zTreeOnExpand 方法，附带父部门 id 获取子部门数据。**

通过该界面我们找到了最先请求数据的方法：***getDepartInfo*** 方法，那么这个方法其实我们通过上方的注释已经了解到 **首次进入加载level为1的**，意味着只加载了父部门的数据，通过具体后台代码验证：

@RequestMapping(params = "getDepartInfo") @ResponseBody 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);             }         }     ); });

效果图：

![1104426-20190313223317086-247662241.png][] ![1104426-20190313223335611-2022910345.png][]

上方代码，提供了1、2、3，其中1、2都是事先全部展开节点，3表示展开指定的节点，具体用法请参考：*http://www.treejs.cn/v3/api.php*

## 三、试一试 ##

既然我们了解到了**ztee**的使用，那么我们不防再完善一下这个部门选择，增加一个模糊搜索的功能，具体实现效果如下。

![1104426-20190313223959957-916987766.png][]

### 最后 ###

> 文章作者：**[niceyoo][]**  
> 文章地址：**[https://www.cnblogs.com/niceyoo/p/10527254.html][niceyoo]**  
> 如果觉得文章对你有所帮助，右下方点个推荐~

转载于:https://www.cnblogs.com/Jeely/p/11309557.html

[jeecg]: https://www.cnblogs.com/niceyoo/p/10527254.html
[1104426-20190313223455853-1738085271.png]: /images/20230601/fc27dff3336d471899d05f224d2a6db8.png
[http_www.lhgdialog.com]: http://www.lhgdialog.com/
[1104426-20190313223528287-1279871482.png]: /images/20230601/694f1510957149e3b3de4e2fac827151.png
[http_www.treejs.cn]: http://www.treejs.cn/v3/api.php
[1104426-20190313223317086-247662241.png]: https://img2018.cnblogs.com/blog/1104426/201903/1104426-20190313223317086-247662241.png
[1104426-20190313223335611-2022910345.png]: /images/20230601/282bd0e0600446d780bdaee517a032d1.png
[1104426-20190313223959957-916987766.png]: /images/20230601/108e078751254274ab4557d5c46a1f7c.png
[niceyoo]: https://www.cnblogs.com/niceyoo/p/10527254.html#