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>(0);
            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);
 });