ng-js-tree的基本使用

ng-jstree

标签（空格分隔）： angularjs ngJstree

---

ng-jstree的简单使用

引用文件angularjs以及ng-js-tree Git下载ng-js-tree

controller

angular.module('MetronicApp').controller('treeCtrl',
        ['$rootScope', '$scope', '$location', '$uibModal', 'toastr', '$timeout','JsTreeDemoService',
            function ($rootScope,$scope,$location,$uibModal,toastr,$timeout,JsTreeDemoService) {
                $scope.$on('$viewContentLoaded', function () {
                    App.initAjax();
                });
                $scope.ignoreChanges = false;//用于jstree数据的动态监听
                JsTreeDemoService.getMenuTree().$promise.then(function (result) {
                    if ('success' == result.status) {
                        $scope.ignoreChanges = true;
                        $scope.treeData = result.data;//树的ng-model数据的双向绑定
                        $scope.treeConfig.version++;//递增版本
                    }
                });
                //tree的配置项
                $scope.treeConfig = {
                    core : {
                        multiple : true,
                        animation: true,
                        error : function(error) {
                            $log.error('treeCtrl: error from js tree - ' + angular.toJson(error));
                        },
                        check_callback : true,
                        worker : true
                    },
                    types : {
                        default : {
                            icon : 'glyphicon glyphicon-folder-open'
                        },
                        star : {
                            icon : 'glyphicon glyphicon-star'
                        },
                        cloud : {
                            icon : 'glyphicon glyphicon-cloud'
                        }
                    },
                    version : 1,
                    plugins : ['types','checkbox']
                };
                //树加载完成事件
                $scope.readyCB = function() {
                    $scope.treeInstance.jstree(true).open_all();//加载完成默然打开全部节点
                };
                //树选中事件
                $scope.selectCB = function(e,item) {
                    $scope.selectnode = $scope.treeInstance.jstree(true).get_selected('true')[0];//当前选中的node节点
                    console.log($scope.selectnode);
                };
                //监听change事件
                $scope.applyModelChanges = function() {
                    return !$scope.ignoreChanges;
                };
        }]);

html

<div class="portlet-body" ng-controller="treeCtrl">
    <div js-tree="treeConfig"
         should-apply="applyModelChanges()"
         ng-model="treeData"
         tree="treeInstance"
         tree-events="ready:readyCB;select_node:selectCB">
    </div>
</div>

---

本文图片均来自网络
如有错误多多指正