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" ...
随机推荐
- 【千纸诗书】—— PHP/MySQL二手书网站后台开发之知识点记录
前言:使用PHP和MySQL开发后台管理系统的过程中,发现有一些通用的[套路小Tip],这里集中记录一下.结合工作中ing的后台业务,我逐渐体会到:除了技术知识外.能使用户体验好的“使用流程设计”积累 ...
- 利用forever在Linux上实现Node.js项目自启动
在一台计算机上手动跑Node项目简单,node xx.js就搞定了,想让Node项目后台执行,尽管不能直接用node命令搞定,可是在安装了forever这个包以后.还是非常轻松的.只是要是在远程ser ...
- Servlet——简单用户登录实例+http协议解析
编写项目.用户登录系统1.0版本号 登录界面Servlet: package com.gavin.view; import java.io.IOException; import java.io.Pr ...
- Linux Ubuntu 开机自动启动项设置方法 例:svn服务
在init.d目录建立一个脚本文件svnd.sh # cd /etc/init.d # vim svnd.sh 输入svnd.sh内容如下(/kaifa/svn 为svn仓库目录): #!/bin/b ...
- Phalcon 訪问控制列表 ACL(Access Control Lists ACL)
Phalcon在权限方面通过 Phalcon\Acl 提供了一个轻量级的 ACL(訪问控制列表). Access Control Lists (ACL) 同意系统对用户的訪问权限进行控制,比方同意訪问 ...
- 有关IM即时通讯原理
在网上搜索了一些资料,谈谈自己对IM即时通讯的理解 IM全称为Instant Messaging,即时通讯,如qq那种的. 现在有两个用户UserA, UserB, 俩人是一个IM通讯软件的好友,Us ...
- stm32时钟设置函数
这里涉及到一个很重要的寄存器,时钟配置寄存器:RCC_CFGR #if defined (STM32F10X_LD_VL) || (defined STM32F10X_MD_VL) || (defin ...
- YII2 学习
下载地址: http://www.yiiframework.com/download/ http://www.yiichina.com/download 直接选择basic模板下载即可 下载之后解压到 ...
- 【Android】 给我一个Path,还你一个酷炫动画
本篇文章已授权微信公众号 hongyangAndroid (鸿洋)独家公布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/53040506 ...
- 在modelsim中加入quartus仿真库
找到modelsim安装目录下的modelsim.ini文件. 将modelsim.ini的只读属性去掉. 打开quartus软件.选择Launch Simulation Library Compil ...