angular实现可折叠树形文件菜单效果代码-html代码-BFW代码库

angular实现可折叠树形文件菜单效果代码

代码语言：html

代码描述：angular实现可折叠树形文件菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
body{
    background: white;
}
div[data-angular-treeview] {
  /* prevent user selection */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* default */
  font-family: Tahoma;
  font-size:13px;
  color: #555;
  text-decoration: none;
}

div[data-tree-model] ul {
  margin: 0;
  padding: 0;
  list-style: none; 
  border: none;
  overflow: hidden;
}

div[data-tree-model] li {
  position: relative;
  padding: 0 0 0 20px;
  line-height: 20px;
}

div[data-tree-model] li .expanded {
  padding: 1px 10px;
  background-image: url("//repo.bfw.wiki/bfwrepo/image/5fb5d4d3440cc.png");
  background-repeat: no-repeat;
}

div[data-tree-model] li .collapsed {
  padding: 1px 10px;
  background-image: url("//repo.bfw.wiki/bfwrepo/image/5fb5d4972cdd7.png");
  background-repeat: no-repeat;
}

div[data-tree-model] li .normal {
  padding: 1px 10px;
  background-image: url("//repo.bfw.wiki/bfwrepo/image/5fb5d4b842b1e.png");
  background-repeat: no-repeat;
}

div[data-tree-model] li i, div[data-tree-model] li span {
  cursor: pointer;
}

div[data-tree-model] li .selected {
  background-color: #aaddff;
  font-weight: bold;
  padding: 1px 5px;
}
</style>



</head>

<body translate="no" >
  <div ng-app="myApp">
  <div ng-controller="myController">

    <div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;">
      <span><b>Selected Node</b> : {{mytree.currentNode.roleName}}</span>
    </div>

    <!--
      [TREE attribute]
      angular-treeview: the treeview directive
      tree-id : each tree's unique id.
      tree-model : the tree model on $scope.
      node-id : each node's id
      node-label : each node's label
      node-children: each node's children
    -->
    <div
      data-angular-treeview="true"
      data-tree-id="mytree"
      data-tree-model="roleList"
      data-node-id="roleId"
      data-node-label="roleName"
      data-node-children="children" >
    </div>

  </div>
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular.1.7.js"></script>
  
      <script>
(function () {

  //angular module
  var myApp = angular.module('myApp', ['angularTreeview']);

  //test controller
  myApp.controller('myController', function ($scope) {

    $scope.roleList1 = [
    { "roleName": "User", "roleId": "role1", "children": [
      { "roleName": "subUser1", "roleId": "role11", "collapsed": true, "children": [] },
      { "roleName": "subUser2", "roleId": "role12", "collapsed": true, "children": [
        { "roleName": "subUser2-1", "roleId": "role121", "children": [
          { "roleName": "subUser2-1-1", "roleId": "role1211", "children": [] },
          { "roleName": "subUser2-1-2", "roleId": "role1212", "children": [] }] }] }] },

.........完整代码请登录后点击上方下载按钮下载查看