jstree无限级菜单ajax按需动态加载子节点
2015-04-26 15:41 C#与.NET探索者 阅读(2457) 评论(0) 编辑 收藏 举报业余时间研究了一下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); });