引入
<script src="jquery.tmpl.min.js"></script>
html
<ul class="nav" id="side-menu">
</ul> tmpl
<script id="tmpl-box" type="text/x-jquery-tmpl">
{{if $data.eq < 4}}
<li class="sidebar{{= $data.eq}}-li" data-memu="true">
<a href="{{= $data.url}}"><i class="icon icon{{= $data.eq}}" ></i></a>
<ul class="nav nav-second-level collapse collapseUl">
<li style="border-bottom: 0px !important">
<div class="bubble_diailog size_1">{{= $data.name}}
<i class="l"></i>
<b class="l"></b>
</div>
</li>
</ul>
</li>
{{else}}
<li class="sidebar{{= $data.eq}}-li" data-memu="true">
<a href="javascript:;"><i class="icon icon{{= $data.eq}}"></i></a>
<ul class="nav nav-second-level">
<li><a href="javascript:;" class="null-active">{{= $data.name}}</a></li>
{{each(i,obj) $data.children}}
<li><a href="{{= url}}">{{= name}}</a></li>
{{/each}}
</ul>
</li>
{{/if}}
</script>
//生成导航栏
tree = [
  {"eq":1,"name":"工作台","url":"/main"},
  {"eq":2,"name":"待办事项","url":"/calendar/event/main"},
  {"eq":3,"name":"客户管理","url":"/client/client/main"},
  {"eq":4,"name":"统计分析",
    "children":[
      {"name":"业务员统计","url":"/sys/statistics/client"},
      {"name":"客户行业统计","url":"/sys/statistics/client?type=profession"},
      {"name":"优化师统计","url":"/sys/statistics/client?type=sem"},
      {"name":"客户分类统计","url":"/sys/statistics/client?type=level"},
      {"name":"客户状态统计","url":"/sys/statistics/client?type=status"},
      {"name":"客户联系统计","url":"/sys/statistics/client?type=contact"},
      {"name":"客户建档时间统计","url":"/sys/statistics/client?type=increment"},
      {"name":"优化师服务记录查询","url":"/sys/statistics/client?type=serviceRecord"},
      {"name":"业务员联系记录查询","url":"/sys/statistics/client?type=contactRecord"}
    ]
  },
  {"eq":5,"name":"系统设置",
    "children":[
      {"name":"部门信息","url":"/sys/department/main"},
      {"name":"员工设置","url":"/sys/user/main"},
      {"name":"业务设置","url":"/sys/busi/main"},
      {"name":"角色设置","url":"/sys/role/main"},
      {"name":"客户共享","url":"/client/clientShare/main"},
      {"name":"客户移交","url":"/client/clientTransfer/main"},
      {"name":"其他设置","url":"/sys/setting/main"}
    ]
  }
]
$("#side-menu").empty();
$("#tmpl-box").tmpl(tree).appendTo("#side-menu");
 
 

jquery tmpl生成导航的更多相关文章

  1. jquery tmpl 详解

    官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意 ...

  2. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  3. MVC - 11(下)jquery.tmpl.js +ajax分页

    继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...

  4. jQuery .tmpl() 用法

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

  5. jquery.tmpl.min.js--前端实现模版--数据绑定--详解

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

  6. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  7. [转载]jquery tmpl使用方法

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

  8. jQuery .tmpl(), .template()学习资料小结

    昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里.官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options ...

  9. jquery tmpl 详解(转)

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

随机推荐

  1. 雷林鹏分享:解决CI框架的Disallowed Key Characters错误提示

    用CI框架时,有时候会遇到这么一个问题,打开网页,只显示 Disallowed Key Characters 错误提示.有人说 url 里有非法字符.但是确定 url 是纯英文的,问题还是出来了.但清 ...

  2. python ssh登录linux 上传和下载文件

    #!usr/bin/python# coding: utf-8 import paramikoimport jsonremotedir='/tmp/log'remotefile = 'bst_mana ...

  3. 2018-2019-2 网络对抗技术 20165303 Exp1 PC平台逆向破解(BOF实验)

    1.实践目的 本次实践的对象是一个名为pwn1的linux可执行文件. 三个实践内容如下: 手工修改可执行文件,改变程序执行流程,直接跳转到getShell函数. 利用foo函数的Bof漏洞,构造一个 ...

  4. 深入了解UML类图

    深入浅出UML类图 在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML Distilled: A Brief Guide to the ...

  5. expect使用

    expect时用与提供自动交互的工具.比如如果想要用ssh登陆服务器,每次都输入密码你觉得麻烦,那你就可以使用expect来做自动交互,这样的话就不用每次都输入密码了. 先看例子: #!/usr/bi ...

  6. 牛逼的MySQL,起死回生啊

    1.目标库新建数据库root@mysqldb 14:10:  [(none)]> create database db_name; root@mysqldb 14:11:  [(none)]&g ...

  7. Project中最常用的注意点

    最近用Project 2013做计划,做工作量的评估,感觉确实牛逼得一塌糊涂.这几天自己试着做一些手工的计算,与Project的结果进行对比,发现学到的很多东西,网上确实很难道到,花了几天的时间研究, ...

  8. angular6 safe url pipe

    safe-url.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from ' ...

  9. Python3自定义日志类教程

    一.说明 Python3的logging功能是比较丰富的支持不同层次的日志输出,但或是我们想在日志前输出时间.或是我们想要将日志输入到文件,我们还是想要自定义日志类. 之前自己也尝试写过但感觉文档太乱 ...

  10. Cognos集成至portal平台运行报表时只出“#”

    1. 问题描述 报表集成到平台后,运行报表过程中,当多次运行后,页面只显示“#” 2. 问题分析 这是因为浏览器筛选器限制问题 3. 解决方案 在IE浏览器设置中,Internet选项-安全-自定义级 ...