剑道树,从许多节点开始,然后动态加载其余节点

时间:2014-10-20 12:05:32

标签: javascript kendo-ui kendo-treeview

我开始使用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);
}

2 个答案:

答案 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) );
    }