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