網(wǎng)站首頁(yè) 編程語(yǔ)言 正文
zorro的11版本
angular11版本
使用場(chǎng)景：
把已經(jīng)組織好的菜單設(shè)置為可以拖拽排序。使用tree來(lái)完成這個(gè)功能
方法思路：
1、選擇正確的組件示例與方法
2、對(duì)拖拽前行為進(jìn)行判斷，不合法的拖拽進(jìn)行阻止
3、對(duì)獲取的數(shù)據(jù)進(jìn)行處理，方便傳給后端
先分步實(shí)現(xiàn)，下面有完整代碼
1、選擇正確的組件示例與方法
使用這兩個(gè)tree示例（結(jié)合使用）
提示：第一個(gè)示例，無(wú)論調(diào)不調(diào)接口，都能完成視覺(jué)上的拖拽，并獲得拖拽前后的數(shù)據(jù)。第二個(gè)示例，拖拽前校驗(yàn)，不符合條件的，阻止拖拽。這里兩個(gè)合用是的效果就是：滿足條件就有拖拽效果，不滿足條件，無(wú)法拖拽（不調(diào)用接口排序時(shí)）
怎么感覺(jué)不使用第二個(gè)也行呢，嗯！！！！！！！！
當(dāng)我不使用拖拽前校驗(yàn)（第二個(gè)）時(shí)，對(duì)拖拽前判斷時(shí)，不好判斷，還是使用吧
代碼：
<nz-tree [nzData]="nodesTree" nzDraggable nzBlockNode
(nzOnDrop)="nzEventTree($event)"
[nzBeforeDrop]="beforeDrop">
</nz-tree>
2、對(duì)拖拽前行為進(jìn)行判斷，不合法的拖拽進(jìn)行阻止
// 子等級(jí)與父等級(jí)級(jí)別不可以改變。只可以改變菜單的排列順序與位置
// 簡(jiǎn)單來(lái)說(shuō)就是，父級(jí)不能拖拽到其他父級(jí)的子級(jí)里。子級(jí)不能拖到外面成為父級(jí)。子級(jí)可以在不同的父級(jí)下拖拽排序。
// 這里有個(gè)特殊的就是：把子級(jí)拖拽到父級(jí)children=0下，這里不好判斷，我寫(xiě)在了第三個(gè)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('父級(jí)間移動(dòng)');
} else if (event.node.level === 1 && event.dragNode.level === 1) {
return this.message.error('子級(jí)間移動(dòng)');
} else if ( event.node.origin.children.length === 1 && event.dragNode.level === 1 && event.node.level === 0 ) {
return this.message.error('將子級(jí)向空的目錄下移動(dòng)');
} else {
return this.message.error('不可移動(dòng)');
}
}-+
beforeDrop(arg: NzFormatBeforeDropEvent): any {
// 要判斷是子級(jí)移動(dòng)還是父級(jí)移動(dòng)
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);
}
}
兩個(gè)函數(shù)代碼中的判斷看似一樣，但解釋已經(jīng)放在代碼里了
3、對(duì)獲取的數(shù)據(jù)進(jìn)行處理，方便傳給后端
數(shù)據(jù)處理結(jié)果：
[
{
父級(jí)id:,
子級(jí)id:,
排序:,
}
]
const afterArr: any = [];
if (event.node.level === 0 && event.dragNode.level === 0) {
// 父級(jí)移動(dòng)
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;
// 子級(jí)移動(dòng)
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 {
// 這里判斷跨域后的父級(jí)有沒(méi)有子級(jí)，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) {
// 當(dāng)拖拽的目標(biāo)對(duì)象為空時(shí)走這個(gè)路
let parentIdAfter = event.node.origin.parentId;
// 子級(jí)移動(dòng)
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 {
// 這里判斷跨域后的父級(jí)有沒(méi)有子級(jí)，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('不可非法移動(dòng)');
}
// 調(diào)用拖拽的接口
let list: any = [];
list = afterArr;
this.organizationService.menutpProsystem({ list }).then((res: any) => {
if (res.code === 200) {
this.message.success('移動(dòng)成功');
} else {
this.message.success('不可非法移動(dòng)');
}
}).catch();
4、完整代碼
<nz-alert nzType="info" nzMessage="特別提示：移動(dòng)時(shí)，藍(lán)色線的長(zhǎng)短代表級(jí)別"></nz-alert>
<br />
<nz-alert nzType="info" nzMessage="提示：子等級(jí)與父等級(jí)級(jí)別不可以改變。只可以改變菜單的排列順序與位置"></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) {
// 父級(jí)移動(dòng)
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;
// 子級(jí)移動(dòng)
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 {
// 這里判斷跨域后的父級(jí)有沒(méi)有子級(jí)，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) {
// 當(dāng)拖拽的目標(biāo)對(duì)象為空時(shí)走這個(gè)路
let parentIdAfter = event.node.origin.parentId;
// 子級(jí)移動(dòng)
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 {
// 這里判斷跨域后的父級(jí)有沒(méi)有子級(jí)，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('不可非法移動(dòng)');
}
// 調(diào)用拖拽的接口
let list: any = [];
list = afterArr;
this.organizationService.menutpProsystem({ list }).then((res: any) => {
if (res.code === 200) {
this.message.success('移動(dòng)成功');
} else {
this.message.success('不可非法移動(dòng)');
}
}).catch();
}
beforeDrop(arg: NzFormatBeforeDropEvent): any {
// 要判斷是子級(jí)移動(dòng)還是父級(jí)移動(dòng)
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
相關(guān)推薦
- 2023-07-25 使用SpringBoot+JWT+MybatisPlus實(shí)現(xiàn)簡(jiǎn)單的登陸狀態(tài)驗(yàn)證
- 2022-06-18 C#實(shí)現(xiàn)無(wú)損壓縮圖片代碼示例_C#教程
- 2023-07-04 Spring AOP講解及實(shí)例
- 2022-04-01 containerd常用命令
- 2022-12-05 Android自定義view實(shí)現(xiàn)側(cè)滑欄詳解_Android
- 2022-03-16 C#?程序通用結(jié)構(gòu)_C#教程
- 2022-07-11 Python字節(jié)碼與程序執(zhí)行過(guò)程詳解_python
- 2022-04-03 Python?八個(gè)數(shù)據(jù)清洗實(shí)例代碼詳解_python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運(yùn)行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過(guò)濾器
- Spring Security概述快速入門(mén)
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串（SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支
提供CDN加速