ng-js-tree的基本使用

ng-jstree

标签(空格分隔): angularjs ngJstree


ng-jstree的简单使用

ng-js-tree
引用文件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>

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值