如何动态更改 kendo UI 树视图数据源

Question

我的 asp.net mvc 页面上有一个 kendo ui 树视图和一个下拉框。下拉框可以有两个值。根据选择了哪个，我想更改数据源 url，这是控制器中的一种方法。来自 url 的数据的数据类型和结构将是相同的。本质上，我想动态更改 url: '@Url.Content("~/Document/GetMyDocument")' 。以下是我的树视图代码：

<script>
    $("#treeview").kendoTreeView({
    checkboxes: {
    checkChildren: true,

},
dataSource: {
transport: {
    read: {
        url: '@Url.Content("~/Document/GetMyDocument")',
    type: "post",
    dataType: "json"
    }
},
schema: {
    model: {
    text: "Name",
    spriteCssClass: "fa fa-folder",
    children: "Files"
    }
}
},
    dataTextField: ["Name", "FileName"],
    dataValueField: ["id"],
    check: onCheck
});

Answer 1

您可以将树视图数据源的URL指定为函数

transport: {
  read: {
    url: function (e) {  }
  }
}

然后您可以侦听 DropDownList 的 change 事件并调用

$('#treeview').data('kendoTreeView').dataSource.read();

在 url 函数中，您可以获得 DropDownList 的值并动态解析 url：

var ddl = $('#myDDl').data('kendoDropDownList');
var value = ddl.value();
return value == "someValue" ? "/foo/bar": "/bar/baz";

如何动态更改 kendo UI 树视图数据源

How to dynamically change kendo UI treeview datasource

asp.net-mvc

treeview

kendo-ui