test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-01 19:48:17 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat(module: tree): Add Selectable & SelectableExpression to mark whether TreeNode can be selected or not. (#4229)

Browse Source
This commit is contained in:
pankey888 2024-09-24 12:36:17 +08:00 committed by GitHub
parent e73f5d223d
commit 5a59f87d25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 184 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/tree-select/TreeSelect.razor
View File

@ -43,6 +43,7 @@
ChildrenExpression="ChildrenExpression"
DisabledExpression="DisabledExpression"
CheckableExpression="CheckableExpression"
SelectableExpression="SelectableExpression"
DefaultExpandAll="TreeDefaultExpandAll"
DefaultExpandParent="TreeDefaultExpandParent"
DefaultExpandedKeys="TreeDefaultExpandedKeys"

6
components/tree-select/TreeSelect.razor.cs
View File

@ -256,6 +256,12 @@ namespace AntDesign
[Parameter]
public Func<TreeNode<TItem>, bool> CheckableExpression { get; set; }
/// <summary>
/// Specifies a method to return a selectable node
/// </summary>
[Parameter]
public Func<TreeNode<TItem>, bool> SelectableExpression { get; set; }
/// <summary>
/// (Controlled) expands the specified tree node
/// </summary>

6
components/tree/Tree.razor.cs
View File

@ -658,6 +658,12 @@ namespace AntDesign
[Parameter]
public Func<TreeNode<TItem>, bool> CheckableExpression { get; set; }
/// <summary>
/// Specifies a method to return a selectable node
/// </summary>
[Parameter]
public Func<TreeNode<TItem>, bool> SelectableExpression { get; set; }
#endregion DataBind
#region Event

16
components/tree/TreeNode.razor.cs
View File

@ -211,7 +211,7 @@ namespace AntDesign
[PublicApi("1.0.0")]
public void SetSelected(bool value)
{
if (!TreeComponent.Selectable) return;
if (!Selectable) return;
DoSelect(value, false, true);
TreeComponent.UpdateSelectedKeys();
}
@ -512,6 +512,15 @@ namespace AntDesign
set => _checkable = value;
}
private bool _selectable = true;
[Parameter]
public bool Selectable
{
get => TreeComponent.Selectable && _selectable;
set => _selectable = value;
}
internal bool Indeterminate { get; set; }
private bool _disableCheckbox;
@ -1083,7 +1092,10 @@ namespace AntDesign
DoCheck(isChecked, false, false);
}
if (TreeComponent.Selectable)
if (TreeComponent.SelectableExpression != null)
Selectable = TreeComponent.SelectableExpression(this);
if (Selectable)
{
var isSelected = false;
if (_selected)

5
site/AntDesign.Docs.Build.CLI/KnownChineseTranslations.json
View File

@ -4149,7 +4149,10 @@
"Translated": "树的数据源。可以是任何自定义对象类型的列表，方法是提供用于获取 children、leafs、titles 等的表达式。使用 this 或 <code>AntDesign.TreeSelect'2.ChildContent</code>"
},
"Specifies a method to return a checkable node": {
"Translated": "指定返回可检查节点的方法"
"Translated": "指定返回可勾选节点的方法"
},
"Specifies a method to return a selectable node": {
"Translated": "指定返回可选择节点的方法"
},
"Check or uncheck the node by click TreeNodeTitle if checkable": {
"Translated": "如果可选中，请单击 TreeNodeTitle 来检查或取消选中节点"

83
site/AntDesign.Docs/Demos/Components/Tree/demo/NodeSelectable.razor Normal file
View File

@ -0,0 +1,83 @@
<Tree Style="width:100%;"
DataSource="treeData"
Selectable
ExpandOnClickNode
DefaultExpandAll
ChildrenExpression="node=>node.DataItem.Children"
TitleExpression="node=>node.DataItem.Title"
KeyExpression="node=>node.DataItem.Key"
SelectableExpression="node=>node.DataItem.Type==NodeType.ntEmployeee"
IsLeafExpression="node=>node.DataItem.Children==null">
</Tree>
@code {
Data[] treeData = new Data[]
{
new()
{
Title = "Company",
Key = "1",
Type = NodeType.ntCompany,
Children = new Data[]
{
new()
{
Title = "Department1",
Key = "11",
Type = NodeType.ntDepartment,
Children = new Data[]
{
new()
{
Title = "Tom",
Key = "111",
Type = NodeType.ntEmployeee
},
new()
{
Title = "John",
Key = "112",
Type = NodeType.ntEmployeee
}
}
},
new()
{
Title = "Department2",
Key = "12",
Type = NodeType.ntDepartment,
Children = new Data[]
{
new()
{
Title = "Jim",
Key = "121",
Type = NodeType.ntEmployeee
},
new()
{
Title = "Lili",
Key = "122",
Type = NodeType.ntEmployeee
}
}
}
}
}
};
public enum NodeType
{
ntCompany, ntDepartment, ntEmployeee
}
public class Data : ITreeData<Data>
{
public string Key { get; set; }
public Data Value => this;
public string Title { get; set; }
public NodeType Type { get; set; }
public IEnumerable<Data> Children { get; set; }
}
}

2
site/AntDesign.Docs/Demos/Components/Tree/demo/node-checkable.md
View File

@ -8,7 +8,7 @@ title:
## zh-CN
使用`Checkable="false"`来标记节点不可勾选。
> 注意：也可以使用`CheckableExpression`来动态设置节点是否可选。
> 注意：也可以使用`CheckableExpression`来动态设置节点是否可勾选。
## en-US

16
site/AntDesign.Docs/Demos/Components/Tree/demo/node-selectable.md Normal file
View File

@ -0,0 +1,16 @@
---
order: 11
title:
zh-CN: Node Selectable
en-US: Node Selectable
---
## zh-CN
使用`SelectableExpression`来动态设置节点是否可选择。
> 注意：也可以使用`Selectable="false"`来标记节点不可选择。
## en-US
Use `SelectableExpression` to dynamically set whether a node is selectable.
> Note: You can also use `Selectable="false"` to specify that a node is unselectable.

2
site/AntDesign.Docs/Demos/Components/Tree/doc/index.en-US.md
View File

@ -47,6 +47,7 @@ Almost anything can be represented in a tree structure. Examples include directo
| ChildrenExpression | Specifies a method to return a child node | Func | | |
| DisabledExpression | Specifies a method to return a disabled node | Func | | |
| CheckableExpression | Specifies a method to return a checkable node | Func | | |
| SelectableExpression | Specifies a method to return a selectable node | Func | | |
| DefaultExpandAll | All tree nodes are expanded by default | boolean | false | |
| DefaultExpandParent | The parent node is expanded by default | boolean | false | |
| DefaultExpandedKeys | Expand the specified tree nodes by default | string[] | null | |
@ -114,6 +115,7 @@ Almost anything can be represented in a tree structure. Examples include directo
| Checkable | Checkable | boolean | true | |
| Checked | checked (Supports two-way binding) | boolean | false | |
| DisableCheckbox | | boolean | false | |
| Selectable | Selectable | boolean | true | |
| Selected | selected (Supports two-way binding) | boolean | false | |
| Expanded | expanded (Supports two-way binding) | boolean | false | |
| Title | title | string | false | |

2
site/AntDesign.Docs/Demos/Components/Tree/doc/index.zh-CN.md
View File

@ -48,6 +48,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
| ChildrenExpression | 返回子节点的方法 | Func | | |
| DisabledExpression | 指定一个返回禁用节点的方法 | Func | | |
| CheckableExpression | 指定一个返回可勾选节点的方法 | Func | | |
| SelectableExpression | 指定一个返回可选择节点的方法 | Func | | |
| DefaultExpandAll | 默认展开所有节点 | boolean | false | |
| DefaultExpandParent | 默认展开顶级父节点 | boolean | false | |
| DefaultExpandedKeys | 默认展开的节点 | string[] | null | |
@ -114,6 +115,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
| Checkable | 是否可勾选 | boolean | true | |
| Checked | 是否勾选（支持双向绑定） | boolean | false | |
| DisableCheckbox | 禁用复选框 | boolean | false | |
| Selectable | 是否可选择 | boolean | true | |
| Selected | 是否选中（支持双向绑定） | boolean | false | |
| Expanded | 是否展开（支持双向绑定） | boolean | false | |
| Title | 标题 | string | false | |

28
site/AntDesign.Docs/Demos/Components/TreeSelect/demo/NodeSelectable.razor Normal file
View File

@ -0,0 +1,28 @@
<TreeSelect TItem="string"
ExpandOnClickNode
@bind-Values="@values"
TItemValue="string"
AllowClear
Multiple
TreeDefaultExpandAll>
<TreeNode Title="parent 1" Key="0-0" Selectable="false">
<TreeNode Title="parent 1-0" Key="0-0-0" Selectable="false">
<TreeNode Title="leaf" Key="0-0-0-0" ></TreeNode>
<TreeNode Title="leaf" Key="0-0-0-1" ></TreeNode>
<TreeNode Title="leaf" Key="0-0-0-2" ></TreeNode>
</TreeNode>
<TreeNode Title="parent 1-1" Key="0-0-1" Selectable="false">
<TreeNode Key="0-0-1-0" Title="sss">
<TitleTemplate>
<span style="color: #1890ff; ">sss</span>
</TitleTemplate>
</TreeNode>
</TreeNode>
</TreeNode>
</TreeSelect>
@JsonSerializer.Serialize(values)
@code
{
private IEnumerable<string> values;
}

2
site/AntDesign.Docs/Demos/Components/TreeSelect/demo/node-checkable.md
View File

@ -7,7 +7,7 @@ title:
## zh-CN
使用`CheckableExpression`来动态设置节点是否可选。
使用`CheckableExpression`来动态设置节点是否可勾选。
> 注意：也可以使用`Checkable="false"`来标记节点不可勾选。
## en-US

16
site/AntDesign.Docs/Demos/Components/TreeSelect/demo/node-selectable.md Normal file
View File

@ -0,0 +1,16 @@
---
order: 11
title:
zh-CN: Node Selectable
en-US: Node Selectable
---
## zh-CN
使用`Selectable="false"`来标记节点不可选择。
> 注意：也可以使用`SelectableExpression`来动态设置节点是否可选择。
## en-US
Use `Selectable="false"` to specify that a node is unselectable.
> Note: You can also use `SelectableExpression` to dynamically set whether a node is selectable.

2
site/AntDesign.Docs/Demos/Components/TreeSelect/doc/index.en-US.md
View File

@ -91,6 +91,7 @@ Tree selection control.
| ChildrenExpression | Specifies a method to return a child node | Func | | |
| DisabledExpression | Specifies a method to return a disabled node | Func | | |
| CheckableExpression | Specifies a method to return a checkable node | Func | | |
| SelectableExpression | Specifies a method to return a selectable node | Func | | |
| TreeDefaultExpandAll | All tree nodes are expanded by default | boolean | false | |
| TreeDefaultExpandParent | The parent node is expanded by default | boolean | false | |
| TreeDefaultExpandedKeys | Expand the specified tree nodes by default | string[] | null | |
@ -120,6 +121,7 @@ Tree selection control.
| Checkable | Checkable | boolean | true | |
| Checked | checked (Supports two-way binding) | boolean | false | |
| DisableCheckbox | | boolean | false | |
| Selectable | Selectable | boolean | true | |
| Selected | selected (Supports two-way binding) | boolean | false | |
| Expanded | expanded (Supports two-way binding) | boolean | false | |
| Title | title | string | false | |

2
site/AntDesign.Docs/Demos/Components/TreeSelect/doc/index.zh-CN.md
View File

@ -91,6 +91,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
| ChildrenExpression | 返回子节点的方法 | Func | | |
| DisabledExpression | 指定一个返回禁用节点的方法 | Func | | |
| CheckableExpression | 指定一个返回可勾选节点的方法 | Func | | |
| SelectableExpression | 指定一个返回可选择节点的方法 | Func | | |
| TreeDefaultExpandAll | 默认展开所有节点 | boolean | false | |
| TreeDefaultExpandParent | 默认展开顶级父节点 | boolean | false | |
| TreeDefaultExpandedKeys | 默认展开的节点 | string[] | null | |
@ -120,6 +121,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
| Checkable | 是否可勾选 | boolean | true | |
| Checked | 是否勾选（支持双向绑定） | boolean | false | |
| DisableCheckbox | 禁用复选框 | boolean | false | |
| Selectable | 是否可选择 | boolean | true | |
| Selected | 是否选中（支持双向绑定） | boolean | false | |
| Expanded | 是否展开（支持双向绑定） | boolean | false | |
| Title | 标题 | string | false | |