KendoUI 的TreeView应用探讨

KendoUI所含的treeview 功能非常丰富，所有的事件绑定，参数拓展，ajax异步操作，checkbox，图片，可拖动，甚至连子节点关联都写好了。（各对应一个属性）

各种treeView载入方式在api文档里都有，

这里我是用做为【菜单】menu的方式，

function loadMenus(){
    $.ajax({
        type: "POST",
        url: "menuAction!loadMenu?t="+Math.random(),
        dataType: "json",
        timeout:30000,
        contentType: "application/json; charset=utf-8",
        beforeSend: function(xhr){
            $("#leftPanel").addClass("k-ext-wait");
        }
    }).done(function(data){
        $("#leftPanel").kendoTreeView({
            dataSource: data,//分层数据
            dataUrlField: "actionDirect",//指定节点onClick动作
            dataTextField: "name",//指定节点名
            dataImageUrlField: "menuIcon",//节点图片
            dataSpriteCssClassField: "menuIcon-class",//样式，同上
            select: onSelect
        });
    });
});

 

代码里几个属性都是动态取"data"里字段，dataSource

[
                            { text: "Furniture", expanded: true, items: [
                                { text: "Tables & Chairs",actions:"doSomething",a:"1",b:"2",c:"3" },
                                { text: "Sofas" },
                                { text: "Occasional Furniture" }
                            ] },
                            { text: "Decor", items: [
                                { text: "Bed Linen" },
                                { text: "Curtains & Blinds" },
                                { text: "Carpets" }
                            ] },
                            { text: "Storage" }
                        ]

dataSource中拓展字段属性可随意添加，

onselect函数里需要拿到对应节点的id值，对应js函数方法，和一些其他的拓展属性，查了官网api都没有，唯独只有一句，就没有下文了：

Get the currently selected node

var treeView = $("#treeView").data("kendoTreeView");

var selectedNode = treeView.select();

调试了一下，selectedNode 的属性多的可以出书，

最后还是跟一老外取到的经：

var data = $('#treeview').data('kendoTreeView').dataItem(e.node);
alert(data.actions);

bingo！此方法若作为menu使用，非常有用，便于记录。