项目中使用了Kendo UI的TreeView，现在将使用要点记录下来，作为备忘。

基本用法

<div id="treeview"></div>
<script>
    $("#treeview").kendoTreeView({
        checkboxes: true,
        dataSource: dataSource,
        dataTextField: "Label",
        select: onSelect
    });
</script>
  • checkboxs属性：是否显示选择框
  • dataSource：是HierarchicalDataSource类型的对象
  • dataTextField:树节点的显示字段
  • select:选中事件

dataSource可以是一个数组，也可以是通过ajax获取数据的函数。

var dataSource = new kendo.data.HierarchicalDataSource({

        transport: {
            read: function (options) {
                $.ajax({
                    url: this.root + action,
                    data: postdata,
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        return options.success(res);
                    },
                    error: function (XMLHttpRequest) {
                        return options.error(XMLHttpRequest);
                    }
                });
            }
         },
        schema: {
            model: {
                id: "Id",
                children: "Nodes",
                hasChildren: "HasChildren"
            }
        }
    });

可以在schema中定义返回数据与treeview模型之间的关系。返回的数据必须有id字段、显示字段和保存子节点的数组。
选中事件的定义如下：

function onSelect(e) {
    var treeview = $("#treeview").data("kendoTreeView");
    var dataItem = treeview.dataItem(e.node);
    console.log(dataItem);
}

 



链接：https://www.jianshu.com/p/aff28d73e8c8