eighth_多级菜单_tree
1.实现思想
2.代码部分
# menu.html <div id="treeview" class="small"></div> <script src="/static/bootstrap-treeview/js/bootstrap-treeview.js"></script> <script type="text/javascript"> // API文档参数列表: https://www.cnblogs.com/tangzeqi/p/8021637.html $(function() { var defaultData ={{ permission_tree|safe }} var alternateData = [ { text: 'Parent 1', tags: ['2'], nodes: [ { text: 'Child 1', tags: ['3'], nodes: [ { text: 'Grandchild 1', tags: ['6'] }, { text: 'Grandchild 2', tags: ['3'] } ] }, { text: 'Child 2', tags: ['3'] } ] }, { text: 'Parent 2', tags: ['7'] }, { text: 'Parent 3', icon: 'glyphicon glyphicon-earphone', href: '#demo', tags: ['11'] }, { text: 'Parent 4', icon: 'glyphicon glyphicon-cloud-download', href: '/demo.html', tags: ['19'], selected: true }, { text: 'Parent 5', icon: 'glyphicon glyphicon-certificate', color: 'pink', backColor: 'green', href: 'http://www.tesco.com', tags: ['available','0'] } ]; var options = { // data:defaultData , //data属性是必须的，是一个对象数组 Array of Objects. color: "", //所有节点使用的默认前景色，这个颜色会被节点数据上的backColor属性覆盖. String backColor: "#000000", //所有节点使用的默认背景色，这个颜色会被节点数据上的backColor属性覆盖. String borderColor: "#000000", //边框颜色。如果不想要可见的边框，则可以设置showBorder为false。 String nodeIcon: "glyphicon glyphicon-stop", //所有节点的默认图标 checkedIcon: "glyphicon glyphicon-check", //节点被选中时显示的图标 String collapseIcon: "glyphicon glyphicon-minus", //节点被折叠时显示的图标 String expandIcon: "glyphicon glyphicon-plus", //节点展开时显示的图标 String emptyIcon: "glyphicon", //当节点没有子节点的时候显示的图标 String enableLinks: false, //是否将节点文本呈现为超链接。前提是在每个节点基础上，必须在数据结构中提供href值。 Boolean highlightSearchResults: true, //是否高亮显示被选中的节点 Boolean levels: 2, //设置整棵树的层级数 Integer multiSelect: false, //是否可以同时选择多个节点 Boolean onhoverColor: "#F5F5F5", //光标停在节点上激活的默认背景色 String selectedIcon: "glyphicon glyphicon-stop", //节点被选中时显示的图标 String searchResultBackColor: "", //当节点被选中时的背景色 searchResultColor: "", //当节点被选中时的前景色 selectedBackColor: "", //当节点被选中时的背景色 selectedColor: "#FFFFFF", //当节点被选中时的前景色 showBorder: true, //是否在节点周围显示边框 showCheckbox: false, //是否在节点上显示复选框 showIcon: true, //是否显示节点图标 showTags: false, //是否显示每个节点右侧的标记。前提是这个标记必须在每个节点基础上提供数据结构中的值。 uncheckedIcon: "glyphicon glyphicon-unchecked", //未选中的复选框时显示的图标，可以与showCheckbox一起使用 }; $('#treeview').treeview({ color: "#4F4F4F", expandIcon: 'glyphicon glyphicon-chevron-right', collapseIcon: 'glyphicon glyphicon-chevron-down', nodeIcon: 'glyphicon glyphicon-bookmark', data: defaultData, enableLinks: true, levels: 1, showIcon:false, selectedBackColor: "", selectedColor: "#333" }); $('#treeview').on('nodeSelected',function(event, data) { console.log(data); }) }); </script>
相关插件（别人写好都tree js）
# 对应函数rbac.templatetags.filter_tags from django import template register = template.Library() # 固定语法 @register.inclusion_tag('rbac/menu.html') # 改方法直接执行下面的函数并去menu页面渲染放回带有css样式的代码块给调用者 def get_menu_style(request): # 获取登陆人权限 # print('----------->Per', request.session.get('permission_list')) permission_list = request.session.get('permission_list') # print("-------->get", permission_list) permissions_dict = {} # 建一个字典放用户所有pk对应的字典形式的路径 for permission in permission_list: # 讲获取到的session里的list（各个用户拥有的路径对象） if permission.get('type') == 'button': continue # 如果是button则不需要放在左侧 pk = permission.get('pk') # 获取pk值 temp = {} # 多级tree temp['text'] = permission.get('title') temp['href'] = permission.get('url') temp['pk'] = permission.get('pk') temp['pid'] = permission.get('pid') permissions_dict[pk] = temp # 以对象pk为键对应上方生成字典的值,全部放进去 print("------------>1for_permission_dict", permissions_dict) permission_tree = [] # 建一个tree列表 for permission_pk, permission_dict in permissions_dict.items(): # 做分流，有下级字典才有notes倒三角标签 # 判断该权限是否是一级菜单 pid = permission_dict.get('pid') print("----->", pid) print(permission_dict) if pid: if not permissions_dict[pid].get('nodes'): # 该父节点第一次添加子节点 permissions_dict[pid]['nodes'] = [permission_dict] print('if not permissions_dict[pid].get', permissions_dict[pid]) else: # 第二次添加子节点 permissions_dict[pid]['nodes'].append(permission_dict) print('else not permissions_dict[pid].get', permissions_dict[pid]) else: # 一级菜单，放入到permission_tree permission_tree.append(permission_dict) print("permission_tree------------>", permission_tree) # 当前访问节点展开 if permission_dict.get("href") == request.path: permission_dict["backColor"] = "grey" permission_dict["color"] = "white" while pid: permissions_dict[pid]["state"] = {"expanded": True} pid = permissions_dict[pid]["pid"] print("permission_tree------------>", permission_tree) import json return {"permission_tree": json.dumps(permission_tree)} # 必须传json，因为插件收的是json @register.simple_tag def get_name(request): # 获取登陆人的姓名 user_name = request.session.get('user_name') return user_name
此时已完成
3.可能遇到的问题，有一些朋友会遇到js导入有问题或tree没办法找到，解决方法如下：
浙公网安备 33010602011771号