展示层级结构的树形组件。
可以绑定@bind-Values
展示层级结构的树形组件。
可以绑定@bind-Values
基础的树形结构展示。
<Tree Data="data1">
</Tree>
@code{
//下面为了方便,直接从json文件加载数据
static string dataFile = "Pages/data/data1.json";
List<TreeItem<string>> data1 = Tree<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}
适用于需要选择层级时使用。
Vals的值:
<p>Vals的值:@string.Join(",",Vals)</p><br>
<Tree Data="data1" ShowCheckBox @bind-Values="Vals">
</Tree>
@code{
HashSet<string> Vals = new HashSet<string>();
//下面为了方便,直接从json文件加载数据
static string dataFile = "Pages/data/data1.json";
List<TreeItem<string>> data1 = Tree<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}
可将 Tree 的某些节点设置为禁用状态。
Vals的值:
<p>Vals的值:@string.Join(",",Vals)</p><br>
<Tree Color="Color.Danger" Data="data1" ShowCheckBox @bind-Values="Vals">
</Tree>
@code{
HashSet<string> Vals = new HashSet<string>();
//下面为了方便,直接从json文件加载数据
static string dataFile = "Pages/data/data2.json";
List<TreeItem<string>> data1 = Tree<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}
节点的内容支持自定义,可以在节点区添加按钮或图标等内容
Vals的值:
<p>Vals的值:@string.Join(",", Vals)</p><br>
<Tree Data="data1" Color="Color.Link" ShowCheckBox @bind-Values="Vals">
<ItemSlot>
<div class="@B.Flex @B.JustifyContentSpaceBetween">
<div>
<Icon IconClass="fa fa-home"></Icon>
<span>@context.Text</span>
</div>
<span>
<a>add</a>
<a>delete</a>
</span>
</div>
</ItemSlot>
</Tree>
@code{
HashSet<string> Vals = new HashSet<string>();
//下面为了方便,直接从json文件加载数据
static string dataFile = "Pages/data/data1.json";
List<TreeItem<string>> data1 = Tree<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}
对于同一级的节点,每次只能展开一个
<Tree Data="data1" IsAccordion>
</Tree>
@code{
//下面为了方便,直接从json文件加载数据
static string dataFile = "Pages/data/data1.json";
List<TreeItem<string>> data1 = Tree<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}
每一个节点可以单独选择
Vals的值:
<p>Vals的值:@string.Join(",",Vals)</p><br>
<Tree Data="data1" ShowCheckBox @bind-Values="Vals" IsIsolated>
</Tree>
@code{
HashSet<string> Vals = new HashSet<string>();
//下面为了方便,直接从json文件加载数据
static string dataFile = "Pages/data/data1.json";
List<TreeItem<string>> data1 = Tree<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}
文档