一、菜单的样式

如上图所示,菜单一共两级。一级菜单的父结点都为0,二级菜单的父结点是前结点的code。

code:为每一个结点独一无二的标识,也可以认为是ID。

二、菜单的数据结构

编写菜单的结构,采用数组形式,每一个结点都为一个对象

 var data = [
{
code: "1",
parentCode: "0",
name: "水果"
},
{
code: "2",
parentCode: "1",
name: "苹果"
},
{
code: "3",
parentCode: "1",
name: "桔子"
},
{
code: "4",
parentCode: "1",
name: "香蕉"
},
{
code: "5",
parentCode: "0",
name: "动物"
},
{
code: "6",
parentCode: "5",
name: "老虎"
},
{
code: "7",
parentCode: "5",
name: "熊猫"
},
{
code: "8",
parentCode: "5",
name: "狗"
},
{
code: "33",
parentCode: "0",
name: "植物"
}
];
$(function () {
init();
function render(e, f, g) {
//e:模板
//f:节点code
//g:节点
var h = [];
if ($.each(data, function (a, b) {
b.parentCode == f && h.push(b)
}), h.length != 0) {
var j = Mustache.render(e, { subjects: h });
g.append(j);
}
}
function treeLevel1Click() {
var e = $(this).find("ul");
var tree_level_leaf = '<ul class="ul-leaf">{{#subjects}}<li class="children children-lv2" id="subject_{{code}}"><a class="lv2-title" href="javascript:void(0);"><span class="checkbox"></span><span class="lv2-text">{{name}}</span><span class="help"></span></a><div class="lv2-info"></div></li>{{/subjects}}</ul>';
e.length > 0 ? (e.toggle()) : render(tree_level_leaf, this.id.substr(8), $(this));
$(this).addClass("active");
}
function init()
{
var c = $("#subjectTree")
var g = $(".classify-children");
var i = '{{#subjects}}<li class="children children-lv1" id="subject_{{code}}"><a class="lv1-title" href="javascript:void(0);">{{name}}<span class="triangle-down"></span></a></li>{{/subjects}}';
render(i, 0, g);
c.delegate(".children-lv1", "click", treeLevel1Click);
} });

Mustache应用——渲染二级菜单的更多相关文章

  1. Django--CRM--一级, 二级 菜单表

    一. 一级菜单表 1. 首先要修改权限表的字段, 在权限表下面加上icon和 is_menu 的字段 2. 展示结果 # 我们既然想要动态生成一级菜单,那么就需要从数据库中拿出当前登录的用户的菜单表是 ...

  2. python 全栈开发,Day109(客户管理之动态"二级"菜单)

    昨日内容回顾 1. 权限有几张表? 2. 简述权限流程? 3. 为什么要把权限放入session? 4. 静态文件和模块文件 5. 相关技术点 - orm查询 - 去空 - 去重 - 中间件 - in ...

  3. 巨蟒django之权限7:动态生成一级&&二级菜单

    内容回顾: . 权限的控制 . 表结构设计 存权限的信息 用户表 - name 用户名 - pwd 密码 - roles 多对多 角色表 - name - permissions 多对多 权限表 - ...

  4. Django - 权限(3)- 动态显示二级菜单

    一.动态显示二级菜单 上篇随笔中,我们实现了动态显示一级菜单,现在考虑这样一种情况,用户的菜单权限比较多,这个时候全部并列展现在左侧菜单就不合适了,所以,现在有这样一个需求,即把用户的菜单权限分类,划 ...

  5. django权限之二级菜单

    遗漏知识点 1.构建表结构时,谁被关联谁就是主表,在层级删除的时候,删除子表的时候,主表不会被删除,反之删除主表的话,字表也会被删除, 使用related_name=None   反向查询,起名用的 ...

  6. django中动态生成二级菜单

    一.动态显示二级菜单 1.修改权限表结构 (1)分析需求,要求左侧菜单如下显示: 客户管理: 客户列表 账单管理: 账单列表 (2)修改rbac下的models.py,修改后代码如下: from dj ...

  7. Excel——使用OFFSET、MATCH、COUNTA实现二级菜单

    如图所示,接下来提供两种办法实现: 1.将A.B.C.D定义为名称NAME. 2.设置一级菜单单元格数据有效性为NAME. 3.设置二级菜单格数据有效为: =OFFSET($A$1,MATCH($A6 ...

  8. Django动态渲染多层菜单

    为后续给菜单设置权限管理方便,通过给页面模版菜单动态渲染,通过数据菜单表进行匹配需要渲染的菜单 #Django表结构 class Menus(models.Model): name = models. ...

  9. Jquery垂直下拉二级菜单

    自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. delete,truncate 和 delete之间的区别

    1.首先看下语法定义: drop table_name truncate table_name delete table_name [where column_name = value] 2.各个删除 ...

  2. MYSQL分析慢查询

    mysql慢查询的日志文件路径一般为: /var/lib/mysql/slowquery.log,具体的路径可以通过mysql配置文件(/etc/my.cnf)查询,slow_query_log_fi ...

  3. 序列化_Transient

    要实际的操作一下Serialize的代码Demo, 加深理解(某投行很喜欢问这个问题):transient关键字虽然目前还没有人面试过我,但是也是个考点

  4. node.js中对同步,异步,阻塞与非阻塞的理解

    我们都知道javascript是单线程的,node.js是一个基于Chrome V8 引擎的 javascript 运行时环境,注意 node.js 不是一门语言,别搞错了. javascript为什 ...

  5. eclipse中运行tomcat提示端口被占的4种解决方案

    错误信息:Several ports (8005, 8080, 8009) required by Tomcat v5.5 Server at localhost are already in use ...

  6. Java并发-ConcurrentModificationException原因源码分析与解决办法

    一.异常原因与异常源码分析 对集合(List.Set.Map)迭代时对其进行修改就会出现java.util.ConcurrentModificationException异常.这里以ArrayList ...

  7. fedora 使用

    我们在这篇指南中将介绍安装Fedora 23工作站版本后要完成的一些实用操作,以便用起来更爽. 1.更新Fedora 23程序包 哪怕你可能刚刚安装/升级了Fedora 23,仍很可能会有需要更新的程 ...

  8. php中static静态关键字的使用方法和应用场景

    php中除了常规类和方法的使用,访问控制之外,还有静态关键字static,静态变量可以是局部变量也可以是全局变量,当一个程序段执行完毕时,静态变量并没有消失,它依然存在于内存中,下次在定义时还是以前的 ...

  9. python_docx制作word文档详细使用说明【转】

      目前网上对这一个库的介绍得很少,很零散,所以很多功能我是尽量参考其官网,但是官网上面很多功能目前只有说明文档,而代码并还没有及时更新,以至于按照官网上面做了,python却报错.比如:自定义表格的 ...

  10. read temperature

    button1, button2, richtexbox1, serialport1, using System;using System.Collections.Generic;using Syst ...