假裝有需求
關於 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的，意味着只加載了父部門的數據，通過具體后台代碼驗證：
@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);
}
}
);
});
效果圖：
上方代碼，提供了1、2、3，其中1、2都是事先全部展開節點，3表示展開指定的節點，具體用法請參考：http://www.treejs.cn/v3/api.php
三、試一試
既然我們了解到了ztee的使用，那么我們不防再完善一下這個部門選擇，增加一個模糊搜索的功能，具體實現效果如下。
最后
18年專科畢業后，期間一度迷茫，最近我創建了一個公眾號用來記錄自己的成長。文章作者：niceyoo
文章地址：https://www.cnblogs.com/niceyoo/p/10527254.html
如果覺得文章對你有所幫助，右下方點個推薦~
