如何为kendoui treelist手动设置数据
How to manually set data for kendoui treelist
我想在 运行 时为 kendoui 树列表设置数据源。请检查以下 example。如果我在设计时设置数据源,我就能在控件中看到数据。但是如果我尝试在 运行 时设置数据源,我在控件中看不到数据。
<div id="treeList"></div>
<script>
var data = [ { name: "Jane Doe" }, { name: "John Doe" }];
var dataSource = new kendo.data.TreeListDataSource({
data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ command: [{ name: "edit" }] }
],
editable: true
//,dataSource: dataSource
});
var grid = $("#treelist").data("kendoTreeList");
grid.setDataSource( dataSource);
grid.dataSource = dataSource;
grid.dataSource.read();
grid.dataSource.data(data);
</script>
问题似乎出在选择器本身。您的逻辑没问题,但由于某种原因,data("kendoTreeList")
返回的对象为空。我更新了您的代码以在 kendoTreeList
初始化后链接 data
。
var dataSource = new kendo.data.TreeListDataSource({
data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
var grid = $("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ command: [{ name: "edit" }] }
],
editable: true
}).data("kendoTreeList");
grid.setDataSource(dataSource);
说起来有点奇怪,但我认为你的代码和我的代码是等价的。显然不是,但我不明白为什么。
您的主要问题是您将 DOM 元素的 ID 设置为 "treeList"。
var grid = $("#treelist").data("kendoTreeList");
如您所见,设置网格变量时全部使用小写字母。那是你唯一的问题。它应该是这样的:
var grid = $("#treeList").data("kendoTreeList");
我想在 运行 时为 kendoui 树列表设置数据源。请检查以下 example。如果我在设计时设置数据源,我就能在控件中看到数据。但是如果我尝试在 运行 时设置数据源,我在控件中看不到数据。
<div id="treeList"></div>
<script>
var data = [ { name: "Jane Doe" }, { name: "John Doe" }];
var dataSource = new kendo.data.TreeListDataSource({
data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ command: [{ name: "edit" }] }
],
editable: true
//,dataSource: dataSource
});
var grid = $("#treelist").data("kendoTreeList");
grid.setDataSource( dataSource);
grid.dataSource = dataSource;
grid.dataSource.read();
grid.dataSource.data(data);
</script>
问题似乎出在选择器本身。您的逻辑没问题,但由于某种原因,data("kendoTreeList")
返回的对象为空。我更新了您的代码以在 kendoTreeList
初始化后链接 data
。
var dataSource = new kendo.data.TreeListDataSource({
data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
var grid = $("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ command: [{ name: "edit" }] }
],
editable: true
}).data("kendoTreeList");
grid.setDataSource(dataSource);
说起来有点奇怪,但我认为你的代码和我的代码是等价的。显然不是,但我不明白为什么。
您的主要问题是您将 DOM 元素的 ID 设置为 "treeList"。
var grid = $("#treelist").data("kendoTreeList");
如您所见,设置网格变量时全部使用小写字母。那是你唯一的问题。它应该是这样的:
var grid = $("#treeList").data("kendoTreeList");