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. Lucene分词器

    Lucene分析器的基类为Analyzer,Analyzer包含两个核心组件:Tokenizer和 TokenFilter.自定义分析器必须实现Analyzer类的抽象方法createComponen ...

  2. 我的superui开源后台bootstrap开发框架

    我的superui开源后台bootstrap开发框架:http://git.oschina.net/tzhsweet/superui

  3. Django——基于类的视图源码分析 二

    源码分析 抽象类和常用视图(base.py) 这个文件包含视图的顶级抽象类(View),基于模板的工具类(TemplateResponseMixin),模板视图(TemplateView)和重定向视图 ...

  4. 提高PAAS安全性的一点尝试

    云服务已经成为现代人生活的一部分.手机中的照片会自己主动同步到云中:你的邮件内容保存在云中.办公软件执行在云中:你的健康数据会实时上传到云中.你每天的生活轨迹消耗的卡路里也会上传到云中:云服务也会逐渐 ...

  5. HTML5特性

    HTML5规范围绕如何使用新增标记定义了大量Javascript API,其中一些API与DOM重叠,定义了浏览器应该支持DOM拓展. 1.与类相关的扩充 HTML5新增了getElementsByC ...

  6. sql DATEPART() MONTH() convert() cast() dateadd() DATEDIFF() with(nolock)

    DATEPART() 函数用于返回日期/时间的单独部分,比如年.月.日.小时.分钟等等. 语法 DATEPART(datepart,date) date 参数是合法的日期表达式.datepart 参数 ...

  7. stm32时钟设置函数

    这里涉及到一个很重要的寄存器,时钟配置寄存器:RCC_CFGR #if defined (STM32F10X_LD_VL) || (defined STM32F10X_MD_VL) || (defin ...

  8. nginx环境下启动php-fpm

    nginx环境下启动php-fpm 1.首先查看是否安装了php-fpm 这个我试了好多命令都不行比如 rpm -qa php-fpm , rpm -ql php-fpm , which php-fp ...

  9. eclipse进行远程调试教程，轻松搞定生产环境问题

    首先你本地Eclipse上要有和部署在远程服务器一至的项目,否则debug的时候会出现代码行错位,难以达到debug的效果.例如:如果你本地的代 码加了行,修改了,或减了一行.而远程服务器上的项目没有 ...

  10. spring security 3.1 实现权限控制

    spring security 3.1 实现权限控制 简单介绍:spring security 实现的权限控制,能够分别保护后台方法的管理,url连接訪问的控制,以及页面元素的权限控制等, secur ...