我开始使用Kendo TreeView,我有一个实现,它在启动时从Asp MVC项目中加载了许多treenode
我不确定如何动态加载其他节点,文档在这方面非常稀少
我在下面包含了这个来源,因为我认为如果没有别的话,它会对其他人有用。此代码适用于加载'n'树节点
<script>
var dataSource = new kendo.data.HierarchicalDataSource( {
transport: {
read: function ( options )
{
debugger;
$.ajax( {
url: "/EmployeePicker/EmployeePicker/GetTreeRoot",
async: false, //ensure the response is received before exiting the content function
success: function ( r )
{
options.success( r );
}
} );
}
},
schema: {
model: {
children: "Children"
}
}
} );
dataSource.read();
var rootItems = dataSource.data();
rootItems[0].load(); // does not initiate AJAX request
$("#treeview").kendoTreeView({
dataSource: dataSource,
dataTextField: "Name"
} );
</script>
和MVC方面。
public JsonResult GetTreeRoot()
{
TreeNode root = new TreeNode("1", "Root", true);
TreeNode childA = new TreeNode("1.1", "ChildA", true);
TreeNode childA1 = new TreeNode("1.1.1", "ChildA1", false);
// this one has a child but we're not initialising it
TreeNode childB = new TreeNode("1.2", "ChildB", true);
root.Children.Add(childA);
root.Children.Add(childB);
childA.Children.Add(childA1);
List<TreeNode> list = new List<TreeNode>();
list.Add(root);
return Json(list, System.Web.Mvc.JsonRequestBehavior.AllowGet);
}
答案 0 :(得分:2)
这对于剑道来说是完全可能的,并且Lazy load in Kendo UI treeview with caching上有一个关于SO的工作演示。
他们的关键是定义transport.read
函数:
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 {
// get remote children based on parent 'id'
}
}
}
});
查看上面链接的演示以获取完整示例。
答案 1 :(得分:0)
这需要通过Ajax,但它会在需要时添加一个节点。这里的关键是服务器已指示该节点有子节点,但树视图可以看到它们尚未加载
$( "#treeview" ).kendoTreeView( {
dataSource: dataSource,
dataTextField: "Name",
expand: expandNode
} );
function expandNode(e)
{
var node = $( "#treeview" ).data( "kendoTreeView" ).dataItem( e.node )
if ( node.Children.length > 0 )
return;
var treeview = $( "#treeview" ).data( "kendoTreeView" )
var newNode = { Name: "NewNode", hasChildren: true, id: "4.1"};
treeview.append(newNode, $(e.node) );
}