doc(TreeView): add auto expand after drag sample code (dotnetcore#6471)

* refactor: 更新示例

* feat: 增加节点回调方法

可设置展开复选等功能

* doc: 更新拖动到子节点时父节点自动展开功能

* refactor: 精简代码

* test: 更新单元测试

Author: ArgoZhang

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

@@ -3,8 +3,6 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
-using DocumentFormat.OpenXml.Spreadsheet;
-
 namespace BootstrapBlazor.Server.Components.Samples;
 
 /// <summary>
@@ -121,7 +119,20 @@ private Task OnDragItemEndAsync(TreeViewDragContext<TreeFoo> context)
                 source.ParentId = context.IsChildren ? target.Id : target.ParentId;
             }
         }
-        DraggableItems = TreeFoo.CascadingTree(items);
+
+        Action<TreeViewItem<TreeFoo>>? cb = null;
+        if (context.IsChildren)
+        {
+            // 自动展开目标节点
+            cb = item =>
+            {
+                if (item.Value.Id == context.Target.Value.Id)
+                {
+                    item.IsExpand = true;
+                }
+            };
+        }
+        DraggableItems = TreeFoo.CascadingTree(items, cb);
         DraggableItems[0].IsExpand = true;
         if (DraggableItems.Count > 1)
         {
@@ -184,9 +195,9 @@ private static List<TreeFoo> GetDraggableItems()
             new() { Text = "Item D", Id = "4", ParentId = "1", Icon = "fa-solid fa-font-awesome" },
             new() { Text = "Item E", Id = "5", ParentId = "1", Icon = "fa-solid fa-font-awesome" },
 
-            new() { Text = "Item B (Drop inside blocked)", Id = "2", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "Item B", Id = "2", Icon = "fa-solid fa-font-awesome" },
             new() { Text = "Item F", Id = "6", ParentId = "2", Icon = "fa-solid fa-font-awesome" },
-            new() { Text = "Item G (Can not move out)", Id = "9", ParentId = "2", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "Item G", Id = "9", ParentId = "2", Icon = "fa-solid fa-font-awesome" },
 
             new() { Text = "Item C", Id = "3", Icon = "fa-solid fa-font-awesome" },
             new() { Text = "Item H", Id = "7", ParentId = "3", Icon = "fa-solid fa-font-awesome" },

src/BootstrapBlazor.Server/Data/TreeFoo.cs

@@ -177,10 +177,11 @@ public static List<TreeViewItem<TreeFoo>> GetCheckedTreeItems(string? parentId =
     /// 树状数据层次化方法
     /// </summary>
     /// <param name="items">数据集合</param>
-    public static List<TreeViewItem<TreeFoo>> CascadingTree(IEnumerable<TreeFoo> items) => items.CascadingTree(null, (foo, parent) => foo.ParentId == parent?.Value.Id, foo => new TreeViewItem<TreeFoo>(foo)
+    /// <param name="treeviewItemCallback">节点状态回调方法</param>
+    public static List<TreeViewItem<TreeFoo>> CascadingTree(IEnumerable<TreeFoo> items, Action<TreeViewItem<TreeFoo>>? treeviewItemCallback = null) => items.CascadingTree(null, (foo, parent) => foo.ParentId == parent?.Value.Id, foo => new TreeViewItem<TreeFoo>(foo)
     {
         Text = foo.Text,
         Icon = foo.Icon,
         IsActive = foo.IsActive
-    });
+    }, treeviewItemCallback);
 }

src/BootstrapBlazor/Extensions/ExpandableNodeExtensions.cs

@@ -152,13 +152,16 @@ public static void SetParentExpand<TNode, TItem>(this TNode node, bool expand) w
     /// <param name="parent">父级节点</param>
     /// <param name="predicate">查找子节点 Lambda 表达式</param>
     /// <param name="valueFactory"></param>
-    public static List<TreeViewItem<TItem>> CascadingTree<TItem>(this IEnumerable<TItem> items, TreeViewItem<TItem>? parent, Func<TItem, TreeViewItem<TItem>?, bool> predicate, Func<TItem, TreeViewItem<TItem>> valueFactory) => items
-        .Where(i => predicate(i, parent))
-        .Select(i =>
+    /// <param name="treeViewItemCallback">节点是否展开回调方法 默认 null 未设置</param>
+    public static List<TreeViewItem<TItem>> CascadingTree<TItem>(this IEnumerable<TItem> items, TreeViewItem<TItem>? parent, Func<TItem, TreeViewItem<TItem>?, bool> predicate, Func<TItem, TreeViewItem<TItem>> valueFactory, Action<TreeViewItem<TItem>>? treeViewItemCallback = null) => [.. items.Where(i => predicate(i, parent)).Select(i =>
+    {
+        var item = valueFactory(i);
+        item.Items = items.CascadingTree(item, predicate, valueFactory, treeViewItemCallback);
+        item.Parent = parent;
+        if (treeViewItemCallback != null)
         {
-            var item = valueFactory(i);
-            item.Items = items.CascadingTree(item, predicate, valueFactory);
-            item.Parent = parent;
-            return item;
-        }).ToList();
+            treeViewItemCallback(item);
+        }
+        return item;
+    })];
 }

test/UnitTest/Components/TreeViewTest.cs

@@ -742,7 +742,7 @@ public void CascadeSetCheck_Ok()
             new() { Text = "Test3", Id = "03", ParentId = "02" }
         };
 
-        var node = TreeFoo.CascadingTree(items).First();
+        var node = TreeFoo.CascadingTree(items, i => i.IsExpand = true).First();
 
         // 设置当前几点所有子项选中状态
         var cache = new TreeNodeCache<TreeViewItem<TreeFoo>, TreeFoo>(comparer);