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. Oracle Database 11.2.0.4.0 已在 中标麒麟Linux x86-64 NeoKylin Linux Advanced Server 6 上通过认证

    啥都不说了,上截图:

  2. mysql 5.6 修改root原始密码不为空方法

    mysql 5.6安装好之后,是默认root用户的密码为空的,此时为了安全性需要修改密码不为空,修改方法为: cmd或者mysql 5.6 command line client登陆之后,输入一下命令 ...

  3. Appstore 提交Ipad 和Iphone版

  4. jQuery （DOM篇）

    1.DOM节点的创建 创建元素节点: 常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构") $("<div&g ...

  5. ACE_Task::putq（转）

    int ACE_Task< ACE_SYNCH_DECL >::putq (     ACE_Message_Block * , ACE_Time_Value *     timeout ...

  6. android 调用系统界面

    现在开发中的功能需要直接跳转到拨号.联系人.短信界面等等,查找了很多资料,自己整理了一下. 首先,我们先看拨号界面,代码如下: Intent intent =new Intent(); intent. ...

  7. （转）jquery图片左右滚动

    <!DOCTYPE HTML> <html> <head> <title>基于jQuery的控制左右滚动效果_自动滚动版本</title> ...

  8. BOS中定区关联客户

    1. 首先发布crm服务 第一步:创建动态的web项目crm,导入hessian的jar 第二步:创建一个crm数据库和t_customer表 第三步:在crm项目的web.xml中配置spring的 ...

  9. ActiveMQ与MSMQ的异同

    http://www.cnblogs.com/luluping/archive/2010/11/03/1867841.html      目前常用的消息队列组建无非就是MSMQ和ActiveMQ,至于 ...

  10. AspectJ 是什么

    http://www.blogjava.net/hwpok/archive/2008/06/28/211312.html 1. 序 Aspect Oriented Programming (AOP)是 ...