Skip to content

fix(Table): line no support SortableList #6045

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 17, 2025
Merged

fix(Table): line no support SortableList #6045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
063df4a
fix: 修复拖动导致不更新问题
ArgoZhang May 17, 2025
e651062
doc: 更新示例
ArgoZhang May 17, 2025
4d73dde
chore: bump version 9.6.4-beta02
ArgoZhang May 17, 2025
2a6a425
chore: bump version 9.6.4-beta02
ArgoZhang May 17, 2025
5faf52e
chore: bump version 9.6.4-beta02
ArgoZhang May 17, 2025
63b153d
chore: bump version 9.6.3-beta01
ArgoZhang May 17, 2025
e551c2e
test: 更新单元测试
ArgoZhang May 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,8 +186,8 @@
<DemoBlock Title="@Localizer["SortableListTableTitle"]"
Introduction="@Localizer["SortableListTableIntro"]"
Name="Table">
<SortableList Option="_optionTable">
<Table TItem="Foo" Items="@Items.Take(3)" IsStriped="true">
<SortableList Option="_optionTable" OnUpdate="OnUpdateTable">
<Table TItem="Foo" Items="@Items" IsStriped="true" ShowLineNo="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" />
Expand Down
10 changes: 10 additions & 0 deletions src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,16 @@ protected override void OnInitialized()
AddItems3 = Foo.GenerateFoo(FooLocalizer, 12).Skip(8).ToList();
}

private Task OnUpdateTable(SortableEvent @event)
{
var oldItem = Items[@event.OldIndex];
Items.Remove(oldItem);
Copy link
Contributor

@sourcery-ai sourcery-ai bot May 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Validate indices before reordering

Add range checks for @event.OldIndex and @event.NewIndex before calling Remove or Insert to prevent out-of-range exceptions.

Items.Insert(@event.NewIndex, oldItem);

StateHasChanged();
return Task.CompletedTask;
}
Comment on lines +139 to +147
Copy link
Contributor

@sourcery-ai sourcery-ai bot May 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Favor InvokeAsync(StateHasChanged) in event handlers

Await InvokeAsync(StateHasChanged) to ensure the UI update runs on the proper synchronization context in sortable event callbacks.

Suggested change
private Task OnUpdateTable(SortableEvent @event)
{
var oldItem = Items[@event.OldIndex];
Items.Remove(oldItem);
Items.Insert(@event.NewIndex, oldItem);
StateHasChanged();
return Task.CompletedTask;
}
private async Task OnUpdateTable(SortableEvent @event)
{
var oldItem = Items[@event.OldIndex];
Items.Remove(oldItem);
Items.Insert(@event.NewIndex, oldItem);
await InvokeAsync(StateHasChanged);
}


private Task OnUpdate(SortableEvent @event)
{
var oldIndex = @event.OldIndex;
Expand Down
4 changes: 2 additions & 2 deletions src/BootstrapBlazor/Components/Table/Table.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@
}
else
{
<DynamicElement class="@GetRowClassString(item, "table-row")"
<DynamicElement class="@GetRowClassString(item, "table-row")" @key="item"
TriggerContextMenu="ContextMenuZone != null" OnContextMenu="e => OnContextMenu(e, item)"
@ontouchstart="e => OnTouchStart(e, item)"
@ontouchend="OnTouchEnd"
Expand Down Expand Up @@ -675,7 +675,7 @@
</thead>;

RenderFragment<TItem> RenderRow => item =>
@<DynamicElement TagName="tr" class="@GetRowClassString(item)"
@<DynamicElement TagName="tr" class="@GetRowClassString(item)" @key="item"
TriggerContextMenu="ContextMenuZone != null" OnContextMenu="e => OnContextMenu(e, item)"
@ontouchstart="e => OnTouchStart(e, item)" @ontouchend="OnTouchEnd"
TriggerClick="@(ClickToSelect || OnClickRowCallback != null)" OnClick="() => ClickRow(item)"
Expand Down
6 changes: 6 additions & 0 deletions test/UnitTest/Components/TableTest.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4582,6 +4582,7 @@ public async Task KeepSelectedRows_Ok()
await cut.InvokeAsync(() => nextBtn.Click());

//选中行数为空
inputs = cut.FindComponents<Checkbox<Foo>>();
checkboxs = inputs.Count(i => i.Instance.State == CheckboxState.Checked);
Assert.Equal(0, checkboxs);

Expand All @@ -4593,6 +4594,7 @@ public async Task KeepSelectedRows_Ok()
await cut.InvokeAsync(input.Instance.OnToggleClick);

//加上表头的复选框选中，结果有3项
inputs = cut.FindComponents<Checkbox<Foo>>();
checkboxs = inputs.Count(i => i.Instance.State == CheckboxState.Checked);
Assert.Equal(3, checkboxs);

Expand All @@ -4601,27 +4603,31 @@ public async Task KeepSelectedRows_Ok()
await cut.InvokeAsync(() => prevBtn.Click());

//恢复选中行数为0
inputs = cut.FindComponents<Checkbox<Foo>>();
checkboxs = inputs.Count(i => i.Instance.State == CheckboxState.Checked);
Assert.Equal(0, checkboxs);

//点击向前按钮翻页
await cut.InvokeAsync(() => prevBtn.Click());

//恢复选中行数为1
inputs = cut.FindComponents<Checkbox<Foo>>();
checkboxs = inputs.Count(i => i.Instance.State == CheckboxState.Checked);
Assert.Equal(1, checkboxs);

//点击向后翻页按钮
await cut.InvokeAsync(() => nextBtn.Click());

//恢复选中行数为0
inputs = cut.FindComponents<Checkbox<Foo>>();
checkboxs = inputs.Count(i => i.Instance.State == CheckboxState.Checked);
Assert.Equal(0, checkboxs);

//点击向后翻页按钮
await cut.InvokeAsync(() => nextBtn.Click());

//恢复选中行数为2，加上表头的复选框选中，结果有3项
inputs = cut.FindComponents<Checkbox<Foo>>();
checkboxs = inputs.Count(i => i.Instance.State == CheckboxState.Checked);
Assert.Equal(3, checkboxs);
}
Expand Down