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>