Html kendo treeview动态更改数据源
我有一个kendoTreeView连接到官方网站演示中给出的OData源代码。我需要将kendoTreeView的数据源更改为其他内容。下面是带有脚本的html 单击“更改”按钮时，树会更改，但显示所有未定义的节点。它无法显示新的dataTextField值。当我将其还原回来时，它甚至可以在不设置dataTextField的情况下工作 我需要更改树的数据源，或者销毁树，将其从DOM中删除，然后添加一个新的。有什么帮助或指点吗Html kendo treeview动态更改数据源,html,kendo-ui,treeview,datasource,Html,Kendo Ui,Treeview,Datasource,我有一个kendoTreeView连接到官方网站演示中给出的OData源代码。我需要将kendoTreeView的数据源更改为其他内容。下面是带有脚本的html 单击“更改”按钮时，树会更改，但显示所有未定义的节点。它无法显示新的dataTextField值。当我将其还原回来时，它甚至可以在不设置dataTextField的情况下工作 我需要更改树的数据源，或者销毁树，将其从DOM中删除，然后添加一个新的。有什么帮助或指点吗 <body> <input type="bu
<body>
<input type="button" id="expandAllNodes" value="expandAllNodes" />
<input type="button" id="changedatasource" value="changedatasource" />
<input type="button" id="revert" value="revert" />
<span>First Tree</span>
<div id="treeview"></div>
<br/>
<span>Second Tree</span>
<div id="treeview2"></div>
<!--<div id="example" class="k-content">
<div id="treeview" class="demo-section"></div>-->
<script>
</script>
<style scoped>
#example {
text-align: center;
}
.demo-section {
display: inline-block;
vertical-align: top;
width: 320px;
height: 300px;
text-align: left;
margin: 0 2em;
}
</style>
<!--</div>-->
</body>
$(document).ready(function () {
// TreeView bound to Categories > Products > OrderDetails
var viewModel = {
self: this,
OrderDetails: {
type: "odata",
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products({0})/Order_Details", options.ProductID);
}
}
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
},
Products: new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
},
schema: {
model: {
id: "ProductID",
hasChildren: "Order_Details",
children: {
type: "odata",
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products({0})/Order_Details", options.ProductID);
}
}
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
}
}
}
}),
Categories: new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
},
schema: {
model: {
hasChildren: "Products",
id: "CategoryID",
children: {
type: "odata",
schema: {
model: {
id: "ProductID",
hasChildren: "Order_Details",
children: {
type: "odata",
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products({0})/Order_Details", options.ProductID);
}
}
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
}
}
},
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories({0})/Products", options.CategoryID);
}
}
}
}
}
}
})
}
$("#treeview").kendoTreeView({
dataSource: viewModel.Categories,
dataTextField: ["CategoryName", "ProductName", "OrderID"],
checkboxes: {
checkChildren: true
}
});
$("#treeview2").kendoTreeView({
dataSource: viewModel.Products,
dataTextField: ["ProductName", "OrderID"],
checkboxes: {
checkChildren: true
}
});
ko.applyBindings(viewModel);
$("#expandAllNodes").click(function () {
var treeView = $("#kendoTreeView").data("kendoTreeView");
treeView.expand(".k-item");
});
$("#changedatasource").click(function () {
var treeview: kendo.ui.TreeView = $("#treeview").data("kendoTreeView");
//treeview.destroy();
treeview.setOptions({ dataTextField: ["ProductName", "OrderID"] });
treeview.setDataSource(viewModel.Products);
});
$("#revert").click(function () {
var treeview: kendo.ui.TreeView = $("#treeview").data("kendoTreeView");
//treeview.setOptions({ dataTextField: ["CategoryName", "ProductName", "OrderID"] });
treeview.setDataSource(viewModel.Categories);
});
});
第一棵树
第二棵树
#范例{
文本对齐：居中；
}
.演示部分{
显示：内联块；
垂直对齐：顶部；
宽度：320px；
高度：300px；
文本对齐：左对齐；
边缘：0.2米；
}
$（文档）.ready（函数（）{
//TreeView绑定到类别>产品>订单详细信息
var viewModel={
赛尔夫：这个，
订单详情：{
类型：“odata”，
运输：{
阅读：{
url:函数（选项）{
返回剑道格式（“http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products（{0}）/订单详细信息”，options.ProductID）；
}
}
},
模式：{
型号：{
hasChildren:函数（）{
返回false；
}
}
}
},
产品：new kendo.data.HierarchycalDataSource({
类型：“odata”，
运输：{
阅读：{
url:“http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
},
模式：{
型号：{
id:“产品id”，
hasChildren:“订单详细信息”，
儿童：{
类型：“odata”，
运输：{
阅读：{
url:函数（选项）{
返回剑道格式（“http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products（{0}）/订单详细信息”，options.ProductID）；
}
}
},
模式：{
型号：{
hasChildren:函数（）{
返回false；
}
}
}
}
}
}
}),
类别：新建kendo.data.hierarchycalDataSource({
类型：“odata”，
运输：{
阅读：{
url:“http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
},
模式：{
型号：{
有孩子：“产品”，
id:“类别id”，
儿童：{
类型：“odata”，
模式：{
型号：{
id:“产品id”，
hasChildren:“订单详细信息”，
儿童：{
类型：“odata”，
运输：{
阅读：{
url:函数（选项）{
返回剑道格式（“http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products（{0}）/订单详细信息”，options.ProductID）；
}
}
},
模式：{
型号：{
hasChildren:函数（）{
返回false；
}
}
}
}
}
},
运输：{
阅读：{
url:函数（选项）{
返回剑道格式（“http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories（{0}）/产品”，options.CategoryID）；
}
}
}
}
}
}
})
}
$（“#treeview”）.kendoTreeView({
数据源：viewModel.Categories，
dataTextField:[“CategoryName”、“ProductName”、“OrderID”]，
复选框：{
孩子们：是的
}
});
$（“#树视图2”）.kendoTreeView({
数据源：viewModel.Products，
dataTextField:[“ProductName”，“OrderID”]，
复选框：{
孩子们：是的
}
});
应用绑定（视图模型）；
$（“#expandAllNodes”）。单击（函数（）{
var treeView=$（“#kendoTreeView”）.data（“kendoTreeView”）；
treeView.expand（“.k-item”）；
});
$（“#changedatasource”）。单击（函数（）{
var treeview:kendo.ui.treeview=$（“#treeview”）.data（“kendoTreeView”）；
//treeview.destroy（）；
setOptions（{dataTextField:[“ProductName”，“OrderID”]}）；
setDataSource（viewModel.Products）；
});
$（“#还原”）。单击（函数（）{
var treeview:kendo.ui.Tr