引入
<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. navicat premium 破解版

    下载链接:https://pan.baidu.com/s/1oNwtr2hdUN9F452xkji0aQ

  2. python日志模块的使用

    学习一下python的日志模块logging,可以参考如下博客,写得很详细 https://www.cnblogs.com/yyds/p/6901864.html https://www.cnblog ...

  3. RxJava2

    原文地址 这可能是最好的RxJava 2.x 入门教程(一) 这可能是最好的RxJava 2.x 入门教程(二) 这可能是最好的RxJava 2.x 入门教程(三) 这可能是最好的RxJava 2.x ...

  4. linux基础命令连接命令ln

    ln  -s  /etc/issue   /tmp/issue.soft 创建文件/etc/issue 的软连接/tmp/issue.soft 不带-s 生成硬链接文件. 软连接类似于windows的 ...

  5. 未在本地计算机上注册microsoft.ace.12.0的解决办法

    (1)去http://download.microsoft.com/download/7/0/3/703ffbcb-dc0c-4e19-b0da-1463960fdcdb/AccessDatabase ...

  6. Kafka 1.0.0集群安装

    环境 主机名 IP 地址 安装路径 系统 sht-sgmhadoopdn-01 172.16.101.58 /opt/kafka_2.12-1.0.0 /opt/kafka(软连接) CentOS L ...

  7. leetcode71

    这道题很简单,大约是词法分析器差不多的原理.但是我觉得看了别人简洁的代码后还是很有收获的.本人的冗余代码就不好意思放上来了,以下是别人的参考代码和值得借鉴的地方: class Solution { p ...

  8. python数据结构与算法之算法和算法分析

    1.问题.问题实例.算法的概念区分. 一个例子说明一下: 问题:判断一个正整数N是否为素数   #问题是需要解决的一个需求 问题实例:判断1314是否为素数? #问题实例是该问题的一个具体例子 算法: ...

  9. java FileUtil工具类

    网上的版本太多,整合了一下适合自己用的工具类,包括读取.保存.拷贝文件等. public class FileUtil { /** * 私有构造方法,防止类的实例化,因为工具类不需要实例化. */ p ...

  10. day27_python_1124

    1.内容回顾 2.今日内容 3.创建-进程Process 4.join方法 5.进程之间数据隔离 1.内容回顾 # 进程 :是计算机中最小的资源分配单位# 进程的三状态 :就绪 运行 阻塞# 并发和并 ...