JQuery实现动态生成树形菜单
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实现动态生成树形菜单的更多相关文章
- jquery 根据后台传递过来的三维数组动态生成三级菜单
根据后台传递过来的三维数组动态生成三级菜单 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...
- 应用rbac组件 动态生成一级菜单
动态生成一级菜单 改表结构 需要知道是否是菜单\icon\名称权限表 +字段: is_menu = models.BooleanField(max_length=32,verbose_name='是否 ...
- 用C#从数据库动态生成AdminLTE菜单的一种方法
当前的应用设计风格趋于Flat扁平化,很多基于BootStrap实现了很多UI非常漂亮的管理界面(Bootstrap admin template). 此核心文件开源在Github:https://g ...
- jQuery对于动态生成的元素绑定无效的问题~~
问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...
- dtree实现动态加载树形菜单,动态插入树形菜单
1.导入 dtree文件 dtree.css img文件夹 dtree.js 2. 建立对应 的数据库 1 父ID name id 3 建立连接 ...
- jquery给动态生成的元素绑定事件,on函数
首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...
- JQuery中动态生成元素的绑定事件(坑死宝宝了)
今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...
- jquery控制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态
动态生成的Gridview的前台html代码如下: <table class="usertableborder" cellspacing="0" ...
随机推荐
- Lucene分词器
Lucene分析器的基类为Analyzer,Analyzer包含两个核心组件:Tokenizer和 TokenFilter.自定义分析器必须实现Analyzer类的抽象方法createComponen ...
- 我的superui开源后台bootstrap开发框架
我的superui开源后台bootstrap开发框架:http://git.oschina.net/tzhsweet/superui
- Django——基于类的视图源码分析 二
源码分析 抽象类和常用视图(base.py) 这个文件包含视图的顶级抽象类(View),基于模板的工具类(TemplateResponseMixin),模板视图(TemplateView)和重定向视图 ...
- 提高PAAS安全性的一点尝试
云服务已经成为现代人生活的一部分.手机中的照片会自己主动同步到云中:你的邮件内容保存在云中.办公软件执行在云中:你的健康数据会实时上传到云中.你每天的生活轨迹消耗的卡路里也会上传到云中:云服务也会逐渐 ...
- HTML5特性
HTML5规范围绕如何使用新增标记定义了大量Javascript API,其中一些API与DOM重叠,定义了浏览器应该支持DOM拓展. 1.与类相关的扩充 HTML5新增了getElementsByC ...
- sql DATEPART() MONTH() convert() cast() dateadd() DATEDIFF() with(nolock)
DATEPART() 函数用于返回日期/时间的单独部分,比如年.月.日.小时.分钟等等. 语法 DATEPART(datepart,date) date 参数是合法的日期表达式.datepart 参数 ...
- stm32时钟设置函数
这里涉及到一个很重要的寄存器,时钟配置寄存器:RCC_CFGR #if defined (STM32F10X_LD_VL) || (defined STM32F10X_MD_VL) || (defin ...
- nginx环境下启动php-fpm
nginx环境下启动php-fpm 1.首先查看是否安装了php-fpm 这个我试了好多命令都不行比如 rpm -qa php-fpm , rpm -ql php-fpm , which php-fp ...
- eclipse进行远程调试教程,轻松搞定生产环境问题
首先你本地Eclipse上要有和部署在远程服务器一至的项目,否则debug的时候会出现代码行错位,难以达到debug的效果.例如:如果你本地的代 码加了行,修改了,或减了一行.而远程服务器上的项目没有 ...
- spring security 3.1 实现权限控制
spring security 3.1 实现权限控制 简单介绍:spring security 实现的权限控制,能够分别保护后台方法的管理,url连接訪问的控制,以及页面元素的权限控制等, secur ...