angular-ui-tree

转自：http://www.cnblogs.com/crazyJavaBoy/p/5057347.html

angular-ui-tree的github项目地址：https://github.com/angular-ui-tree/angular-ui-tree 

DEMO目录结构如下：

bootstrap.css为3.0以上

 

app.css内容
.btn {
    margin-right: 8px;
}

.angular-ui-tree-handle {
    background: #f8faff;
    border: 1px solid #dae2ea;
    color: #7c9eb2;
    padding: 10px 10px;
}

.angular-ui-tree-handle:hover {
    color: #438eb9;
    background: #f4f6f7;
    border-color: #dce2e8;
}

.angular-ui-tree-placeholder {
    background: #f0f9ff;
    border: 2px dashed #bed2db;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

tr.angular-ui-tree-empty {
    height:100px
}

.group-title {
    background-color: #687074 !important;
    color: #FFF !important;
}


/* --- Tree --- */
.tree-node {
    border: 1px solid #dae2ea;
    background: #f8faff;
    color: #7c9eb2;
}

.nodrop {
    background-color: #f2dede;
}

.tree-node-content {
    margin: 10px;
}
.tree-handle {
    padding: 10px;
    background: #428bca;
    color: #FFF;
    margin-right: 10px;
}

.angular-ui-tree-handle:hover {
}

.angular-ui-tree-placeholder {
    background: #f0f9ff;
    border: 2px dashed #bed2db;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ol{list-style:none;}

 

angular_tree.html内容

<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">

<script src="js/angular.js"></script>
<script src="js/angular-ui-tree.js"></script>

<script type="text/ng-template" id="nodes_renderer">
 <div ui-tree-handle class="tree-node tree-node-content">
    <a class="btn btn-success btn-xs " ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)">
    <span class="glyphicon"
        ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span></a>
    {{node.title}}
  </div>
  <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer'">
    </li>
  </ol>
</script>
<div ng-controller="MyController">
    <div ui-tree id="tree-root" class="ng-scope angular-ui-tree" data-drag-enabled="false">
      <ol ui-tree-nodes ng-model="data" class="ng-pristine ng-untouched ng-valid ng-scope angular-ui-tree-nodes">
        <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer'" class="ng-scope angular-ui-tree-node" collapsed="false">
        </li>
      </ol>
    </div>
</div>
<script>
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MyController', function($scope) {
    $scope.treeOptions = {
        accept: function(sourceNodeScope, destNodesScope, destIndex) {
            return true;
        }
    }
  $scope.data = [
  {
    "id": 1,
    "title": "node1",
    "nodes": [
      {
        "id": 11,
        "title": "node1.1",
        "nodes": [
          {
            "id": 111,
            "title": "node1.1.1",
            "nodes": []
          }
        ]
      },
      {
        "id": 12,
        "title": "node1.2",
        "nodes": []
      }
    ]
  },
  {
    "id": 2,
    "title": "node2",
    "nodrop": true,
    "nodes": [
      {
        "id": 21,
        "title": "node2.1",
        "nodes": []
      },
      {
        "id": 22,
        "title": "node2.2",
        "nodes": []
      }
    ]
  },
  {
    "id": 3,
    "title": "node3",
    "nodes": [
      {
        "id": 31,
        "title": "node3.1",
        "nodes": []
      }
    ]
  }
];
});
// 页面加载完成后,再加载模块
angular.bootstrap(document,["MyApp"]);
</script>