Angular樹tree的用法

1.java 後臺
package com.dsunsoft.cqhzz.blogic.java.I0202;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.dsunsoft.cqhzz.bean.Tree;
import com.dsunsoft.cqhzz.bean.TreeValue;
import com.dsunsoft.cqhzz.blogic.dto.I0202.I0202F0009ReqtU001;
import com.dsunsoft.cqhzz.blogic.dto.I0202.I0202F0009RespU001;
import com.dsunsoft.cqhzz.sql.dto.I0202.I0202F0009SQL001DbcIU001;
import com.dsunsoft.cqhzz.sql.dto.I0202.I0202F0009SQL001DbcOU001;
import com.dsunsoft.cqhzz.sql.dto.I0202.I0202F0009SQL002DbcIU001;
import com.dsunsoft.cqhzz.sql.dto.I0202.I0202F0009SQL002DbcOU001;
import com.jinrate.dao.mybatis.QueryDAO;
import com.jinrate.service.BizLogic;
import com.jinrate.utils.BeanCopierEx;
import com.jinrate.utils.Pub;

/**
* 描述:[TB_WR_ORG_B][機構基本信息表（區環保局、水務局、河長辦）]根據行政區劃獲取組織機構樹
* @version:1.0.0
* @author: zb
* @建立時間: 2017-05-24 19:43:21
*/
public class I0202F0009BLogic implements BizLogic<I0202F0009ReqtU001, I0202F0009RespU001> {

//日誌
private final Logger log = LoggerFactory.getLogger(I0202F0009BLogic.class);

//收縮圖標
private static String FA_FOLDER = "fa-folder";

//擴展圖標
private static String FA_FOLDER_OPEN = "fa-folder";
//定義查詢dao
protected QueryDAO queryDAO = null;
public void setQueryDAO(QueryDAO queryDAO) {
this.queryDAO = queryDAO;
}

/**
* [TB_WR_ORG_B][機構基本信息表（區環保局、水務局、河長辦）]表的列表查詢方法
* @param params 輸入參數
* @return I0202F0009RespU001
**/
public I0202F0009RespU001 execute(I0202F0009ReqtU001 params) throws Exception {
//建立返回對象
I0202F0009RespU001 result = new I0202F0009RespU001();

//構造sql001的查詢條件
I0202F0009SQL001DbcIU001 dbcIU001 = new I0202F0009SQL001DbcIU001();
//將http請求的參數賦值給sqlDTO
BeanCopierEx.copy(params, dbcIU001);

//從上下文中獲取分頁信息
//PageControllerInfo pageInput = (PageControllerInfo)BLContext.getValue(CommonConsts.PAGE_INFO);

//調用queryDAO進行查詢
List<I0202F0009SQL001DbcOU001> i0202F0009SQL001DbcOU001List = queryDAO.executeForObjectList("I0202F0009SQL001", dbcIU001);

if(i0202F0009SQL001DbcOU001List == null || i0202F0009SQL001DbcOU001List.size() == 0) {
return result;
}

HashMap<String, String> addvcdMap = new HashMap<>();
ArrayList<String> addvcdList = new ArrayList<String>();
for(I0202F0009SQL001DbcOU001 i0202F0009SQL001DbcOU001 : i0202F0009SQL001DbcOU001List) {
//若是最後一個節點就是父節點，則不須要往上追述，
//好比 /500000000000/500100000000/500153000000，/重慶市/市轄區/榮昌區
//若是父節點是榮昌區，則/重慶市/市轄區不該該顯示出來,只須要加載最後一個父節點便可
String addvcdPath = i0202F0009SQL001DbcOU001.getAddvcdPath();
int lastIndex = addvcdPath.lastIndexOf(params.getParentCode());
addvcdPath = addvcdPath.substring(lastIndex);
String[] addvcds = addvcdPath.split("/");
for(int i = 0; i < addvcds.length; i++) {
if(!addvcdMap.containsKey(addvcds[i])) {
addvcdList.add(addvcds[i]);
addvcdMap.put(addvcds[i], addvcds[i]);
}
}
}

I0202F0009SQL002DbcIU001 i0202F0009SQL002DbcIU001 = new I0202F0009SQL002DbcIU001();
i0202F0009SQL002DbcIU001.setAddvcdList(addvcdList);
List<I0202F0009SQL002DbcOU001> i0202F0009SQL002DbcOU001List = queryDAO.executeForObjectList("I0202F0009SQL002", i0202F0009SQL002DbcIU001);

//加載行政區劃樹
//將返回的數據轉換爲樹節點
ArrayList<Tree> jsonList = new ArrayList<Tree>();
Map<TreeValue, Tree> parentAddvKey = new HashMap<TreeValue, Tree>();
for(int i=0; i < i0202F0009SQL002DbcOU001List.size(); i++) {
Tree tree = getAddvTree(i0202F0009SQL002DbcOU001List.get(i));
Tree parentTree = (Tree)parentAddvKey.get(new TreeValue(i0202F0009SQL002DbcOU001List.get(i).getFaddvcd()));
if(parentTree == null) {
jsonList.add(tree);
parentAddvKey.put(tree.getData(), tree);
}
else {
parentTree.getChildren().add(tree);
parentAddvKey.put(tree.getData(), tree);
}
}

//加載組織機構樹
Map<TreeValue, Tree> parentOrgKey = new HashMap<TreeValue, Tree>();
for(int i=0; i < i0202F0009SQL001DbcOU001List.size(); i++) {
Tree tree = getOrgTree(i0202F0009SQL001DbcOU001List.get(i));
//若是組織機構父id是0或者空，則直接加到行政區劃上
if(i0202F0009SQL001DbcOU001List.get(i).getOrgP() == null
|| "0".equals(i0202F0009SQL001DbcOU001List.get(i).getOrgP())) {
Tree parentTree = (Tree)parentAddvKey.get(new TreeValue(i0202F0009SQL001DbcOU001List.get(i).getAddvcd()));
if(parentTree == null) {
//未在行政區劃找到，說明數據有問題
Pub.addSystemMessage("I0202F0009MSG001", "行政區劃code："+ i0202F0009SQL001DbcOU001List.get(i).getAddvcd() + "未在行政區劃樹上找到！", result);
return result;
}

parentTree.getChildren().add(tree);
//將當前節點加到組織機構樹上
parentOrgKey.put(tree.getData(), tree);
}
else {
Tree parentTree = (Tree)parentOrgKey.get(new TreeValue(i0202F0009SQL001DbcOU001List.get(i).getOrgP()));
if(parentTree == null) {
//若是找不到，說明數據異常
Pub.addSystemMessage("I0202F0009MSG002", "組織機構父ID："+ i0202F0009SQL001DbcOU001List.get(i).getOrgP() + "未在組織機構樹上找到！", result);
return result;
}
parentTree.getChildren().add(tree);
parentOrgKey.put(tree.getData(), tree);
}
}

result.setTreeList(jsonList);
return result;
}

/**
* 獲取數據庫獲取的內容建立子節點
* @param detail [HZZ.TB_ADDV_B][行政區劃]查詢方法的子記錄DTO
* @return Tree 樹的屬性基本類
*/
private Tree getAddvTree(I0202F0009SQL002DbcOU001 detail) {
Tree tree = new Tree();
tree.setLabel(detail.getAddvnm());
TreeValue treeValue = new TreeValue();
treeValue.setAddvcdPath(detail.getAddvcdPath());
treeValue.setValue(detail.getAddvcd());
tree.setData(treeValue);
tree.setCollapsedIcon(FA_FOLDER);
tree.setExpandedIcon(FA_FOLDER_OPEN);
tree.setExpanded(true);
return tree;
}

/**
* 獲取數據庫獲取的內容建立子節點
* @param detail [HZZ.TB_ADDV_B][行政區劃]查詢方法的子記錄DTO
* @return Tree 樹的屬性基本類
*/
private Tree getOrgTree(I0202F0009SQL001DbcOU001 detail) {
Tree tree = new Tree();
tree.setLabel(detail.getOrgNm());
TreeValue treeValue = new TreeValue();
treeValue.setAddvcdPath(detail.getAddvcdPath());
treeValue.setOrgIdPath(detail.getIdPath());
treeValue.setValue(detail.getOrgId());
tree.setData(treeValue);
tree.setCollapsedIcon(FA_FOLDER);
tree.setExpandedIcon(FA_FOLDER_OPEN);
tree.setExpanded(true);
return tree;
}
}

2.anguar ts文件

/**

* 描述:[TB_WR_ORG_B][機構基本信息表（區環保局、水務局、河長辦）]表的列表組件

* @version:1.0.0

* @author: zb

* @建立時間: 2017-05-24 19:43:21

*/

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Response,Http, Headers } from '@angular/http';

import { EventManager, AlertService} from 'ng-jhipster';

import { Subscription } from 'rxjs/Rx';

import { ITEMS_PER_PAGE, Principal } from '../shared'; // 分頁設置，權限驗證等

import { WrOrgB } from './wrOrgB.model';

import { WrOrgBService } from './wrOrgB.service';

import { TreeNode, SelectItem } from 'primeng/primeng';

import {MenuModule,MenuItem,Message} from 'primeng/primeng';

import { API_URL } from '../app.constants';

@Component({

selector: 'jhi-wrOrgB-mgmt',

styles:[`

.data-table-wrap p-tree{

float: left;

height: 50rem;

margin-right: 1rem;

}

:host >>> .ui-tree{

height: 100%;

}

.areaTable{

display: flex;

}

:host >>> .col-button{

text-align:center;

}

:host >>> .col-button button{

margin:0.5rem 0;

}

:host >>> .data-table-search{

display: flex;

margin-top:0.5rem;

margin-bottom:0.5rem;

}

:host >>> .form-group:nth-child(2){

margin:0 1rem;

}

:host >>> .form-inline{

flex:1;

-webkit-box-flex:1;

}

:host >>> .modal-dialog{

margin-top:15%;

}

.form-inline button{

margin-left:0.5rem;

}

`],

 

templateUrl: './wrOrgB-management.component.html'

})

export class WrOrgBMgmtComponent implements OnInit, OnDestroy {

private resourceUrl = `${API_URL}/api/addvB`;

private resourceOrgUrl = `${API_URL}/api/wrOrgB`;

msgs:Message[];

items: MenuItem[];

treeNodes: TreeNode[];

selectedFile: TreeNode;

wrOrgBs: WrOrgB[];

wrOrgB: WrOrgB = new WrOrgB();

error: any;

success: any;

eventSubscriber: Subscription;

itemsPerPage: any = ITEMS_PER_PAGE; // 讀取配置，每頁顯示多少條

page: any = 0; // 默認顯示第一頁

sortBy: any; // 排序

totalRecords: number; // 總頁數

loading: boolean;

// 查詢條件

query: any = {};

selectedNode: TreeNode;

selectedOrgs: any = null;

queryOrg:any = {};

options: any;

activeModal;

constructor(

private http: Http,

private wrOrgBService: WrOrgBService,

private alertService: AlertService, // 錯誤提示相關的service

private principal: Principal, // 權限驗證

private eventManager: EventManager // 事件管理

) {}

ngOnInit() {

// this.principal.identity().then((account) => {

// this.currentAccount = account;

// this.loadAll();

this.query.parentCode="500153000000";

this.query.includeParentSelf = true;

//this.loadTree();

this.registerChangeInWrOrgBs();

// });

}

 

/**

* 根據查詢條件加載列表

*/

loadTree () {

this.loading = true;

let body = this.query;

let headers = {

headers: new Headers({

})

};

this.http.post(`${this.resourceUrl}/page`, body, headers)

.subscribe(

(res) => this.onSuccess(res.json(), res.headers),

(res) => this.onError(res.json())

);

}

onSuccess(data, headers) {

this.loading = false;

if (+data.responseCode !== 100) {

this.alertService.error(data.messageList[0].key, data.messageList[0].message, null);

return;

}

//若是查詢條件的parentCode不爲空，則表示是加載下級

if(this.query.parentCode != null && this.selectedNode != null) {

this.selectedNode.children = data.treeList;

//清除查詢條件

this.query.parentCode = null;

}

else {

this.treeNodes = data.treeList;

this.selectedNode = data.treeList[0];

//設置加載機構的查詢條件

this.queryOrg.addvcdPath = this.selectedNode.data.addvcdPath;

//加載組織機構

this.loadOrg();

}

}

 

/**

* 根據查詢條件加載列表

*/

loadOrg () {

this.loading = true;

let body = this.queryOrg;

let headers = {

headers: new Headers({

pageIndex: this.page,

pageSize: this.itemsPerPage,

orderBy: this.sortBy

})

};

this.http.post(`${this.resourceOrgUrl}/page`, body, headers)

.subscribe(

(res) => this.onSuccessOrg(res.json(), res.headers),

(res) => this.onError(res.json())

);

}

onSuccessOrg(data, headers) {

this.loading = false;

if (+data.responseCode !== 100) {

this.alertService.error(data.messageList[0].key, data.messageList[0].message, null);

return;

}

 

this.wrOrgBs = data.i0202F0004RespL001List;

this.totalRecords = data.pageControllerInfo.totalRecordCount;

}

search() {

//清除掉以前選擇的數據

this.selectedOrgs = null;

this.page = 0;

this.loadOrg();

}

lazyLoad(e) {

//清除掉以前選擇的數據

this.selectedOrgs = null;

this.sortBy = e.sortField ? e.sortField + ' ' + (e.sortOrder === 1 ? 'asc' : 'desc') : null;

this.page = e.first / e.rows;

//若是樹還沒加載，則先加載樹

if(this.treeNodes == null) {

//先加載樹節點

this.loadTree();

}

else{

this.loadOrg();

}

}

clickTree() {

//設置加載機構的查詢條件

this.queryOrg.addvcdPath = this.selectedNode.data.addvcdPath;

//若是當前節點的級別是第5級或下面已經有子節點了，則不加載子節點

if(this.selectedNode.children.length == 0 && this.needChildren(this.selectedNode)) {

this.query.parentCode = this.selectedNode.data.value;

//清除include條件

this.query.includeParentSelf = null;

this.loadTree();

}

//加載組織機構樹

this.loadOrg();

}

/**

* 獲取當前node的節點level

* 判斷邏輯，若是當前節點的最後一位不爲0，表示是村級

* @param node 樹節點

*/

private needChildren(node : TreeNode) : Boolean {

let addvCode: string = node.data.value;

if(addvCode.substr(addvCode.length - 1) != "0") {

return false;

}

return true;

}

setSelectedTree(){

if(this.selectedNode && this.selectedNode.data && this.selectedNode.data.value.length == 36){

this.items = [

{label: '新增', icon: 'fa-plus', routerLink: ['/', { outlets: { popup: 'wrOrgB-new/'+(this.selectedNode ? this.selectedNode.data.value : '0')+'/create' } }]},

{label: '修改', icon: 'fa-edit', routerLink:['/', { outlets: { popup: 'wrOrgB-edit/'+ (this.selectedNode ? this.selectedNode.data.value : '0') + '/edit'} }]},

{label: '刪除', icon: 'fa-remove', routerLink:['/', { outlets: { popup: 'wrOrgB/'+ (this.selectedNode ? this.selectedNode.data.value : '0') + '/delete'} }]}

];

}else if(this.selectedNode && this.selectedNode.data && this.selectedNode.data.value.length == 12) {

this.items = [

{label: '新增', icon: 'fa-plus', routerLink: ['/', { outlets: { popup: 'wrOrgB-new/'+(this.selectedNode ? this.selectedNode.data.value : '0')+'/create' } }]}

];

}

}

 

// clickTree(){

// this.wrOrgBService.search((this.selectedFile ? this.selectedFile.data : this.wrOrgB.orgId)).subscribe(wrOrgB => this.wrOrgB = wrOrgB);

// }

ngOnDestroy() {

this.eventManager.destroy(this.eventSubscriber);

}

/**

* 訂閱一個事件，主要用於新增、刪除、更新完成後從新加載列表

*/

registerChangeInWrOrgBs() {

this.eventSubscriber = this.eventManager.subscribe('wrOrgBListModification', (response) => this.loadOrg());

}

/**

* 根據查詢條件加載列表

*/

// loadAll () {

// this.loading = true;

// this.wrOrgB = new WrOrgB();

// // TODO 除了分頁排序等，還須要把搜索字段加進去

// this.wrOrgBService.query({

// page: this.page,

// size: this.itemsPerPage,

// sortBy: this.sortBy,

// query: this.query

// }).subscribe(

// (res: Response) => this.onSuccess(res.json(), res.headers),

// (res: Response) => this.onError(res.json())

// );

// }

/**

* dataTable進行排序、分頁、查詢都會觸發onLazyLoad事件

* @param e 參數包含分頁信息、排序信息、查詢信息等

*/

// lazyLoad (e) {

// console.log(e);

// this.sortBy = e.sortField ? e.sortField + ' ' + (e.sortOrder === 1 ? 'asc' : 'desc') : null;

// this.page = e.first / e.rows;

// this.loadAll();

// }

/**

* 搜索

*/

// search () {

// // TODO 這裏搜索的時候須要組織搜索條件

// this.page = 0; // 搜索的時候重置分頁

// this.loadAll();

// }

// /**

// * 列表查詢成功以後的回調

// * @param data 返回的數據

// * @param headers 響應headers

// */

// private onSuccess(data, headers) {

// if (+data.responseCode !== 100) {

// this.alertService.error(data.messageList[0].key, data.messageList[0].message, null); // TODO 須要顯示多個message

// this.loading = false;

// return;

// }

// //this.wrOrgBs = data.i0202F0004RespL001List;

// //this.totalRecords = data.pageControllerInfo.totalRecordCount;

// this.loading = false;

// this.treeNodes = data.treeList;

// this.wrOrgBService.search((data.treeList ? data.treeList[0].data : '0')).subscribe(wrOrgB => this.wrOrgB = wrOrgB);

// this.selectedFile = null;

// }

/**

* 失敗以後的回調

* @param error 錯誤

*/

private onError(error) {

this.alertService.error(error.error, error.message, null);

}

}

3.html 頁面

 

<!--

/**

* 描述:[TB_WR_ORG_B][機構基本信息表（區環保局、水務局、河長辦）]表的列表頁面

* @version:1.0.0

* @author: zb

* @建立時間: 2017-05-24 19:43:21

*/

-->

<div>

<h2 style="margin-top: 0.5rem;">

<span>機構信息</span>

</h2>

<jhi-alert></jhi-alert>

<div class="data-table-wrap">

<p-tree class="areaTree" [value]="treeNodes" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="clickTree()"

[contextMenu]="cm" (onNodeContextMenuSelect)="setSelectedTree()"></p-tree>

<p-contextMenu #cm [model]="items"></p-contextMenu>

<!--搜索loading-->

<div class="data-table-loading" *ngIf="loading">

<i class="loading"></i>

</div>

<div class="data-table-search">

<!--搜索-->

<form class="form-inline" (ngSubmit)="search()">

<div class="form-group">

<label>機構名稱：</label>

<input type="text" class="form-control" name="orgNm" [(ngModel)]="queryOrg.orgNm">

</div>

<button type="submit" class="btn btn-primary">搜索</button>

</form>

<button class="btn btn-primary float-right" [routerLink]="['/', { outlets: { popup: 'wrOrgB-new/'+(this.selectedNode ? this.selectedNode.data.value : '0')+'/create'} }]">

<span class="fa fa-plus"></span> <span>新增 </span>

</button>

</div>

<!--#dt引用，rows:每頁顯示多少條，paginator:是否分頁，lazy:是否lazyload，totalRecords:總條數-->

<p-dataTable #dt [value]="wrOrgBs" [lazy]="true" [rows]="itemsPerPage" [paginator]="true" [totalRecords]="totalRecords" emptyMessage="沒有記錄"

class="areaTable" [(selection)]="selectedOrgs" (onLazyLoad)="lazyLoad($event)">

<p-column field="orgId" header="機構ID" [sortable]="true" [hidden]="true"></p-column>

<p-column field="orgP" header="上級機構ID" [sortable]="true" [hidden]="true"></p-column>

<p-column field="orgPNm" header="上級機構" [sortable]="true" [style]="{'width':'300px'}"></p-column>

<p-column field="orgNm" header="機構名稱" [sortable]="true" [style]="{'width':'300px'}"></p-column>

<!--<p-column field="provinceName" header="市"></p-column>

<p-column field="countyName" header="縣/區"></p-column>

<p-column field="townName" header="鄉/鎮"></p-column>

<p-column field="villageName" header="村"></p-column>-->

<p-column field="addvnm" header="行政區劃" styleClass="textOverflow">

<template let-col let-addv="rowData" pTemplate="body">

{{(addv.provinceName==null?'':addv.provinceName) + (addv.countyName==null?'':addv.countyName) +

(addv.townName==null?'':addv.townName)+ (addv.villageName==null?'':addv.villageName)}}

</template>

</p-column>

<p-column styleClass="col-button" header="操做" [style]="{'width':'350px'}">

<template let-wrOrg="rowData" pTemplate="body">

<button type="button" pButton label="新增下級" [routerLink]="['/', { outlets: { popup: 'wrOrgB-new/'+wrOrg.orgId+'/create'} }]"></button>

<button type="button" pButton label="編輯" [routerLink]="['/', { outlets: { popup: 'wrOrgB-edit/'+ wrOrg.orgId + '/edit'} }]"></button>

<button type="button" pButton label="刪除" [routerLink]="['/', { outlets: { popup: 'wrOrgB/'+ wrOrg.orgId+ '/delete'} }]"></button>

</template>

</p-column>

</p-dataTable>

</div>

</div>