我正在使用Kendo UI TreeView加載我的網頁中的分層數據。默認情況下，我將數據加載到3級（即根 - >根指導 - >根指導'指導）。我需要一種方式來隨着用戶在樹下進一步展開而延遲加載剩餘的節點。此外，已獲取的數據必須在本地進行緩存，以避免對已擴展節點進行不必要的調用。我是Kendo UI的新手，沒有足夠的時間閱讀文檔。 json看起來像緩存加載Kendo UI樹視圖
{
Id: '1',
ParentId: '-1',
Payload: {... }
Children: [
Id: '2',
ParentId: '1',
PayLoad: {...},
Children: [{...}]
]
....
}
有人可以指出代碼示例嗎？ Kendo支持多少上述內容？
在此先感謝。
該功能不受開箱即用配置的支持，但可通過自定義傳輸實現。以下是如何創建與localData陣列配合使用的混合數據源（如果項目可用）以及以其他方式向服務器執行請求的方法。
var localData = [
{ id: 1, text: "Node 1", hasChildren: true, items: [
{ id: 101, text: "Node 1.1", hasChildren: true, items: [
{ id: 10101, text: "Node 1.1.1" }
] }
] },
{ id: 2, hasChildren: true, text: "Node 2" },
{ id: 3, hasChildren: true, text: "Node 3" }
];
function get(data, id) {
if (!id) {
return data;
} else {
for (var i = 0; i < data.length; i++) {
if (data[i].id == id) {
return data[i].items;
} else if (data[i].items) {
var result = get(data[i].items, id);
if (result) return result;
}
}
}
}
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: function (options) {
var id = options.data.id;
var data = get(localData, id);
if (data) {
options.success(data);
} else {
// mock call to server with static data
// you can use $.ajax() and call options.success(data) on success
setTimeout(function() {
options.success([
{ id: id + 1, text: "Remote node 1", hasChildren: false },
{ id: id + 2, text: "Remote node 2", hasChildren: true }
]);
}, 1000);
}
}
},
schema: {
model: {
id: "id"
}
}
});
$("#tree").kendoTreeView({
dataSource: homogeneous
});<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<div id="tree"></div>後一些更多的工作，我得到了這個工作。我仍然不確定爲什麼需要localData變量，因爲一旦節點已經在那裏，Kendo樹視圖似乎不會使用它。無論如何，這裏是我的解決方案：
<div id="treeview"> </div>
<script>
var serviceRoot = "http://<local name>:58754/api/";
var localData;
$(document).ready(function() {
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: function (options) {
if (typeof options.data.ID != 'undefined') {
var id = options.data.ID;
var data = getNextLevel(localData, id);
if (data) {
options.success(data);
} else {
var currentnode = get(localData, id);
if (currentnode.Level == 1) {
$.ajax({
url: serviceRoot + "tree",
data: 'ID=' + currentnode.ID + '&Level=' + currentnode.Level,
type: "Get",
success: function (result) {
setTimeout(function() {
var res = result;
addToLocalData(localData, res, currentnode.ID);
options.success(res);
}, 1000);
},
error: function (result) {
options.error(result);
}
});
} else {
if (currentnode.Level == 2) {
$.ajax({
url: serviceRoot + "tree",
data: 'ID=' + currentnode.ID + '&Level=' + currentnode.Level,
type: "Get",
success: function (result) {
setTimeout(function() {
var res = result;
addToLocalData(localData, res, currentnode.ID);
options.success(res);
}, 1000);
},
error: function (result) {
options.error(result);
}
});
}
}
}
}
else {
$.ajax({
url: serviceRoot + "tree",
data: 'ID='+ null +'&Level='+ null,
type: "Get",
success: function (result) {
setTimeout(function() {
options.success(result);
}, 1000);
localData = result;
},
error: function (result) {
options.error(result);
}
});
}
}
},
schema: {
model: {
id: "ID",
hasChildren: "HasChildren"
}
}
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
dataTextField: "Name"
});
});
//Checks if nodes are already in the tree and returns it if it does
function getNextLevel(data, id) {
if (!id) {
return data;
} else {
for (var i = 0; i < data.length; i++) {
if (data[i].ID == id) {
return data[i].Items;
} else if (data[i].Items) {
for (var j = 0; j < data[i].Items.length; j++) {
if (data[i].Items[j].ID == id) {
return data[i].Items[j].Items;
}
}
}
}
}
}
//Get Tree object for a given ID
function get(data, id) {
if (id) {
for (var i = 0; i < data.length; i++) {
if (data[i].ID == id) {
return data[i];
}
else if (data[i].Items) {
for (var j = 0; j < data[i].Items.length; j++) {
if (data[i].Items[j].ID == id) {
return data[i].Items[j];
}
}
}
}
}
return null;
}
//Add newly read nodes to cached tree
function addToLocalData(localdata, data, id) {
if (!id) {
return localdata;
} else {
for (var i = 0; i < localdata.length; i++) {
if (localdata[i].ID == id) {
localdata[i].Items = data;
return;
} else {
if (localdata[i].Items) {
for (var j = 0; j < localdata[i].Items.length; j++) {
if (localdata[i].Items[j].ID == id) {
localdata[i].Items[j].Items = data;
return;
}
}
}
}
}
}
}
</script>
我正在使用存儲過程從3個表中讀取到Tree對象的值。下面是樹對象代碼：
public class Tree
{
public Guid ID { get; set; }
public string Name { get; set; }
public bool HasChildren { get; set; }
public int Level { get; set; }
public IEnumerable<Tree> Items { get; set; }
}
而且我的存儲過程：
ALTER PROCEDURE [dbo].[GetTreeItems]
@ID uniqueidentifier, @CurrentLevel int
AS BEGIN SET NOCOUNT ON;
if @CurrentLevel is null
select IDStation as ID, StationName as Name, null as IDParent, 1 as [Level] ,
case when (select COUNT(*) from Unit where Unit.IDStation = Station.IDStation) > 0 then 1 else 0 end as HasChildren
from Station
order by [Level], Name
--union
else if @CurrentLevel = 1
select IDUnit as ID, UnitName as Name, Station.IDStation as IDParent, 2 as [Level],
case when (select COUNT(*) from Component where Component.IDUnit = Unit.IDUnit) > 0 then 1 else 0 end as HasChildren
from Unit inner join Station on Station.IDStation = Unit.IDStation
where Station.IDStation = @ID
order by [Level], Name
--union
if @CurrentLevel = 2
select IDComponent as ID, ComponentName as Name, Unit.IDUnit as IDParent,
3 as [Level], 0 as HasChildren
from Component inner join Unit on unit.IDUnit = Component.IDUnit
where Unit.IDUnit = @ID
order by [Level], Name
END
感謝亞歷山大！這給了一個很好的起點。 – prthrokz
您能否請您發佈您的解決方案？我一直在努力從jsBin的建議幾天，仍然無法讓第二級工作。請。 – Amanda