fix(Table): line no support SortableList (#6045)

* fix: 修复拖动导致不更新问题

* doc: 更新示例

* chore: bump version 9.6.4-beta02

* chore: bump version 9.6.4-beta02

Co-Authored-By: ChrisHsieh999 <[email protected]>

* chore: bump version 9.6.4-beta02

* chore: bump version 9.6.3-beta01

* test: 更新单元测试

---------

Co-authored-by: ChrisHsieh999 <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor

@@ -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" />

src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs

@@ -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);
+        Items.Insert(@event.NewIndex, oldItem);
+
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
     private Task OnUpdate(SortableEvent @event)
     {
         var oldIndex = @event.OldIndex;

src/BootstrapBlazor/Components/Table/Table.razor

@@ -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"
@@ -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)"

test/UnitTest/Components/TableTest.cs

@@ -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);
 
@@ -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);
 
@@ -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);
     }