網站首頁 編程語言 正文
zorro的11版本
angular11版本
使用場景：
把已經組織好的菜單設置為可以拖拽排序。使用tree來完成這個功能
方法思路：
1、選擇正確的組件示例與方法
2、對拖拽前行為進行判斷，不合法的拖拽進行阻止
3、對獲取的數據進行處理，方便傳給后端
先分步實現，下面有完整代碼
1、選擇正確的組件示例與方法
使用這兩個tree示例（結合使用）
提示：第一個示例，無論調不調接口，都能完成視覺上的拖拽，并獲得拖拽前后的數據。第二個示例，拖拽前校驗，不符合條件的，阻止拖拽。這里兩個合用是的效果就是：滿足條件就有拖拽效果，不滿足條件，無法拖拽（不調用接口排序時）
怎么感覺不使用第二個也行呢，嗯！！！！！！！！
當我不使用拖拽前校驗（第二個）時，對拖拽前判斷時，不好判斷，還是使用吧
代碼：
<nz-tree [nzData]="nodesTree" nzDraggable nzBlockNode
(nzOnDrop)="nzEventTree($event)"
[nzBeforeDrop]="beforeDrop">
</nz-tree>
2、對拖拽前行為進行判斷，不合法的拖拽進行阻止
// 子等級與父等級級別不可以改變。只可以改變菜單的排列順序與位置
// 簡單來說就是，父級不能拖拽到其他父級的子級里。子級不能拖到外面成為父級。子級可以在不同的父級下拖拽排序。
// 這里有個特殊的就是：把子級拖拽到父級children=0下，這里不好判斷，我寫在了第三個if里，看客嗎有好的判斷方法的話，告訴我一下，感激不盡
nzEventTree(event: NzFormatEmitEvent | any): void | any {
// this.cdr.markForCheck();
console.log(event);
if (event.node.level === 0 && event.dragNode.level === 0) {
return this.message.error('父級間移動');
} else if (event.node.level === 1 && event.dragNode.level === 1) {
return this.message.error('子級間移動');
} else if ( event.node.origin.children.length === 1 && event.dragNode.level === 1 && event.node.level === 0 ) {
return this.message.error('將子級向空的目錄下移動');
} else {
return this.message.error('不可移動');
}
}-+
beforeDrop(arg: NzFormatBeforeDropEvent): any {
// 要判斷是子級移動還是父級移動
if (arg.node.level === 0 && arg.dragNode.level === 0 && arg.pos !== 0) {
return of(true);
} else if (arg.node.level === 1 && arg.dragNode.level === 1) {
return of(true);
} else if (arg.node.level === 0 && arg.dragNode.level === 1 && arg.pos === 0) {
return of(true);
} else {
return of(false);
}
}
兩個函數代碼中的判斷看似一樣，但解釋已經放在代碼里了
3、對獲取的數據進行處理，方便傳給后端
數據處理結果：
[
{
父級id:,
子級id:,
排序:,
}
]
const afterArr: any = [];
if (event.node.level === 0 && event.dragNode.level === 0) {
// 父級移動
console.log(event.dragNode.service.rootNodes);
let arr: any = [];
arr = event.dragNode.service.rootNodes;
arr.forEach((element: any, i: number) => {
const obj: any = {};
obj.id = element.key;
obj.parentId = 0;
obj.sort = i + 2;
afterArr.push(obj);
});
console.log(afterArr);
} else if (event.node.level === 1 && event.dragNode.level === 1) {
let parentIdAfter = event.node.origin.parentId;
// 子級移動
if (event.node.origin.parentId === event.dragNode.origin.parentId) {
const arr: any = event.dragNode.parentNode.origin;
arr.children.forEach((element: any, i: number) => {
const obj: any = {};
obj.id = element.key;
obj.parentId = parentIdAfter;
obj.sort = i;
afterArr.push(obj);
});
this.cdr.markForCheck();
} else {
// 這里判斷跨域后的父級有沒有子級，parentNode為不為空
let arr: any;
if (event.node.parentNode === null) {
arr = event.node.origin;
parentIdAfter = event.node.key;
} else {
arr = event.node.parentNode.origin;
}
arr.children.forEach((element: any, i: number) => {
const obj: any = {};
obj.id = element.key;
obj.parentId = parentIdAfter;
obj.sort = i;
afterArr.push(obj);
});
this.cdr.markForCheck();
}
} else if ( event.node.origin.children.length === 1 && event.dragNode.level === 1 && event.node.level === 0) {
// 當拖拽的目標對象為空時走這個路
let parentIdAfter = event.node.origin.parentId;
// 子級移動
if (event.node.origin.parentId === event.dragNode.origin.parentId) {
const arr: any = event.dragNode.parentNode.origin;
arr.children.forEach((element: any, i: number) => {
const obj: any = {};
obj.id = element.key;
obj.parentId = parentIdAfter;
obj.sort = i;
afterArr.push(obj);
});
this.cdr.markForCheck();
} else {
// 這里判斷跨域后的父級有沒有子級，parentNode為不為空
let arr: any;
if (event.node.parentNode === null) {
arr = event.node.origin;
parentIdAfter = event.node.key;
} else {
arr = event.node.parentNode.origin;
}
arr.children.forEach((element: any, i: number) => {
const obj: any = {};
obj.id = element.key;
obj.parentId = parentIdAfter;
obj.sort = i;
afterArr.push(obj);
});
this.cdr.markForCheck();
}
} else {
return this.message.error('不可非法移動');
}
// 調用拖拽的接口
let list: any = [];
list = afterArr;
this.organizationService.menutpProsystem({ list }).then((res: any) => {
if (res.code === 200) {
this.message.success('移動成功');
} else {
this.message.success('不可非法移動');
}
}).catch();
4、完整代碼
<nz-alert nzType="info" nzMessage="特別提示：移動時，藍色線的長短代表級別"></nz-alert>
<br />
<nz-alert nzType="info" nzMessage="提示：子等級與父等級級別不可以改變。只可以改變菜單的排列順序與位置"></nz-alert>
<nz-tree [nzData]="nodesTree" nzDraggable nzBlockNode (nzOnDrop)="nzEventTree($event)" [nzBeforeDrop]="beforeDrop"> </nz-tree>
<br />
nzEventTree(event: NzFormatEmitEvent | any): void | any {
this.cdr.markForCheck();
const afterArr: any = [];
if (event.node.level === 0 && event.dragNode.level === 0) {
// 父級移動
console.log(event.dragNode.service.rootNodes);
let arr: any = [];
arr = event.dragNode.service.rootNodes;
arr.forEach((element: any, i: number) => {
const obj: any = {};
obj.id = element.key;
obj.parentId = 0;
obj.sort = i + 2;
afterArr.push(obj);
});
console.log(afterArr);
} else if (event.node.level === 1 && event.dragNode.level === 1) {
let parentIdAfter = event.node.origin.parentId;
// 子級移動
if (event.node.origin.parentId === event.dragNode.origin.parentId) {
const arr: any = event.dragNode.parentNode.origin;
arr.children.forEach((element: any, i: number) => {
const obj: any = {};
obj.id = element.key;
obj.parentId = parentIdAfter;
obj.sort = i;
afterArr.push(obj);
});
this.cdr.markForCheck();
} else {
// 這里判斷跨域后的父級有沒有子級，parentNode為不為空
let arr: any;
if (event.node.parentNode === null) {
arr = event.node.origin;
parentIdAfter = event.node.key;
} else {
arr = event.node.parentNode.origin;
}
arr.children.forEach((element: any, i: number) => {
const obj: any = {};
obj.id = element.key;
obj.parentId = parentIdAfter;
obj.sort = i;
afterArr.push(obj);
});
this.cdr.markForCheck();
}
} else if ( event.node.origin.children.length === 1 && event.dragNode.level === 1 && event.node.level === 0) {
// 當拖拽的目標對象為空時走這個路
let parentIdAfter = event.node.origin.parentId;
// 子級移動
if (event.node.origin.parentId === event.dragNode.origin.parentId) {
const arr: any = event.dragNode.parentNode.origin;
arr.children.forEach((element: any, i: number) => {
const obj: any = {};
obj.id = element.key;
obj.parentId = parentIdAfter;
obj.sort = i;
afterArr.push(obj);
});
this.cdr.markForCheck();
} else {
// 這里判斷跨域后的父級有沒有子級，parentNode為不為空
let arr: any;
if (event.node.parentNode === null) {
arr = event.node.origin;
parentIdAfter = event.node.key;
} else {
arr = event.node.parentNode.origin;
}
arr.children.forEach((element: any, i: number) => {
const obj: any = {};
obj.id = element.key;
obj.parentId = parentIdAfter;
obj.sort = i;
afterArr.push(obj);
});
this.cdr.markForCheck();
}
} else {
return this.message.error('不可非法移動');
}
// 調用拖拽的接口
let list: any = [];
list = afterArr;
this.organizationService.menutpProsystem({ list }).then((res: any) => {
if (res.code === 200) {
this.message.success('移動成功');
} else {
this.message.success('不可非法移動');
}
}).catch();
}
beforeDrop(arg: NzFormatBeforeDropEvent): any {
// 要判斷是子級移動還是父級移動
if (arg.node.level === 0 && arg.dragNode.level === 0 && arg.pos !== 0) {
return of(true);
} else if (arg.node.level === 1 && arg.dragNode.level === 1) {
return of(true);
} else if (arg.node.level === 0 && arg.dragNode.level === 1 && arg.pos === 0) {
return of(true);
} else {
return of(false);
}
}
原文鏈接：https://blog.csdn.net/weixin_45158253/article/details/122094371
相關推薦
- 2022-12-12 Kotlin字節碼層探究構造函數與成員變量和init代碼塊執行順序_Android
- 2022-09-01 python中的生成器、迭代器、裝飾器詳解_python
- 2022-06-16 zap接收gin框架默認的日志并配置日志歸檔示例_Golang
- 2023-06-17 Hugo?Config模塊構建實現源碼剖析_Golang
- 2022-09-08 python輾轉相除法求最大公約數和最小公倍數的實現_python
- 2022-09-24 ASP.NET?MVC使用jQuery?Template實現批量更新_實用技巧
- 2022-08-23 自學python求已知DNA模板的互補DNA序列_python
- 2022-11-29 redis配置文件詳解
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速