BootstrapBlazor实战 Tree树形控件使用(2)

继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面

demo演示的是Sqlite驱动,FreeSql支持多种数据库，MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为GaussDB/MsAccess

1.Freesql处理树形分类

无限级分类（父子）是一种比较常用的表设计，我们直接设计表中包含 parent_id 字段，然后递归查询，fsql内置了方法让使用透明化。

1.1 父子导航属性

FreeSql 导航属性之中，有针对父子关系的设置方式，如下：

public class Area

{

  [Column(IsPrimary = true)]

  public string Code { get; set; }

  public string Name { get; set; }

  public string ParentCode { get; set; }

  [Navigate(nameof(ParentCode))]

  public Area Parent { get; set; }

  [Navigate(nameof(ParentCode))]

  public List<Area> Childs { get; set; }

}

定义 Parent 属性，在表达式中可以这样：

fsql.Select<Area>().Where(a => a.Parent.Parent.Parent.Name == "中国").First();

定义 Childs 属性，在表达式中可以这样（子查询）：

fsql.Select<Area>().Where(a => a.Childs.AsSelect().Any(c => c.Name == "北京")).First();

定义 Childs 属性，还可以使用【级联保存】、【贪婪加载】等等操作。

fsql.Delete<Area>().Where("1=1").ExecuteAffrows();

var repo = fsql.GetRepository<Area>();

repo.DbContextOptions.EnableAddOrUpdateNavigateList = true;

repo.DbContextOptions.NoneParameter = true;

repo.Insert(new Area

{

  Code = "100000",

  Name = "中国",

  Childs = new List<Area>(new[] {

    new Area

    {

      Code = "110000",

      Name = "北京",

      Childs = new List<Area>(new[] {

        new Area{ Code="110100", Name = "北京市" },

        new Area{ Code="110101", Name = "东城区" },

      })

    }

  })

});

1.2 ToTreeList

配置好父子属性之后，就可以这样用了：

var t1 = fsql.Select<Area>().ToTreeList();

Assert.Single(t1);

Assert.Equal("100000", t1[0].Code);

Assert.Single(t1[0].Childs);

Assert.Equal("110000", t1[0].Childs[0].Code);

Assert.Equal(2, t1[0].Childs[0].Childs.Count);

Assert.Equal("110100", t1[0].Childs[0].Childs[0].Code);

Assert.Equal("110101", t1[0].Childs[0].Childs[1].Code);

查询数据本来是平面的，ToTreeList 方法将返回的平面数据在内存中加工为树型 List 返回。

1.3 AsTreeCte 递归删除

很常见的无限级分类表功能，删除树节点时，把子节点也处理一下。

fsql.Select<Area>()

  .Where(a => a.Name == "中国")

  .AsTreeCte()

  .ToDelete()

  .ExecuteAffrows(); //删除 中国 下的所有记录

如果软删除：

fsql.Select<Area>()

  .Where(a => a.Name == "中国")

  .AsTreeCte()

  .ToUpdate()

  .Set(a => a.IsDeleted, true)

  .ExecuteAffrows(); //软删除 中国 下的所有记录

1.4 AsTreeCte 递归查询

若不做数据冗余的无限级分类表设计，递归查询少不了，AsTreeCte 正是解决递归查询的封装，方法参数说明：

参数	描述
(可选) pathSelector	路径内容选择，可以设置查询返回：中国 -> 北京 -> 东城区
(可选) up	false(默认)：由父级向子级的递归查询，true：由子级向父级的递归查询
(可选) pathSeparator	设置 pathSelector 的连接符，默认：->
(可选) level	设置递归层级

通过测试的数据库：MySql8.0、SqlServer、PostgreSQL、Oracle、Sqlite、Firebird、达梦、人大金仓、南大通用、翰高

姿势一：AsTreeCte() + ToTreeList

var t2 = fsql.Select<Area>()

  .Where(a => a.Name == "中国")

  .AsTreeCte() //查询 中国 下的所有记录

  .OrderBy(a => a.Code)

  .ToTreeList(); //非必须，也可以使用 ToList（见姿势二）

Assert.Single(t2);

Assert.Equal("100000", t2[0].Code);

Assert.Single(t2[0].Childs);

Assert.Equal("110000", t2[0].Childs[0].Code);

Assert.Equal(2, t2[0].Childs[0].Childs.Count);

Assert.Equal("110100", t2[0].Childs[0].Childs[0].Code);

Assert.Equal("110101", t2[0].Childs[0].Childs[1].Code);

// WITH "as_tree_cte"

// as

// (

// SELECT 0 as cte_level, a."Code", a."Name", a."ParentCode"

// FROM "Area" a

// WHERE (a."Name" = '中国')

// union all

// SELECT wct1.cte_level + 1 as cte_level, wct2."Code", wct2."Name", wct2."ParentCode"

// FROM "as_tree_cte" wct1

// INNER JOIN "Area" wct2 ON wct2."ParentCode" = wct1."Code"

// )

// SELECT a."Code", a."Name", a."ParentCode"

// FROM "as_tree_cte" a

// ORDER BY a."Code"

姿势二：AsTreeCte() + ToList

var t3 = fsql.Select<Area>()

  .Where(a => a.Name == "中国")

  .AsTreeCte()

  .OrderBy(a => a.Code)

  .ToList();

Assert.Equal(4, t3.Count);

Assert.Equal("100000", t3[0].Code);

Assert.Equal("110000", t3[1].Code);

Assert.Equal("110100", t3[2].Code);

Assert.Equal("110101", t3[3].Code);

//执行的 SQL 与姿势一相同

姿势三：AsTreeCte(pathSelector) + ToList

设置 pathSelector 参数后，如何返回隐藏字段？

var t4 = fsql.Select<Area>()

  .Where(a => a.Name == "中国")

  .AsTreeCte(a => a.Name + "[" + a.Code + "]")

  .OrderBy(a => a.Code)

  .ToList(a => new {

    item = a,

    level = Convert.ToInt32("a.cte_level"),

    path = "a.cte_path"

  });

Assert.Equal(4, t4.Count);

Assert.Equal("100000", t4[0].item.Code);

Assert.Equal("110000", t4[1].item.Code);

Assert.Equal("110100", t4[2].item.Code);

Assert.Equal("110101", t4[3].item.Code);

Assert.Equal("中国[100000]", t4[0].path);

Assert.Equal("中国[100000] -> 北京[110000]", t4[1].path);

Assert.Equal("中国[100000] -> 北京[110000] -> 北京市[110100]", t4[2].path);

Assert.Equal("中国[100000] -> 北京[110000] -> 东城区[110101]", t4[3].path);

// WITH "as_tree_cte"

// as

// (

// SELECT 0 as cte_level, a."Name" || '[' || a."Code" || ']' as cte_path, a."Code", a."Name", a."ParentCode"

// FROM "Area" a

// WHERE (a."Name" = '中国')

// union all

// SELECT wct1.cte_level + 1 as cte_level, wct1.cte_path || ' -> ' || wct2."Name" || '[' || wct2."Code" || ']' as cte_path, wct2."Code", wct2."Name", wct2."ParentCode"

// FROM "as_tree_cte" wct1

// INNER JOIN "Area" wct2 ON wct2."ParentCode" = wct1."Code"

// )

// SELECT a."Code" as1, a."Name" as2, a."ParentCode" as5, a.cte_level as6, a.cte_path as7

// FROM "as_tree_cte" a

// ORDER BY a."Code"

更多姿势...请根据代码注释进行尝试 https://github.com/dotnetcore/FreeSql/wiki/查询父子关系

2.数据实体类

新建文件Model/TreeDataFsqlFoo.cs

其中GetTreeList()为获取常规List形式, GetTreeItems()是转换为BootstrapBlazor使用的TreeItem格式.

using BootstrapBlazor.Components;

using FreeSql.DataAnnotations;

namespace b05tree;

/// <summary>

/// 无限级分类（父子）是一种比较常用的表设计,表设计中只有 parent_id 字段

/// </summary>

public class TreeDataFsqlFoo

{

    //https://github.com/dotnetcore/FreeSql/wiki/%E6%9F%A5%E8%AF%A2%E7%88%B6%E5%AD%90%E5%85%B3%E7%B3%BB

    [Column(IsPrimary = true, StringLength = 6)]

    public string Code { get; set; }

    [Column(StringLength = 20, IsNullable = false)]

    public string Name { get; set; }

    [Column(StringLength = 6)]

    public string ParentCode { get; set; }

    [Navigate(nameof(ParentCode))]

    public TreeDataFsqlFoo Parent { get; set; }

    [Navigate(nameof(ParentCode))]

    public List<TreeDataFsqlFoo> Childs { get; set; }

    public static void DemoDatas(IFreeSql fsql)

    {

        var res = fsql!.Select<TreeDataFsqlFoo>().Count();

        if (res == 0)

        {

            var districts = new TreeDataFsqlFoo

            {

                Code = "001",

                Name = "001_系统管理",

                Childs = new List<TreeDataFsqlFoo>(new[] {

                    new TreeDataFsqlFoo{

                        Code = "001_01",

                        Name = "001_01_基础数据管理",

                        Childs = new List<TreeDataFsqlFoo>(new[] {

                            new TreeDataFsqlFoo{

                                Code = "001_01_01",

                                Name = "001_01_01_教师"

                            },

                            new TreeDataFsqlFoo{

                                Code = "001_01_02",

                                Name = "001_01_02_职工"

                            }

                        })

                    },

                    new TreeDataFsqlFoo{

                        Code = "001_02",

                        Name = "001_02_餐厅数据管理",

                        Childs = new List<TreeDataFsqlFoo>(new[] {

                            new TreeDataFsqlFoo{

                                Code = "001_02_01",

                                Name = "001_02_01_厨师"

                            },

                            new TreeDataFsqlFoo{

                                Code = "001_02_02",

                                Name = "001_02_02_服务员"

                            }

                        })

                    }

                })

            };

            var lazyItems = new List<TreeDataFsqlFoo>(new[] {

                districts,

                    new TreeDataFsqlFoo

                    {

                        Code = "001_03",

                        Name = "001_03_懒加载演示"

                    },

                    new TreeDataFsqlFoo

                    {

                        Code = "001_04",

                        Name = "001_04_懒加载延时演示"

                    }

            });

            var repo = fsql.GetRepository<TreeDataFsqlFoo>();//仓库类

            repo.DbContextOptions.EnableAddOrUpdateNavigateList = true; //开启一对多，多对多级联保存功能

            repo.Insert(lazyItems);

        }

    }

    public static List<TreeDataFsqlFoo> GetTreeList(IFreeSql fsql)

    {

        DemoDatas(fsql);

        return fsql.Select<TreeDataFsqlFoo>().LeftJoin(d => d.ParentCode == d.Parent.Code).ToList();

    }

    public static List<TreeItem> GetTreeItems(IFreeSql fsql)

    {

        DemoDatas(fsql);

        var items = fsql.Select<TreeDataFsqlFoo>().LeftJoin(d => d.ParentCode == d.Parent.Code)

            .ToList(a => new TreeItem()

            {

                Text = a.Name,

                Id = a.Code,

                ParentId = a.ParentCode

            });

        // 算法获取属性结构数据

        return items.CascadingTree().ToList();

    }

}

3.Razor页面

新建文件Pages/TreeFsql.razor

上半部分是Tree控件,下半部分是BootstrapBlazor的Table组件,用于维护后台数据

@page "/treefsql"

@using b05tree.Data

<h3>Tree 树形控件 + Freesql</h3>

<p>

    通过设置节点 <code>HasChildNode</code> 控制是否显示节点小箭头图片 。通过Tree的 <code>OnExpandNode</code> 委托添加节点

</p>

<Tree ClickToggleNode="true" Items="@GetLazyItems()" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" OnExpandNode="OnExpandNode" />

<Table TItem="TreeDataFsqlFoo"

       IsPagination="true"

       IsStriped="true"

       IsBordered="true"

       AutoGenerateColumns="true"

       ShowSearch="true"

       ShowToolbar="true"

       ShowExtendButtons="true"

       DoubleClickToEdit=true

       ShowColumnList=true

       ShowCardView=true>

</Table>

4.后置代码C#

新建文件Pages/TreeFsql.razor.cs

using BootstrapBlazor.Components;

using Microsoft.AspNetCore.Components;

namespace b05tree.Pages;

/// <summary>

///

/// </summary>

public sealed partial class TreeFsql

{

    [Inject] IFreeSql? fsql { get; set; } 

    private List<TreeItem> GetLazyItems()

    {

        var ret = TreeDataFsqlFoo.GetTreeItems(fsql);

        ret[1].Text += "_懒加载";

        ret[1].HasChildNode = true;

        ret[2].Text += "_懒加载延时";

        ret[2].HasChildNode = true;

        ret[2].Key = "Delay";

        return ret;

    }

    private Task OnTreeItemClick(TreeItem item)

    {

        //Trace.Log($"TreeItem: {item.Text} clicked");

        return Task.CompletedTask;

    }

    private Task OnTreeItemChecked(TreeItem item)

    {

        var state = item.Checked ? "选中" : "未选中";

        //TraceChecked.Log($"TreeItem: {item.Text} {state}");

        return Task.CompletedTask;

    }

    private static async Task OnExpandNode(TreeItem item)

    {

        if (!item.Items.Any() && item.HasChildNode && !item.ShowLoading)

        {

            item.ShowLoading = true;

            if (item.Key?.ToString() == "Delay")

            {

                await Task.Delay(800);

            }

            item.Items.AddRange(new TreeItem[]

            {

                    new TreeItem()

                    {

                        Text = "懒加载子节点1",

                        HasChildNode = true

                    },

                    new TreeItem()

                    {

                        Text = "懒加载延时子节点2",

                        HasChildNode = true,

                        Key = "Delay"

                    },

                    new TreeItem() { Text = "懒加载子节点3" }

            });

            item.ShowLoading = false;

        }

    }

    private Task OnTreeItemChecked(List<TreeItem> items)

    {

        //TraceCheckedItems.Log($"当前共选中{items.Count}项");

        return Task.CompletedTask;

    }

}

5.添加Menu链接

添加代码到Shared/NavMenu.razor

<div class="nav-item px-3">

    <NavLink class="nav-link" href="treefsql">

        <span class="oi oi-plus" aria-hidden="true"></span> TreeFsql

    </NavLink>

</div>

6.运行调试

更改和删除后,刷新页面马上可以看到效果.

项目源码

Github | Gitee

关联项目

FreeSql QQ群：4336577(已满)、8578575(已满)、52508226(在线)

BA & Blazor QQ群：795206915、675147445

知识共享许可协议

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名AlexChow（包含链接： https://github.com/densen2014 ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系。

AlexChow

今日头条 | 博客园 | 知乎 | Gitee | GitHub

巴特西