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

最新推荐文章于 2023-04-18 10:51:58 发布

weixin_33958366

最新推荐文章于 2023-04-18 10:51:58 发布

阅读量372

点赞数

文章标签： javascript json ViewUI

原文链接：https://segmentfault.com/a/1190000008715870

版权

<!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": "东南",
            "level": "1",
            "parentcode": "00",
            "parentname": "总部"
        }, {
            "code": "4",
            "name": "123",
            "level": "1",
            "parentcode": "00",
            "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', item, $event)">
            <span class='text-field' ng-click="warpCallback('itemClicked', item, $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>

weixin_33958366

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular三级联动组件编写，树形组件

<!DOCTYPE html><html ng-app="com.ngbook.demo"><head> <meta name="description" content="ng trrview example"> <script src="http://cdn.s...
复制链接

扫一扫

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

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