我正在使用剑道树列表来显示分层数据。应用程序允许用户向显示的数据添加新行，或编辑现有行。我没有使用内联编辑。现在我通过这段代码添加新行：
treeList.dataSource.data().push(vm);
如果用户编辑了某些行，则会在数据源中更新：
for (i = 0; i < dsData.length; i++) {
if (dsData[i].get("TaskUid") === vm.get("TaskUid")) {
dsData[i] = vm;
var curId = vm.get("VisualId");
vm.set("VisualId", curId);
grid.dataSource.read();
onDataBound();
}
}
有一个副作用 - 调用 dataSource.read（） 时，新添加的项目将从 TreeList 控件中消失。问题是 - 我应该如何在 treeList 中添加数据和刷新数据而不会产生这样的副作用？
可能你应该考虑使用
-
dataSource.pushCreate向数据源添加新元素，并且 -
dataSource.pushUpdate编辑数据源
我复制了一些基本下拉列表的示例，并添加 3 个按钮
- 第一个按钮将添加新的父节点
- 第二个按钮将编辑第一个父节点，即简·史密斯
- 第三个按钮在简·史密斯上添加新的子节点
这样做：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<!-- Define the HTML div that will hold the TreeList -->
<div id="treelist"></div>
<button id="new">Add new</button>
<button id="editParent">Edit Jane Smith</button>
<button id="addChild">Add child node to Jane Smith</button>
<!-- Initialize the TreeList -->
<script>
$(document).ready(function() {
$("#treelist").kendoTreeList({
columns: [{
field: "Name"
}, {
field: "Position"
}],
dataSource: {
data: [{
id: 1,
parentId: null,
Name: "Jane Smith",
Position: "CEO"
}, {
id: 2,
parentId: 1,
Name: "Alex Sells",
Position: "EVP Sales"
}, {
id: 3,
parentId: 1,
Name: "Bob Price",
Position: "EVP Marketing"
}]
}
});
});
$("#new").on("click", function() {
var newElement = {
id: 4,
parentId: null,
Name: "John Doe",
Position: "HRD"
};
$("#treelist").data("kendoTreeList").dataSource.pushCreate(newElement);
});
$("#editParent").on("click", function() {
var updatedElement = {
id: 1,
parentId: null,
Name: "Scooby Doo",
Position: "CEO Pet"
};
$("#treelist").data("kendoTreeList").dataSource.pushUpdate(updatedElement);
});
$("#addChild").on("click", function() {
var newElement = {
id: 5,
parentId: 1,
Name: "Ricky Martin",
Position: "EVP Legal"
};
$("#treelist").data("kendoTreeList").dataSource.pushCreate(newElement);
});
</script>
</body>
</html>