angular三级联动组件编写，树形组件

<!DOCTYPE html>
<html ng-app="com.ngbook.demo">
<head>
    <Meta name="description" content="ng trrview example">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <Meta charset="utf-8">
    <title>JS Bin</title>
<style type="text/css">
ul {
    list-style: none;
}

.text-field {
    cursor: pointer;
}

.check-Box {
    width: 24px;
    height: 18px;
    border-radius: 8px;
}
</style>
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
angular.module("com.ngbook.demo",[])
    .controller("DemoController",['$http','$scope',function($http,$scope) {
        var dataset = [{
            "code": "00","name": "总部","level": "0","parentcode": "","parentname": ""
        },{
            "code": "01","name": "东北","level": "1","parentcode": "00","parentname": "总部"
        },{
            "code": "02","name": "辽宁","level": "2","parentcode": "01","parentname": "东北"
        },{
            "code": "03","name": "东南",{
            "code": "4","name": "123","parentname": "总部"
        }]
        $scope.treedata = [];

//遍历取出数据,解析多个层级数据,一维数据解析成树形，如本来就为树形结构，忽略此步骤

/*同getTree函数同种功能,临时变量写法*/
        function listTree(data,pid) {
            var result = [],temp;
            for (var i = 0; i < data.length; i++) {
                if (data[i].parentcode == pid) {
                    var obj = {
                        "name": data[i].name,"code": data[i].code
                    }
                    temp = listTree(data,data[i].code)
                    if (temp.length > 0) {
                        obj.children = temp
                    }
                    result.push(obj)
                }
            }
            return result
        }

        function getTree(nodes) {
            var gc = function(parentid) {
                var cn = [];
                for (var i = 0; i < nodes.length; i++) {
                    var n = nodes[i];
                    if (n.parentcode == parentid) {
                        n.children = gc(n.code);
                        cn.push(n);
                    };
                };
                return cn;
            };
            return gc("");
        };

var vm = this;
        vm.tree = getTree(dataset);
        // vm.tree = listTree(dataset,"");

vm.itemClicked = function($item) {
            vm.selectedItem = $item;
            console.log($item,'item clicked');
        };

        vm.itemCheckedChanged = function($item) {
            $http.post('/url',$item);
            console.log($item,'item checked');
        };

        return vm;
    }])

//自定义指令treeView，编写成组件

.directive('treeView',[function() {
        return {
            restrict: 'E',templateUrl: '/treeView.html',scope: {//隔离作用域
                treeData: '=',canChecked: '=',//隔离scope和父scope的双向绑定
                textField: '@',//单向 父scope属性值改变时，directive的scope值也会跟这改变，但是相反就不行
                itemClicked: '&',itemCheckedChanged: '&',//当 directive 中有动作需要更新到父 scope 中的时候，可以在父 scope 上下文中执行一段代码或者一个函数.
                itemTemplateUrl: '@'
            },controller: ['$scope',function($scope) {
                $scope.itemExpended = function(item,$event) {
                    item.$$isExpend = !item.$$isExpend;
                    $event.stopPropagation();
                };

                $scope.getItemIcon = function(item) {
                    var isLeaf = $scope.isLeaf(item);

                    // if (isLeaf) {
                    //     return 'fa fa-leaf';
                    // }

                    return item.$$isExpend ? 'fa fa-minus' : 'fa fa-plus';
                };

                $scope.isLeaf = function(item) {
                    return !item.children || !item.children.length;
                };

                $scope.warpCallback = function(callback,item,$event) {
                    ($scope[callback] || angular.noop)({
                        $item: item,$event: $event
                    });
                };
            }]
        };
    }]);
    </script>
</head>

<body>
<div ng-controller="DemoController as demo" class="container">
    <div class="row">
        <h2>Tree view</h2>
        <tree-view tree-data="demo.tree" text-field="name" value-field='id' item-clicked="demo.itemClicked($item)" item-checked-changed="demo.itemCheckedChanged($item)" can-checked="false"></tree-view>
    </div>
    <div class="row">
        <h2>Item selected</h2>
        <pre>{{demo.selectedItem | json}}</pre>
    </div>
    <script type="text/ng-template" id="/treeView.html">
        <ul class="tree-view">
            <li ng-repeat="item in treeData" ng-include="itemTemplateUrl || '/treeItem.html'"></li>
        </ul>
    </script>
    <script type="text/ng-template" id="/treeItem.html">
            <i ng-click="itemExpended(item,$event);" class="{{getItemIcon(item)}}">click</i>
            <input type="checkBox" ng-model="item.$$isChecked" class="check-Box" ng-if="canChecked" ng-change="warpCallback('itemCheckedChanged',$event)">
            <span class='text-field' ng-click="warpCallback('itemClicked',$event);">{{item[textField]}}</span>
            <ul ng-if="!isLeaf(item)" ng-show="item.$$isExpend">
                <li ng-repeat="item in item.children" ng-include="itemTemplateUrl || '/treeItem.html'">
                </li>
            </ul>
        </script>
    </div>
</body>

</html>

angular三级联动组件编写，树形组件

相关推荐