jstree无限级菜单ajax按需动态加载子节点

业余时间研究了一下jstree，更新非常快已经是3.0了,首先看一下效果截图：

1.页面引入样式和脚本(注意路径根据实际情况)

<link href="~/Scripts/vakata.JsTree/assets/dist/themes/default/style.min.css" rel="stylesheet" />

<script src="~/Scripts/vakata.JsTree/assets/dist/jstree.js"></script>

2.定义容器

<div id="treeModule" data-id="0">
</div>

3.初始化jstree，这里调用了一个action(NewModuleChild）,第4点里说到这个action，先看jstree的使用

$('#treeModule').jstree({
"core": {
"animation": 0,
"check_callback": true,
"themes": {
"stripes": true, 'responsive': false
},
'data': {
'url': '@Url.Action("NewModuleChild")',
'data': function (node) {
return { 'root': node.id === '#' ?"0" :node.id };
},
"type":'POST',
"success": function (d) {

}
}
},
"types": {
"#": {
"max_children": 1,
"max_depth": 4,
"valid_children": ["root"]
},
"root": {
"icon": "/scripts/vakata.JsTree/assets/images/tree_icon.png",
"valid_children": ["default"]
},
"default": {
"valid_children": ["default", "file"]
},
"file": {
"icon": "glyphicon glyphicon-file",
"valid_children": []
}
},
"plugins": [
"contextmenu", "dnd", "search","themes",
"state", "types", "wholerow","json_data"
]
})

4.NewModuleChild的定义

 public JsonResult NewModuleChild()
        {
            var parentId = Request["root"].ConvertTo<int>();
            var data = Utility.PermissionSvc.GetChildByParentId(parentId);
            var result = from m in data
                         select new { id = m.Id, text = m.Name, children = !String.IsNullOrWhiteSpace(m.ChildNodes), li_attr = m };
            return Json(result);
        }

另外还有些添加节点、修改节点直接参考官网的例子就行了，但是有些地方还是需要注意，这里我就列举个调用添加节点的方法

   $("#btnaddnode").click(function () {
                var position = 'last';
                var parent = $("#treeModule").jstree("get_selected");
                var newNode = { state: "open", text: "新建的测试", id: 111, data: "新建的测试", li_attr: { id: 111, name: '新建的测试', url: 'http://www.baidu.com', target: '_blank', orderval: 1, childnodes: '2,3', maxleavel: 22, optscope: '2,1,4' } ,type:'default'};
 $('#treeModule').jstree('create_node', parent[0], newNode, 'last', function (e, data) {
                    //alert('hello');
                }, true);
 });