-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(module:tree-select): add nzSearchFunc input function
- Loading branch information
yejunqing
committed
Dec 30, 2024
1 parent
9607e11
commit 03db60c
Showing
3 changed files
with
105 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
--- | ||
order: 8 | ||
title: | ||
zh-CN: 定制搜索逻辑 | ||
en-US: customize nzSearchFunc | ||
--- | ||
|
||
## zh-CN | ||
|
||
可指定搜索逻辑 | ||
比如根据自定义数据进行匹配 | ||
输入1-6个s字符查看效果 | ||
|
||
## en-US | ||
|
||
You can specify search logic, such as matching against custom data | ||
Enter 1-6 s characters to see the effect | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
import { Component } from '@angular/core'; | ||
import { FormsModule } from '@angular/forms'; | ||
|
||
import { NzTreeNodeOptions } from 'ng-zorro-antd/core/tree'; | ||
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; | ||
|
||
@Component({ | ||
selector: 'nz-demo-tree-select-customized-search', | ||
imports: [FormsModule, NzTreeSelectModule], | ||
template: ` | ||
<nz-tree-select | ||
style="width: 250px" | ||
[(ngModel)]="value" | ||
[nzNodes]="nodes" | ||
[nzHideUnMatched]="true" | ||
(ngModelChange)="onChange($event)" | ||
nzShowSearch | ||
[nzSearchFunc]="nzSearchFunc" | ||
nzCheckable | ||
nzPlaceHolder="Please select" | ||
></nz-tree-select> | ||
` | ||
}) | ||
export class NzDemoTreeSelectCustomizedSearchComponent { | ||
value: string[] = ['0-0-0']; | ||
readonly nodes = [ | ||
{ | ||
title: 'Node1', | ||
value: '0-0', | ||
key: '0-0', | ||
children: [ | ||
{ | ||
title: 'Child Node1', | ||
value: '0-0-0', | ||
key: '0-0-0', | ||
isLeaf: true, | ||
searchedText: 'ss' | ||
} | ||
] | ||
}, | ||
{ | ||
title: 'Node2', | ||
value: '0-1', | ||
key: '0-1', | ||
children: [ | ||
{ | ||
title: 'Child Node3', | ||
value: '0-1-0', | ||
key: '0-1-0', | ||
isLeaf: true, | ||
searchedText: 'sss' | ||
}, | ||
{ | ||
title: 'Child Node4', | ||
value: '0-1-1', | ||
key: '0-1-1', | ||
isLeaf: true, | ||
searchedText: 'ssss' | ||
}, | ||
{ | ||
title: 'Child Node5', | ||
value: '0-1-2', | ||
key: '0-1-2', | ||
isLeaf: true, | ||
searchedText: 'sssss' | ||
} | ||
] | ||
} | ||
]; | ||
|
||
nzSearchFunc = (inputValue: string, node: NzTreeNodeOptions): boolean => { | ||
const nodeStr = `${node.title} ${node.searchedText}`; | ||
node.isMatched = nodeStr.indexOf(inputValue) >= 0; | ||
return node.isMatched; | ||
}; | ||
|
||
onChange($event: string[]): void { | ||
console.log($event); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters