面向ASP的Telerik UI。NET MVC免费下载30天试用版

TreeView绑定

TreeView支持声明式地定义它的项,支持本地(在服务器上)和远程(使用数据源配置对象)绑定。

声明TreeView项

TreeView允许您在helper声明中声明它的所有项。

下面的示例演示如何配置具有三个层次结构的TreeView。

@(Html.Kendo(). treeview (). name ("treeview") . items (treeview => {treeview. add()。Text("My Web Site") .Items(root => {root. add ().Text("images") .Items(images => {images. add ().Text("logo.png");images.Add()。text(“body-back.png”);});root.Add()。text(“about.html”);root.Add()。text(“contacts.html”);});}))

本地数据绑定

通过将适当的集合传递给HTML helper,您可以在服务器上本地绑定TreeViewBindTo ()方法。

@(Html.Kendo().TreeView() .Name("treeview-left") .BindTo((IEnumerable)ViewBag.treeData)))
public ActionResult Local_Data_Binding() {ViewBag. view}treeData = GetData()返回视图();私人IEnumerable} < TreeViewItemModel > GetData(){列表< TreeViewItemModel >内联=新列表< TreeViewItemModel >{新TreeViewItemModel{文本=“家具”,项目=新列表< TreeViewItemModel >{新TreeViewItemModel() =“桌子和椅子”}{文本,新TreeViewItemModel =“沙发”}{文本,新TreeViewItemModel{文本=“休闲家具}}},新的TreeViewItemModel{文本=“装饰”,项=新列表< TreeViewItemModel >{新TreeViewItemModel() =“床单”}{文本,new TreeViewItemModel {Text = "窗帘和百叶窗"},new TreeViewItemModel {Text = "地毯"}}}};返回内联;}

远程数据绑定

控件提供对远程数据绑定的支持数据源配置对象。

@(Html.Kendo().TreeView() .Name("treeview") .DataTextField("Name") .DataSource(dataSource => dataSource .Read(read => read .Action("Read_TreeViewData", "treeview")))).
公共静态IList < HierarchicalViewModel > GetHierarchicalData () {var =新列表< HierarchicalViewModel >(){新HierarchicalViewModel () {ID = 1, ParendID = null, HasChildren = true, Name = "父项”},新HierarchicalViewModel () {ID = 2, ParendID = 1, HasChildren = true, Name = "父项”},新HierarchicalViewModel () {ID = 3, ParendID = 1, HasChildren = false, Name = "项目"},新HierarchicalViewModel () {ID = 4, ParendID = 2, HasChildren = false, Name = "项目"},new HierarchicalViewModel() {ID = 5, ParendID = 2, HasChildren = false, Name = "Item"}};返回结果;}公共IActionResult Read_TreeViewData(int?id) {var结果= GetHierarchicalData() .其中(x => id。HasValue吗?x.ParendID == id: x.ParendID == null) . select (item => new {id = item。ID, Name = item。名称,展开=项。展开,imageUrl = item。ImageUrl, hasChildren = item。HasChildren});返回Json(结果); }

默认情况下,TreeView向远程端点发送id展开节点的。来发送额外数据使用数据源数据方法并提供一个JavaScript函数的名称,该函数将返回一个带有附加数据的JavaScript对象。

另请参阅

在本文中
Baidu
map