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

实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面

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

1.Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠

基础用法

基础的树形结构展示

<Tree Items="@Items" OnTreeItemClick="@OnTreeItemClick" />

@code{
    private List<TreeItem> Items { get; set; } = TreeDataFoo.GetTreeItems(); //数据类在后面会有完整代码

    private Task OnTreeItemClick(TreeItem item)
    {
        Console.Log($"TreeItem: {item.Text} clicked");
        return Task.CompletedTask;
    }
}

多选框

适用于需要选择层级时使用

<Tree Items="@CheckedItems" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" />

单选框

适用于单选节点

<Tree Items="@CheckedItems" ShowRadio="true" />

除此之外还有很多属性和用法,

• 禁用状态:可将 Tree 的某些节点设置为禁用状态

• 手风琴模式:对于同一级的节点，每次只能展开一个

• 默认展开和默认选中:可将 Tree 的某些节点设置为默认展开或默认选中

• 显示图标:通过设置 ShowIcon 来控制组件是否显示图标

• 节点颜色

• 懒加载

• 获取所有选中节点

等等....

在这里篇幅有限不一一介绍,更多使用说明参考https://www.blazor.zone/trees

2.新建工程 [步骤跟上篇:B03. BootstrapBlazor实战 10分钟编写数据库维护项目大同小异]

完整步骤

1.1 新建工程b05tree

dotnet new blazorserver -o b05tree

将项目添加到解决方案中：

dotnet sln add b05tree/b05tree.csproj

使用 nuget.org 进行 BootstrapBlazor 组件安装, FreeSql sqlite库,字体 ..

dotnet add b05tree package BootstrapBlazor
dotnet add b05tree package BootstrapBlazor.FontAwesome
dotnet add b05tree package FreeSql.Provider.Sqlite
dotnet add b05tree package Densen.FreeSql.Extensions.BootstrapBlazor

[可选]BootstrapBlazor官方BootstrapBlazor.DataAcces.FreeSql包替换Densen.FreeSql.Extensions.BootstrapBlazor

1.2 样式表和Javascript 引用

增加主题样式表到 Pages/_Layout.cshtml 文件中

删除 <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

并在下面添加两行

<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

添加 Javascript 引用到 Pages/_Layout.cshtml 文件中

在 <script src="_framework/blazor.server.js"></script> 之前添加

<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>

1.3 添加增加命名空间引用到 _Imports.razor 文件中

@using BootstrapBlazor.Components

1.4 增加 BootstrapBlazorRoot 组件到 App.razor 文件中

<BootstrapBlazorRoot>
    <Router AppAssembly="@typeof(App).Assembly">
        ...
    </Router>
</BootstrapBlazorRoot>

1.5 添加BootstrapBlazor服务到 Program.cs 文件中

在 builder.Services.AddSingleton<WeatherForecastService>(); 后加入

builder.Services.AddBootstrapBlazor();

1.6 数据服务

添加FreeSql服务到 Program.cs 到

在 builder.Services.AddBootstrapBlazor(); 之前加入

builder.Services.AddFreeSql(option =>
{
    //demo演示的是Sqlite驱动,FreeSql支持多种数据库，MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为GaussDB/MsAccess
    option.UseConnectionString(FreeSql.DataType.Sqlite, "Data Source=test.db;")  //也可以写到配置文件中
#if DEBUG
         //开发环境:自动同步实体
         .UseAutoSyncStructure(true)
         .UseNoneCommandParameter(true)
         //调试sql语句输出
         .UseMonitorCommand(cmd => System.Console.WriteLine(cmd.CommandText))
#endif
    ;
});

[可选] Data Source写到配置文件 appsettings.json :

  "ConnectionStrings": {
    "bb": "Data Source=test.db;"
  }

option.UseConnectionString(FreeSql.DataType.Sqlite, "Data Source=test.db;") 改为

option.UseConnectionString(FreeSql.DataType.Sqlite, builder.Configuration.GetConnectionString("bb"))

3. TreeItem数据实体类

新建目录Model, 新建文件 Data/TreeDataFoo.cs

完整文件

using BootstrapBlazor.Components;

namespace b05tree;

class TreeDataFoo
{
    /// <summary>
    ///
    /// </summary>
    /// <returns></returns>
    public static List<TreeItem> GetTreeItems0()
    {
        var items = new List<TreeItem>
        {
            new TreeItem() { Text = "001_系统管理", Id = "001" },
            new TreeItem() { Text = "001_01_基础数据管理", Id = "001_01", ParentId = "001" },
            new TreeItem() { Text = "001_01_01_教师", Id = "001_01_01", ParentId = "001_01" },
            new TreeItem() { Text = "001_01_02_职工", Id = "001_01_02", ParentId = "001_01" },

            new TreeItem() { Text = "001_02_餐厅数据管理", Id = "001_02", ParentId = "001" },
            new TreeItem() { Text = "001_02_01_厨师", Id = "001_02_01", ParentId = "001_02" },
            new TreeItem() { Text = "001_02_02_服务员", Id = "001_02_02", ParentId = "001_02" },

        };
        // 算法获取属性结构数据
        return items.CascadingTree().ToList();
    }

    /// <summary>
    ///
    /// </summary>
    /// <returns></returns>
    public static List<TreeItem> GetTreeItems(int count=30)
    {
        var items = new List<TreeItem>
        {
            new TreeItem() { Text = "系统管理", Id = "1010" },
            new TreeItem() { Text = "基础数据管理", Id = "1040", ParentId = "1010" },
            new TreeItem() { Text = "基础管理", Id = "1070", ParentId = "1040" },
            new TreeItem() { Text = "基础2管理", Id = "1080", ParentId = "1040" },
            new TreeItem() { Text = "基础3管理", Id = "1090", ParentId = "1040" },
            new TreeItem() { Text = "基础4管理", Id = "1100", ParentId = "1040" },

            new TreeItem() { Text = "系统管理2", Id = "1011" },
            new TreeItem() { Text = "基础数据管理2", Id = "1210", ParentId = "1011" },

            new TreeItem() { Text = "系统管理3", Id = "1012" }, //_懒加载演示

            new TreeItem() { Text = "系统管理4", Id = "1014" },//_懒加载延时演示 

        };

        var items1000 = new List<TreeItem>();
        for (int i = 0; i < count; i++)
        {
            items1000.Add(new TreeItem() { Text = $"教师{-i}信息", Id = $"112{i}0", ParentId = "1070", IsActive = true });
        }
        for (int i = 0; i < count; i++)
        {
            items1000.Add(new TreeItem() { Text = $"教师基础2-{i}信息", Id = $"113{i}0", ParentId = "1080", IsActive = true });
        }
        for (int i = 0; i < count; i++)
        {
            items1000.Add(new TreeItem() { Text = $"教师基础3-{i}信息", Id = $"114{i}0", ParentId = "1090", IsActive = true });
        }
        for (int i = 0; i < count; i++)
        {
            items1000.Add(new TreeItem() { Text = $"教师基础4-{i}信息", Id = $"115{i}0", ParentId = "1100", IsActive = true });
        }

        for (int i = 0; i < count; i++)
        {
            items1000.Add(new TreeItem() { Text = $"教师II{-i}信息", Id = $"116{i}0", ParentId = "1210", IsActive = true });
        }

        items.AddRange(items1000);
        // 算法获取属性结构数据
        return items.CascadingTree().ToList();
    }
}

4. 界面和代码

添加代码到 Pages/Index.razor 文件中

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

<p>
    简单用法
</p>

<Tree ClickToggleNode="true" Items="@TreeDataFoo.GetTreeItems0()" />

<br/>
<br/>
<br/>
<br/>

<p>
    通过设置节点 <code>HasChildNode</code> 控制是否显示节点小箭头图片 。通过Tree的 <code>OnExpandNode</code> 委托添加节点 。通过Tree的 <code>Key</code> 委托添加节点
</p>
<Tree ClickToggleNode="true" Items="@GetLazyItems()" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" OnExpandNode="OnExpandNode" />

添加Index.razor.cs代码后置c#文件

using BootstrapBlazor.Components;

namespace b05tree.Pages;

/// <summary>
///
/// </summary>
public sealed partial class Index
{

    private static List<TreeItem> GetLazyItems()
    {
        var ret = TreeDataFoo.GetTreeItems();

        ret[0].Items[0].Items[2].Text += "_默认打开";
        ret[0].Items[0].Items[2].IsCollapsed = false;

        ret[2].Text += "_懒加载";
        ret[2].HasChildNode = true;

        ret[3].Text += "_懒加载延时";
        ret[3].HasChildNode = true;
        ret[3].Key = "Delay";

        for (int i = 0; i < ret[0].Items[0].Items[0].Items.Count; i++)
        {
            ret[0].Items[0].Items[0].Items[i].Checked = true;
            ret[0].Items[0].Items[1].Items[i].Checked = true;
            ret[0].Items[0].Items[2].Items[i].Checked = true;
        }
        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. 运行

演示项目为普通式样,可选框式样,懒加载子节点式样,懒加载+延时(模拟后台数据加载) 

更多使用说明参考<https://www.blazor.zone/trees>

大佬和同学们有问题在文章后面留言,我都会一一尽力解答. 下一篇介绍整合Freesql orm快速制作数据库后台维护页面

项目源码

Github | Gitee

关联项目

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

BA & Blazor QQ群：795206915、675147445

知识共享许可协议

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

AlexChow

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