另一部分是介绍自己写的树形菜单

简轻便单介绍:  

事先手头的二个种类要求去做一个左边手的树形菜单,侧面则是一个全部的iframe,进而构成贰个完好无缺的网址。一最初是希图用bootstrap的tree-view插件,直接把菜单的数量传过去就好了,结果后来项目又改了必要,菜单的始末和图表都是后台动态变化的,所以只能屏弃使用bootstrap插件,自身出手写了七个树形菜单。本文首要分两部分讲,三个是对于bootstrap的treeview的推行,另一有个别是介绍自个儿写的树形菜单。

bootstrap-treeview:

组件介绍://www.jb51.net/article/96222.htm

实则关于该零件在任何网址上一度讲得很详细了,笔者就不再赘言了,然则网络的接纳依旧略微难点,这里重要讲一下本人使用那个插件进程吧。

1. html援引及结构

  引用css:文件本身的css文件、bootstrp.css文件

  援引js:jquery、bootstrap-treeview.js、引用该零件的treeview.js文件

  全部HTML结构重要分为了八个部分:尾部、树状栏部分、iframe部分,使用组件的为树状栏部分:#tree

图片 1

2.援引组件js设置:

  具体设置代码如下:主要思路是用data传入菜单的数码和依赖关系,同期能够安装有个别变量来支配改树状栏的体裁和基本作用,如代码40-43行,具体变量对应的数值的含义能够景仰在此之前链接中的表格

(function(win) { 
 var data = [
  {
  text: "Parent 1",
  nodes: [
  {
  text: "Child 1",
  nodes: [
   {
   text: "Grandchild 1"
   },
   {
   text: "Grandchild 2"
   }
  ]
  },
  {
  text: "Child 2"
  }
  ]
  },
  {
  text: "Parent 2"
  },
  {
  text: "Parent 3"
  },
  {
  text: "Parent 4"
  },
  {
  text: "Parent 5"
  }
 ];  

 var tree = function() {
 $('#tree').treeview({
   data: data,
  backColor: '#293541',
  color: 'white',
  onhoverColor:'#202a33;',
  showBorder: false
  }); 
 }

 var init = function() {
 tree();
 }

 init();
})(window)

  设置达成将来树状栏的体制如下图所示,其它细节方面能够因此翻阅相应参数来安装,值得一说的是树状栏的iconLogo是通过bootstrap的glyphicon设置的,风趣味的童鞋能够去看一下这一个事物,来为菜单设置分歧的icon,不超过实际效认为不是特别好。那也是本身决定自个儿去搞三个树状栏的由来。

图片 2  

自定义树状菜单:

  treeview的插件只好点击菜单前边的加号icon展开关闭,样式的扭转有限,並且大家需求基于后台传入的数据来动态设置菜单的组织和内容,所认为了满意那几个需要,重新写了三个tree.js

  js重要分为八个部分,第多个部分是为各类菜单和子菜单注册点击事件以及通过后台传来的数目为其绑定跳转链接;第三个部分是通过ajax获取后台传来的美食做法数据,并将数据传入前台;第多少个部分是透过underscore的template函数将前台页面实行渲染,到达动态完结树状栏的机能。、

  相关js代码:

 var tree = function() {
 //一级导航点击事件
 $('.nodeBox').on('click', function(event) {
  var _this = $(this);
  var child = _this.parent().find('.nodechild_box');
  if (_this.attr('opened') == 'opened') {
  _this.parent().find('.childnode').hide();
  child.hide();
  _this.attr('opened', '');
  }else{
  _this.parent().find('.childnode').show();
  child.show();
  _this.attr('opened', 'opened');
  };
 });
 //二级导航点击事件
 $('.nodechild_box').on('click', function(event) {
  var _this = $(this);
  var child = _this.parent().find('.gchild_box');
  if (_this.attr('opened') == 'opened') {
  child.hide();
  _this.parent().find('.gchildnode').hide();
  _this.find('.add').attr('src', 'images/icon_add.png');
  _this.attr('opened', '');
  }else{
  child.show();
  _this.parent().find('.gchildnode').show();
  _this.find('.add').attr('src', 'images/icon_minus.png');
  _this.attr('opened', 'opened');
  };
 });
 //三级导航点击事件
 $('.gchild_box').on('click', function(event) {
  var _this = $(this);
  var child = _this.parent().find('.ggchild_box');
  if (_this.attr('opened') == 'opened') {
  child.hide();
  _this.find('.add').attr('src', 'images/icon_add.png');
  _this.attr('opened', '');
  }else{
  child.show();
  _this.find('.add').attr('src', 'images/icon_minus.png');
  _this.attr('opened', 'opened');
  };
 });

 //hover显示箭头及背景变化
 $('.nodeBox').mouseover(function(event) {
  $(this).addClass('tree_hover');
  $(this).find('.arrow').show();
 });
 $('.nodeBox').mouseout(function(event) {
  $(this).removeClass('tree_hover');
  $(this).find('.arrow').hide();
 });
 $('.nodechild_box').mouseover(function(event) {
  $(this).addClass('box_hover');
  $(this).find('.arrow').show();
 });
 $('.nodechild_box').mouseout(function(event) {
  $(this).removeClass('box_hover');
  $(this).find('.arrow').hide();
 });
 $('.gchild_box').mouseover(function(event) {
  $(this).addClass('box_hover');
  $(this).find('.arrow').show();
 });
 $('.gchild_box').mouseout(function(event) {
  $(this).removeClass('box_hover');
  $(this).find('.arrow').hide();
 });
 $('.ggchild_box').mouseover(function(event) {
  $(this).addClass('box_hover');
  $(this).find('.arrow').show();
 });
 $('.ggchild_box').mouseout(function(event) {
  $(this).removeClass('box_hover');
  $(this).find('.arrow').hide();
 });
 };

 //链接函数
 var tree_link = function() {

 var linkBox = $('[menurl]');
 linkBox.each(function(i, ele) {
  var _ele = $(ele);
  var key = _ele.attr('menurl');
  if(key != '/'){
  $(this).on('click',function(){
   $('#mainweb').attr('src', key);
   auto();
  }) 
  }

 });
 };

 //获取登陆用户数据
 var getData = function() {
 var cond = sessionStorage.cond; 

 $.post("XXXX", {}, function(json) {
  console.log(json)
  if(json.code == 200){
  data = json.data;
  fillUserName(data);
  fillTree(data);
  var length = $('.nodeBox').length ;
  for (var i = 0;i < length;i  ) {  
   var iconId = data.icons[i].iconId;
   $('.nodeBox').eq(i 1).attr('menuid',i);
   $('.nodeBox').eq(i 1).find('img').attr('src','images/'  data.icons[iconId-1].name  '');

  }
  //为每个菜单添加链接
  tree_link()
  }
 }, function(xhr) {
  console.log(xhr)
 });

 }


 var fillTree = function(data){
 var tmplDom = $('#tree');
 tmplDom.parent().html(eking.template.getHtml(tmplDom.html(),data));
 tree();
 }

HTML渲染:  

<div class="main w_1200">
 <div class="tree">
 <script type="text/html" id="tree">
  <div class="tree_box">
  <div class="nodeBox index" menurl="notice.html">
   <img src="images/icon_home.png" alt="图片 3">
   首页
   <img src="images/icon_arrow.png" alt="图片 4">
  </div>
  </div>
  <%var menus = data.menus;%>
  <%for(var i = 0;i < menus.length;i  ){%>
  <div class="tree_box">
  <div class="nodeBox" menurl=<%=menus[i].url%> >
   <img src="" alt="图片 5">
   <%=menus[i].name%>
  </div>
  <%var childmenus = menus[i].childs;%>
  <%for(var j = 0;j < childmenus.length;j  ){%>
  <div class="childnode">
   <div class="nodechild_box" menurl=<%=childmenus[j].url%> >
   <%if(childmenus[j].childs.length != 0){%>
   <img class="add" src="images/icon_add.png" alt="图片 6">
   <%=childmenus[j].name%>
   <%}else{%>
   <%=childmenus[j].name%>
   <img src="images/icon_arrow.png" alt="图片 7">
   <%}%>
   </div>
   <%var cchildmenus = childmenus[j].childs;%>
   <%for(var k = 0;k < cchildmenus.length;k  ){%>
   <div class="gchildnode">
   <div class="gchild_box" menurl=<%=cchildmenus[k].url%> >
    <%if(cchildmenus[k].childs.length != 0){%>
    <img class="add" src="images/icon_add.png" alt="图片 8">
    <%=cchildmenus[k].name%>
    <%}else{%>
    <%=cchildmenus[k].name%>
    <img src="images/icon_arrow.png" alt="图片 9">
    <%}%>
   </div>
   <%var ccchildmenus = cchildmenus[k].childs;%>
   <%for(var l = 0;l < ccchildmenus.length;l  ){%>
   <div class="ggchild_box" menurl=<%=ccchildmenus[l].url%> >
    <%=ccchildmenus[l].name%>
    <img src="images/icon_arrow.png" alt="图片 10">
   </div>
   <%}%>
   </div>
   <%}%>
  </div>
  <%}%>
  </div>
 <%}%>
 </script>
 </div>

后台传入的数目格式为

图片 11

美食指南成效如图:

图片 12

存在的贫乏和主题材料:

为了跟上项目进程,tree.js尚未组件化,等一时间了策动把这一块封装为叁个js组件,通过设置参数实现树状栏的设置。

P.S.由于个体技艺水平有限,难免出现谬误,请多多指正 :)

上述正是本文的全体内容,希望对我们的读书抱有扶助,也期待大家多多帮忙脚本之家。

您可能感兴趣的篇章:

  • bootstrap treeview 扩张addNode方法动态增加子节点的办法
  • BootStrap TreeView使用实例详解
  • bootstrap插件treeview达成全选父节点下全体子节点和反选功能
  • 解析使用BootStrap TreeView插件完毕灵活布署快递模板
  • Bootstrap树形菜单插件TreeView.js使用办法详解
  • 浅析BootStrap Treeview的简练利用
  • 据说MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据协助json字符串、list集合
  • 据书上说MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据辅助json字符串、list集结
  • bootstrap-treeview自定义双击事件完结格局
  • bootstrap-Treeview达成级联勾选

本文由金沙澳门官网-www.js333com-金沙js333com发布于金沙澳门官网计算机,转载请注明出处:另一部分是介绍自己写的树形菜单

您可能还会对下面的文章感兴趣: