Skip to content

Commit 0b469ba

Browse files
ArgoZhangArgoZhang
authored
doc(CustomerFilter): update ShowFilterHeader sample code (#6627)
* refactor: 表头过滤更新示例 * doc: 更新自定义过滤组件示例 * refactor: 增加默认参数 * doc: 更新示例
1 parent ffaf795 commit 0b469ba

File tree

5 files changed

+49
-16
lines changed

5 files changed

+49
-16
lines changed

‎src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@
22

33
@if (IsHeaderRow)
44
{
5-
5+
<Select Items="@_items" @bind-Value="@_value" IsUseDefaultItemWhenValueIsNull="true" IsPopover="true"
6+
ShowLabel="false" SkipValidate="true" OnSelectedItemChanged="_ => OnFilterAsync()"></Select>
67
}
78
else
89
{
9-
<Select Items="@_items" @bind-Value="@Value"></Select>
10+
<Select Items="@_items" @bind-Value="@_value" IsUseDefaultItemWhenValueIsNull="true" IsPopover="true"></Select>
1011
}
12+
13+

‎src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor.cs‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,45 @@
33
// See the LICENSE file in the project root for more information.
44
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
55

6+
using BootstrapBlazor.Server.Components.Samples.Table;
7+
68
namespace BootstrapBlazor.Server.Components.Components;
79

810
/// <summary>
9-
///
11+
/// CustomerFilter 组件示例代码
1012
/// </summary>
1113
public partial class CustomerFilter
1214
{
13-
private int? Value;
15+
[Inject]
16+
[NotNull]
17+
private IStringLocalizer<TablesFilter>? TableFilterLocalizer { get; set; }
18+
19+
private int? _value;
1420

15-
private readonly IEnumerable<SelectedItem> _items = new SelectedItem[]
21+
private List<SelectedItem> _items = [];
22+
23+
/// <summary>
24+
/// <inheritdoc />
25+
/// </summary>
26+
protected override void OnInitialized()
1627
{
17-
new() { Value = "", Text = "请选择 ..." },
18-
new() { Value = "10", Text = "大于 10" },
19-
new() { Value = "50", Text = "大于 50" },
20-
new() { Value = "80", Text = "大于 80" }
21-
};
28+
base.OnInitialized();
29+
30+
_items =
31+
[
32+
new SelectedItem { Value = "", Text = TableFilterLocalizer["CustomerFilterItem1"] },
33+
new SelectedItem { Value = "10", Text = TableFilterLocalizer["CustomerFilterItem2"] },
34+
new SelectedItem { Value = "50", Text = TableFilterLocalizer["CustomerFilterItem3"] },
35+
new SelectedItem { Value = "80", Text = TableFilterLocalizer["CustomerFilterItem4"] }
36+
];
37+
}
2238

2339
/// <summary>
2440
/// 重置过滤条件方法
2541
/// </summary>
2642
public override void Reset()
2743
{
28-
Value = null;
44+
_value = null;
2945
StateHasChanged();
3046
}
3147

@@ -36,12 +52,12 @@ public override void Reset()
3652
public override FilterKeyValueAction GetFilterConditions()
3753
{
3854
var filter = new FilterKeyValueAction();
39-
if (Value != null)
55+
if (_value != null)
4056
{
4157
filter.Filters.Add(new FilterKeyValueAction()
4258
{
4359
FieldKey = FieldKey,
44-
FieldValue = Value.Value,
60+
FieldValue = _value.Value,
4561
FilterAction = FilterAction.GreaterThan
4662
});
4763
}

‎src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,13 @@
8888
<TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true" />
8989
<TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true" />
9090
<TableColumn @bind-Field="@context.Education" Width="100" Sortable="true" Filterable="true" />
91-
<TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" Filterable="true" DefaultSort="true" DefaultSortOrder="@SortOrder.Desc" />
91+
<TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" Filterable="true">
92+
<FilterTemplate>
93+
<FilterProvider ShowMoreButton="false">
94+
<CustomerFilter></CustomerFilter>
95+
</FilterProvider>
96+
</FilterTemplate>
97+
</TableColumn>
9298
</TableColumns>
9399
</Table>
94100
</DemoBlock>

‎src/BootstrapBlazor.Server/Locales/en-US.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5703,7 +5703,11 @@
57035703
"SetFilterInCodeIntro": "Example shows how to set filters through code",
57045704
"SetFilterInCodeButtonText1": "Name contains 01",
57055705
"SetFilterInCodeButtonText2": "Reset All Filter",
5706-
"TablesFilterTemplateDescription": "<p><code>The FilterTemplate</code> type is <code>RenderFragment</code> <span>its value is a custom component, and the component must inherit</span> <code>the filterBase</code> In this case, the last column in this case<b>, the Quantity column</b>, uses the <code>custom component by filtering the template CustomerFilter</code> <a href=\"{0}\" target=\"_blank\">[portal] CustomerFilter component source code</a></p><p class=\"code-label\">Notes:</p><ul class=\"ul-demo\"><li>Custom filter components are wrapped with <code>FilterProvider</code>, and <code>FilterProvider</code> must be under the <code>FilterTemplate</code> node</li><li>Filters can be fine-tuned through the parameters of the <code>FilterProvider</code> component; for example, by setting <code>ShowMoreButton</code> to control whether the <b>+ -</b> symbol is displayed</li></ul-demo>"
5706+
"TablesFilterTemplateDescription": "<p><code>The FilterTemplate</code> type is <code>RenderFragment</code> <span>its value is a custom component, and the component must inherit</span> <code>the filterBase</code> In this case, the last column in this case<b>, the Quantity column</b>, uses the <code>custom component by filtering the template CustomerFilter</code> <a href=\"{0}\" target=\"_blank\">[portal] CustomerFilter component source code</a></p><p class=\"code-label\">Notes:</p><ul class=\"ul-demo\"><li>Custom filter components are wrapped with <code>FilterProvider</code>, and <code>FilterProvider</code> must be under the <code>FilterTemplate</code> node</li><li>Filters can be fine-tuned through the parameters of the <code>FilterProvider</code> component; for example, by setting <code>ShowMoreButton</code> to control whether the <b>+ -</b> symbol is displayed</li></ul-demo>",
5707+
"CustomerFilterItem1": "All",
5708+
"CustomerFilterItem2": "Greater than 10",
5709+
"CustomerFilterItem3": "Greater than 50",
5710+
"CustomerFilterItem4": "Greater than 80"
57075711
},
57085712
"BootstrapBlazor.Server.Components.Samples.Table.TablesFixedHeader": {
57095713
"TablesFixedHeaderTitle": "Fixed header function",

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5704,7 +5704,11 @@
57045704
"SetFilterInCodeIntro": "示例展示如何通过代码设置过滤条件",
57055705
"SetFilterInCodeButtonText1": "名称包含01",
57065706
"SetFilterInCodeButtonText2": "重置条件",
5707-
"TablesFilterTemplateDescription": "<p><code>FilterTemplate</code> 类型为 <code>RenderFragment</code> <span>其值为自定义组件，组件必须继承</span> <code>FilterBase</code> 本例中最后一列 <b>数量列</b> 通过筛选模板使用自定义组件 <code>CustomerFilter</code> <a href=\"{0}\" target=\"_blank\">[传送门] CustomerFilter 组件源码</a></p><p class=\"code-label\">注意事项：</p><ul class=\"ul-demo\"><li>自定义过滤组件使用 <code>FilterProvider</code> 包裹，<code>FilterProvider</code>必须在 <code>FilterTemplate</code> 节点下</li><li>通过 <code>FilterProvider</code> 组件的参数可微调过滤器；例如通过设置 <code>ShowMoreButton</code> 控制是否显示 <b>+ -</b> 符号</li></ul-demo>"
5707+
"TablesFilterTemplateDescription": "<p><code>FilterTemplate</code> 类型为 <code>RenderFragment</code> <span>其值为自定义组件，组件必须继承</span> <code>FilterBase</code> 本例中最后一列 <b>数量列</b> 通过筛选模板使用自定义组件 <code>CustomerFilter</code> <a href=\"{0}\" target=\"_blank\">[传送门] CustomerFilter 组件源码</a></p><p class=\"code-label\">注意事项：</p><ul class=\"ul-demo\"><li>自定义过滤组件使用 <code>FilterProvider</code> 包裹，<code>FilterProvider</code>必须在 <code>FilterTemplate</code> 节点下</li><li>通过 <code>FilterProvider</code> 组件的参数可微调过滤器；例如通过设置 <code>ShowMoreButton</code> 控制是否显示 <b>+ -</b> 符号</li></ul-demo>",
5708+
"CustomerFilterItem1": "全部",
5709+
"CustomerFilterItem2": "大于 10",
5710+
"CustomerFilterItem3": "大于 50",
5711+
"CustomerFilterItem4": "大于 80"
57085712
},
57095713
"BootstrapBlazor.Server.Components.Samples.Table.TablesFixedHeader": {
57105714
"TablesFixedHeaderTitle": "固定表头功能",

0 commit comments

Comments
 (0)