var contex_menu = {
 'context1' : {
  elements : [
   {
    text : 'Node Actions',
    icon: 'images/blue_key.png',
    action : function(node) {

    },
    submenu: {
     elements : [
      {
       text : 'Toggle Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.toggleNode();
       }
      },
      {
       text : 'Expand Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.expandNode();
       }
      },
      {
       text : 'Collapse Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.collapseNode();
       }
      },
      {
       text : 'Expand Subtree',
       icon: 'images/tree.png',
       action : function(node) {
        node.expandSubtree();
       }
      },
      {
       text : 'Collapse Subtree',
       icon: 'images/tree.png',
       action : function(node) {
        node.collapseSubtree();
       }
      },
      {
       text : 'Delete Node',
       icon: 'images/delete.png',
       action : function(node) {
        node.removeNode();
       }
      },
     ]
    }
   },
   {
    text : 'Child Actions',
    icon: 'images/blue_key.png',
    action : function(node) {

    },
    submenu: {
     elements : [
      {
       text : 'Create Child Node',
       icon: 'images/add1.png',
       action : function(node) {
        node.createChildNode('Created',false,'images/folder.png',null,'context1');
       }
      },
      {
       text : 'Create 1000 Child Nodes',
       icon: 'images/add1.png',
       action : function(node) {
        for (var i=0; i<1000; i++)
         node.createChildNode('Created -' + i,false,'images/folder.png',null,'context1');
       }
      },
      {
       text : 'Delete Child Nodes',
       icon: 'images/delete.png',
       action : function(node) {
        node.removeChildNodes();
       }
      }
     ]
    }
   }
  ]
 }
};        

纯javascript响应式树形菜单功用,javascript响应树形

简短教程
aimaraJS是一款极其实用的纯javascript响应式多级目录树结构插件。该目录树能够动态增进和删除树节点,能够创设连串树结构,各样节点上能够都包涵右键上下文菜单,何况各个节点上都得以安顿差异的Logo。它的性状有:

  • 能够成立四个主干的树结构并渲染它。
  • 能够实时增多和删除树节点。
  • 能够来得分歧的树节点Logo。
  • 在树节点展开和关闭的时候能够自定义事件。
  • 每一种树节点上都得以制作右键上下文菜单。

 图片 1

动用方法
使用该幻灯片插件要求在页面中引进Aimara.css和Aimara.js文件。

<link rel="stylesheet" href="css/Aimara.css" />
<script src="js/Aimara.js"></script>       

 HTML结构

能够运用三个空的<div>来作为这么些目录树的容器。

<div id="div_tree"></div>       

JAVASCRIPT

接下来你能够经过下边包车型大巴艺术来开首化该目录树插件。你能够创建一些树节点和子节点,然后渲染它们。节点能够在树被渲染以前或之后增多到树结构中。

<script type="text/javascript">
  window.onload = function() {
    //创建树结构
    var tree = createTree('div_tree','white');
    //创建树节点node1
    var node1 = tree.createNode('First node',false,'images/star.png',null,null,null);
    //node1添加到树结构中
    node1.createChildNode('First child node', false, 'images/blue_key.png',null,null);
    //渲染树结构
    tree.drawTree();
    //创建第二个树节点
    node1 = tree.createNode('Second node',false,'images/star.png',null,null,null);
    node1.createChildNode('Second child node', false, 'images/blue_key.png',null,null);
  };
</script>        

为树节点创设上下文菜单

能够经过上边包车型大巴秘诀来创建一个右键上下文菜单。

var contex_menu = {
 'context1' : {
  elements : [
   {
    text : 'Node Actions',
    icon: 'images/blue_key.png',
    action : function(node) {

    },
    submenu: {
     elements : [
      {
       text : 'Toggle Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.toggleNode();
       }
      },
      {
       text : 'Expand Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.expandNode();
       }
      },
      {
       text : 'Collapse Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.collapseNode();
       }
      },
      {
       text : 'Expand Subtree',
       icon: 'images/tree.png',
       action : function(node) {
        node.expandSubtree();
       }
      },
      {
       text : 'Collapse Subtree',
       icon: 'images/tree.png',
       action : function(node) {
        node.collapseSubtree();
       }
      },
      {
       text : 'Delete Node',
       icon: 'images/delete.png',
       action : function(node) {
        node.removeNode();
       }
      },
     ]
    }
   },
   {
    text : 'Child Actions',
    icon: 'images/blue_key.png',
    action : function(node) {

    },
    submenu: {
     elements : [
      {
       text : 'Create Child Node',
       icon: 'images/add1.png',
       action : function(node) {
        node.createChildNode('Created',false,'images/folder.png',null,'context1');
       }
      },
      {
       text : 'Create 1000 Child Nodes',
       icon: 'images/add1.png',
       action : function(node) {
        for (var i=0; i<1000; i++)
         node.createChildNode('Created -' + i,false,'images/folder.png',null,'context1');
       }
      },
      {
       text : 'Delete Child Nodes',
       icon: 'images/delete.png',
       action : function(node) {
        node.removeChildNodes();
       }
      }
     ]
    }
   }
  ]
 }
};        

接下来通过上面包车型客车艺术来开端化树结构:

tree = createTree('div_tree','white',contex_menu);
tree.drawTree();   

在树结构渲染之后实时加多贰个树节点:

tree.createNode('Real Time',false,'images/leaf.png',null,null,'context1'); 

 以上正是本文的全体内容,为大家介绍了一款纯js响应式完成树结构菜单栏的特效,希望大家垂怜。

简要教程
aimaraJS是一款极度实用的纯javascript响应式多级目录树结构插件。该目录树能够动…

具体运用办法:

jQuery多级列表树插件基于Bootstrap,以简要和古雅的法门来显示一些后续树结构,如视图树、列表树等。

<link rel="stylesheet" href="css/Aimara.css" />
<script src="js/Aimara.js"></script>       

你能够透过二种方式来调用方法:
1、插件包装器:插件的包装器能够用作访谈底层方法的代办。
$(‘#tree’).treeview(‘methodName’, args) 
几个参数必须利用数组对象来传播。

总结

选择方式
运用该幻灯片插件须求在页面中引进Aimara.css和Aimara.js文件。

HTML结构

$(function () {
  var defaultData;
   $.ajax({
    type: "post",
    url: "项目请求路径方法.json",
    dataType: "json",
    success: function (result) { 
    defaultData=result;
     var initSearchableTree = function() {
     return $('#treeview-searchable').treeview({
      data: defaultData,
      nodeIcon: 'glyphicon glyphicon-globe',
      emptyIcon: '', //没有子节点的节点图标
      //collapsed: true,
     });
     };
     var $searchableTree = initSearchableTree();
     $('#treeview-searchable').treeview('collapseAll', { 
     silent : false//设置初始化节点关闭
    });
     var findSearchableNodes = function() {
     return $searchableTree.treeview('search', [ $.trim($('#input-search').val()), { ignoreCase: false, exactMatch: false } ]);
     };
     var searchableNodes = findSearchableNodes();
     // Select/unselect/toggle nodes
     $('#input-search').on('keyup', function (e) {
     var str = $('#input-search').val(); 
     if($.trim(str).length>0){
      searchableNodes = findSearchableNodes();
     } else {
     $('#treeview-searchable').treeview('collapseAll', { 
      silent : false //设置初始化节点关闭
     });
     }
     //$('.select-node').prop('disabled', !(searchableNodes.length >= 1));
     });
    var search = function(e) {
      var pattern = $.trim($('#input-search').val());
      var options = {
      ignoreCase: $('#chk-ignore-case').is(':checked'),
      exactMatch: $('#chk-exact-match').is(':checked'),
      revealResults: $('#chk-reveal-results').is(':checked')
      };
      var results = $searchableTree.treeview('search', [ pattern, options ]);
      var output = '<p>' + results.length + ' 匹配的搜索结果</p>';
      $.each(results, function (index, result) {
      output += '<p>- ' + result.text + '</p>';
      });
      $('#search-output').html(output);
     }
     $('#btn-search').on('click', search);
     $('#input-search').on('keyup', search);
     $('#btn-clear-search').on('click', function (e) {
      $searchableTree.treeview('clearSearch');
      $('#input-search').val('');
      $('#search-output').html('');
      $('#treeview-searchable').treeview('collapseAll', {
      silent : false//设置初始化节点关闭
     });
     });

    },
    error: function () {
     alert("省市区地域信息加载失败!")
    }
   });
  });

下一场通过下边包车型客车方法来早先化树结构:

//该方法返回一个treeview的对象实例
$('#tree').treeview(true)
 .methodName(args);

//对象实例也保存在DOM元素的data中,
//可以使用'treeview'的id来访问它。
$('#tree').data('treeview')
 .methodName(args); 
<!-- 省市区地域查询展示 -->
 <div class="container">
  <div class="row">
  <div class="col-sm-4">
   <h4>快捷搜索</h4>
   <!-- <form> -->
   <div class="form-group">
    <label for="input-search" class="sr-only">快捷搜索:</label>
    <input type="input" class="form-control" id="input-search" placeholder="请输入要查询的省市区名称信息..." value="">
   </div>
   **_ <!-- 该部分为复选框,用于丰富搜索体验,本文忽略
<div class="checkbox">
    <label>
    <input type="checkbox" class="checkbox" id="chk-ignore-case" value="false"/>
     忽略大小写
    </label>
   </div>
   <div class="checkbox">
    <label>
    <input type="checkbox" class="checkbox" id="chk-exact-match" value="false">
     准确匹配
    </label>
   </div>
   <div class="checkbox">
    <label>
    <input type="checkbox" class="checkbox" id="chk-reveal-results" value="false">
     显示结果
    </label>
   </div> -->_**
   <button type="button" class="btn btn-success" id="btn-search">搜索</button>
   <button type="button" class="btn btn-default" id="btn-clear-search">清除</button>
   <!-- </form> -->
  </div>
  <div class="col-sm-4">
   <h4>省市区名称层级树</h4>
   <div id="treeview-searchable" class=""></div>
  </div>
  <div class="col-sm-4">
   <h4>查询结果展示</h4>
   <div id="search-output"></div>
  </div>
  </div>
  </div>

在树结构渲染之后实时增加三个树节点:

2、直接行使treeview:你能够透过上边二种格局中的一种来赢得treeview对象实例。

好了,话十分少说,开整。

 以上就是本文的全体内容,为我们介绍了一款纯js响应式达成树结构菜单栏的特效,希望大家爱不忍释。

图片 2

实用Bootstrap树形菜单特效插件Bootstrap Tree
View,非常不易的Bootstrap插件,未来广大Bootstrap制作的页面都亟需此成效,此插件须要Bootstrap3版本以及jQuery
2.0极以上版本辅助,扶助广大参数自定义功用,颜色、背景象、Logo、链接等,如故很正确的。

为树节点创设上下文菜单

参数能够定制treeview的暗中认可外观和表现。参数使用多个指标来在插件伊始化时传出:

图片 3 

能够透过下边包车型大巴办法来成立七个右键上下文菜单。

// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$('#tree').treeview({
 data: data,   // data is not optional
 levels: 5,
 backColor: 'green'
});     

二、前台页面

<script type="text/javascript">
  window.onload = function() {
    //创建树结构
    var tree = createTree('div_tree','white');
    //创建树节点node1
    var node1 = tree.createNode('First node',false,'images/star.png',null,null,null);
    //node1添加到树结构中
    node1.createChildNode('First child node', false, 'images/blue_key.png',null,null);
    //渲染树结构
    tree.drawTree();
    //创建第二个树节点
    node1 = tree.createNode('Second node',false,'images/star.png',null,null,null);
    node1.createChildNode('Second child node', false, 'images/blue_key.png',null,null);
  };
</script>        
{
 text: "Node 1",
 icon: "glyphicon glyphicon-stop",
 selectedIcon: "glyphicon glyphicon-stop",
 color: "#000000",
 backColor: "#FFFFFF",
 href: "#node-1",
 selectable: true,
 state: {
 checked: true,
 disabled: true,
 expanded: true,
 selected: true
 },
 tags: ['available'],
 nodes: [
 {},
 ...
 ]
} 
<link rel="stylesheet" href="项目静态资源路径/bootstrap-treeview/css/bootstrap.css" rel="external nofollow" >
 <script type="text/javascript" src="项目静态资源路径/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
 <script type="text/javascript" src="项目静态资源路径/bootstrap/bootstrap.js"></script>
 <script type="text/javascript" src="项目静态资源路径/bootstrap-treeview/js/jquery.js"></script>
 <script type="text/javascript" src="项目静态资源路径/bootstrap-treeview/js/bootstrap-treeview.js"> </script>
admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注