TreeList概述
TreeList允许显示自引用的表格数据，并允许排序、过滤和数据编辑。
的一部分jQuery的剑道UI，一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，可以注册一个30天的免费试用期。
基本配置
要初始化TreeList，请使用emptydiv元素，并在初始化脚本中提供所有TreeList设置。
<！--Define the HTML div that is going to hold the TreeList --> Kendo UI TreeList需要一个数据源，它将从中检索用于显示的数据。小部件使用特殊的kendo.data.TreeListDataSource类型，其中包含自定义的实例kendo.data.TreeListModel表示数据项的。
属性呈现其层次结构parentId-id的关系。数据对象包含和id和一个parentId字段，该字段描述项的层次结构。属性可以更改这些字段名schema.model定义．
- 属性来区分根项
parentId．
- 如果
schema.model.fields [parentIdField]。是空的，根项目将是谁的项目parentId字段值为零．- 如果
schema.model.fields [parentIdField]。不可为空，则根项将是其数据类型具有默认值的项。- 当你使用
schema.model.fields配置，列出所有字段。属性的字段id通过schema.model.id．如果没有设置这些，它们仍然可以用于显示数据，但在编辑项时将在服务器上发布不完整的对象。
属性的映射，示例如下parentId字段对应的parentId字段。模式定义将通知数据源ReportsTo场是parentId字段。
schema:{model:{parentId: "ReportsTo"， fields:{ReportsTo: {type: "number"， nullable: true}}}}功能和特性
事件、字段和方法
< div id = " treelist " > < / div > <脚本> $ (" # treelist ")。kendoTreeList({列:[{字段:“名称”}，{字段:“职位”}]，数据源:{数据:[{id: 1, parentId: null，名称:“Jane Smith”，职位:“CEO”}，{id: 2, parentId: 1，名称:“Alex Sells”，职位:“EVP Sales”}，{id: 3, parentId: 1，名称:“Bob Price”，职位:“EVP Marketing”}]}});//获取kendo.ui.TreeList实例的引用。var treelist = $("#treelist").data("kendoTreeList");//使用expand方法展开第一行。treelist。扩大($ (" # treelist tbody > tr:情商(0)”));> < /脚本处理事件，使用以下方法中的任意一种:
- 指定在小部件初始化期间处理事件的JavaScript函数。
- 使用
绑定小部件初始化后的方法。
事件处理程序是在触发事件时调用的JavaScript函数。事件处理程序的参数是一个JavaScript对象，其中包含特定于事件的数据。控件触发事件的小部件的引用发送方事件参数的字段。事件处理程序的函数上下文，该处理程序可通过这关键字设置为触发事件的小部件的实例。有关可运行的示例，请参阅关于使用TreeList事件的演示．
下面的示例演示如何在小部件初始化期间订阅TreeList事件。
< div id = " treelist " > < / div > <脚本> $ (" # treelist ")。kendoTreeList({列:[{字段:"名称"}，{字段:"位置"}]，数据源:{数据:[{id: 1, parentId: null，名称:"Jane Smith"，位置:"CEO"}， {id: 2, parentId: 1，名称:"Alex Sells"，位置:"EVP Sales"}， {id: 3, parentId: 1，名称:"Bob Price"，位置:"EVP Marketing"}]}，数据查询:函数(e) {console.log("数据查询");}});> < /脚本属性订阅TreeList事件，示例如下绑定方法。
引用现有实例
要引用现有的TreeList实例，请使用jQuery.data ()方法和pass“kendoTreeList”作为一个论证。建立了引用之后，使用TreeList的API控制它的行为。
< div id = " treelist " > < / div > <脚本> $ (" # treelist ")。kendoTreeList({列:[{字段:“名称”}，{字段:“职位”}]，数据源:{数据:[{id: 1, parentId: null，名称:“Jane Smith”，职位:“CEO”}，{id: 2, parentId: 1，名称:“Alex Sells”，职位:“EVP Sales”}，{id: 3, parentId: 1，名称:“Bob Price”，职位:“EVP Marketing”}]}});//获取kendo.ui.TreeList实例的引用。var treelist = $("#treelist").data("kendoTreeList");> < /脚本