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. A – EIGHT

    八数码转换问题-- 经典bfs-- 关键问题: 1.状态的保存(见longwuxu该题解题报告中的全排列Hash表示) 2.bfs中标记数组的处理:     bfs中有两个标记数组,一个是标记队列中节 ...

  2. Odoo8查询产品时提示"maximum recursion depth exceeded while calling a Python object"

    今天在生产系统中查询产品时,莫名提示错误:maximum recursion depth exceeded while calling a Python object,根据错误日志提示,发现在查询产品 ...

  3. mongoDB id 导出，dump，sed，count，mysql import等用法示例

    #count collectiondb.news.count({"lpublishtime":{"$gte":1358697600000}}); #mongo导 ...

  4. 【MyBatis学习03】原始dao开发方法及其弊端

    上一篇博文总结了一下mybatis的入门,接下来就要开发dao方法了,这篇博文主要总结一下mybatis中原始dao开发的方法,最后并总结一下原始dao开发方法的弊端.mybatis中dao开发应该使 ...

  5. C#创建一个Window服务

    Window服务介绍 Microsoft Windows 服务能够创建在它们自己的 Windows 会话中可长时间运行的可执行应用程序.这些服务可以在计算机启动时自动启动,可以暂停和重新启动而且不显示 ...

  6. 初次玩耍lucene.net，一个小小的记录

    lucene.net虽说是强大,但是我还是一年前第一次玩耍,然后就没有然后了,最近准备养成记录博客的习惯了,所以又玩了玩,回来记录一下 首先新建一个类,便于调用 public class Lucene ...

  7. Codeforces #310ACase of Matryoshkas（模拟）

    [题目链接]click here~~ [题目大意]给你n个玩具,规定仅仅能小的玩具套在大的上面.并且是规格依次递增的,比方:1->2->3,求全部玩具套完须要的最小时间花费 [解题思路]: ...

  8. Spring 注解 @Scheduled(cron = "0 0/10 * * * ? ") 任务调度动态改变时间

    不需要重启应用就可以动态的改变Cron表达式的值 import java.util.Date; import java.util.concurrent.Executor; import java.ut ...

  9. python学习之lambda()

    中学时期,数学老师不时在口中说着:“拉姆达!λ...”.这里的“拉姆达”表示第十一个希腊字母. 而在python中,lambda表示匿名函数. 先来看看匿名函数 >>> f = la ...

  10. discuz论坛模板文件目录

    公共模板文件夹 ./template/default/common/ common.css 公共CSS文件 faq.htm 帮助模板文件 footer.htm 系统总底部模板 footer_ajax. ...