引入
<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. python基础之虚拟环境--常用指令

    虚拟环境的介绍和应用就不在这里赘述了,做个快捷的记录 这是官方给出来的解释了https://docs.python.org/zh-cn/3.7/tutorial/venv.html 还看到有的人,还安 ...

  2. 记录一下小程序canvas

    小程序canvas学习 效果图: .wxml <canvas style="width: 100vw; height: 100vh;" canvas-id="fir ...

  3. hdu-1536 S-Nim SG函数

    http://acm.hdu.edu.cn/showproblem.php?pid=1536 给出能够取的方法序列,然后求基本石子堆问题. 只要用S序列去做转移即可. 注意has初始化的一些技巧 #i ...

  4. 8.3 GOF设计模式二: 适配器模式 Adapter

    GOF设计模式二: 适配器模式 Adapter  为中国市场生产的电器,到了美国,需要有一个转接器才能使用墙上的插座,这个转接 器的功能.原理?复习单实例模式  SingleTon的三个关键点  ...

  5. echarts常用方法,饼图切换圆环中文字(三)

    在echarts的饼图应用时,遇到过一个需求就是鼠标移到半环上可以切换环中的文字,同时支持legend点击事件.误区是,鼠标移动到环上重新渲染option,以切换内部的文字.重新渲染option的做法 ...

  6. Oracle使用

    Oracle数据库首先必须在服务器端安装,安装完成后在DBCA中创建数据库,然后在Net Configuration Assistant中配置监听程序和本地Net服务名.然后安装本地Oracle客户端 ...

  7. HDFS的一些重要流程

    该随笔记录HDFS学习过程中遇到的比较重要的几个过程,包括:HDFS启动流程.DataNode备份流程.流程.写流程.删除流程.HDFS合并流程.这里都是从我的学习笔记中摘取出来的,如果哪里有误,还望 ...

  8. element-- 修改MessageBox 弹框 中确定和取消按钮顺序

    需求:修改弹框中的 取消/确定按钮顺序,及头部和底部背景颜色; 原ui效果图 需求ui效果图 方法:对取消及确定按钮自定义类名,样式重写

  9. 使用PHP添加圆形头像

    首先来看一下PHP怎样生成一个圆形透明的图片 function circle($url){ $w = 430; $h=430; // original size $path = dirname(__F ...

  10. Excel中如何截取字符串中指定字符后的部分字符

    1.如何给某列属性为时间整体加一个时间值:      场景一:假如我有一个excel中的某一列如下图所示,如何将该列的时间(用B代替整列)整体加一分钟呢?方法很简单,在空白单元格填写时间格式图中A所示 ...