jQuery实现动态生成树形菜单

有一个需求：菜单导航条需要依据不同的权限动态提取出来。计划是将功能模块与用户权限之间的关系保持到一个配置表中。所以功能菜单的话就需要动态提取出来再显示。借助jquery框架实现一段动态菜单显示的方案。

一、学习一款它的插件TreeView

这个插件能够把无序列表转换成可展开与收缩的Tree。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<link rel="stylesheet" href="screen.css" type="text/css" />

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/JavaScript" src="jquery.treeview.js"></script>

<script>

$(document).ready(function(){

$("#example").treeview();

});

</script>

</head>

<body>

<ul id="example" class="filetree">

<li><span class="folder">Folder 1</span>

<ul>

<li><span class="file">Item 1.1</span></li>

</ul>

</li>

<li><span class="folder">Folder 2</span>

<ul>

<li><span class="folder">Subfolder 2.1</span>

<ul>

<li><span class="file">File 2.1.1</span></li>

<li><span class="file">File 2.1.2</span></li>

</ul>

</li>

<li><span class="file">File 2.2</span></li>

</ul>

</li>

<li class="closed"><span class="folder">Folder 3 (closed at start)</span>

<ul>

<li><span class="file">File 3.1</span></li>

</ul>

</li>

<li><span class="file">File 4</span></li>

</ul>

</body>

</html>

JQuery实现动态生成树形菜单的更多相关文章

  1. jquery 根据后台传递过来的三维数组动态生成三级菜单

    根据后台传递过来的三维数组动态生成三级菜单 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  2. MVC5+EF6 入门完整教程13 -- 动态生成多级菜单

    稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...

  3. 应用rbac组件 动态生成一级菜单

    动态生成一级菜单 改表结构 需要知道是否是菜单\icon\名称权限表 +字段: is_menu = models.BooleanField(max_length=32,verbose_name='是否 ...

  4. 用C#从数据库动态生成AdminLTE菜单的一种方法

    当前的应用设计风格趋于Flat扁平化,很多基于BootStrap实现了很多UI非常漂亮的管理界面(Bootstrap admin template). 此核心文件开源在Github:https://g ...

  5. jQuery对于动态生成的元素绑定无效的问题～～

    问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...

  6. dtree实现动态加载树形菜单，动态插入树形菜单

    1.导入  dtree文件    dtree.css   img文件夹   dtree.js 2. 建立对应 的数据库      1      父ID     name    id 3    建立连接 ...

  7. jquery给动态生成的元素绑定事件，on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

  8. JQuery中动态生成元素的绑定事件（坑死宝宝了）

    今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...

  9. jquery控制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态

    动态生成的Gridview的前台html代码如下:     <table class="usertableborder" cellspacing="0" ...

随机推荐

  1. （转）spring boot实战(第三篇)事件监听源码分析

    原文:http://blog.csdn.net/liaokailin/article/details/48194777 监听源码分析 首先是我们自定义的main方法: package com.lkl. ...

  2. 【菜鸟也疯狂UML系列】——概述

       <信息系统开发与管理>.<软件project>这两本书中都有提到过UML.想必我们对UML已经不陌生了吧,虽说非常熟悉,可是仅仅是了解而已,而今天<UML基础与应用 ...

  3. easyui required 提交验证

    使用easyui时,对于提交验证,不不过在标签属性中加入data-options=required:true这句话这么来的.还须要另外加上才写东西能够把验证完整实现 1.设置from的属性 <f ...

  4. 压测过程中，CPU和内存占用率很高，案例简单分析

    Q:  最近公司测试一个接口,数据库采用Mongo    并发策略:并发400个用户,每3秒加载5个用户,持续运行30分钟    数据量:8000条左右 压测结果发现:    TPS始终在5左右   ...

  5. Yii2.0 下的 load() 方法的使用

    一 问题 最近在使用 Yii2.0,遇到一个 bug:在 /models/OrderDetail.php add() 方法中调用 load() 方法加载数据,却加载不了. public functio ...

  6. c#上一周下一周代码

    public partial class Form1 : Form { DateTime dtNow; public Form1() { InitializeComponent(); } privat ...

  7. js判段URL是否可用（js判段网络是否不可用）

    下面亲自測试可行: 兼容全部浏览器,用JQuery的方法,能够判段URL是否可用.也能够判段网络是否不可用(前提:假设URL可用.返回也不是200,那就说明是网络不可用.能够以此作为网络是否可用的判段 ...

  8. 解决js下跳转无referer的方法

    HTTP Header referer这玩意主要是告诉人们我是从哪儿来的,就是告诉人家我是从哪个页面过来的,可以用于统计访问本网站的用户来源,也可以用来防盗链.获取这个东西最好的方式是js,如果在服务 ...

  9. virtualenv下使用matplotlib

    Unable to “import matplotlib.pyplot as plt” in virtualenv   (PyMVPA) SimilarFacedeMacBook-Pro:PyMVPA ...

  10. jquery中Uncaught TypeError: $(...).ajaxUpload is not a function(…)错误解决方法

    错误原因:该函数不是jquery的核心函数,所以需要外部引入ajaxfileupload.js文件,可能是没有引入,或者引入的js文件互相冲突 解决方法:每次进入一个函数之前打印该函数所有的js文件, ...