Раскрывающийся список AngularJS с функцией поиска и просмотра дерева - PullRequest
Новая
       17

Раскрывающийся список AngularJS с функцией поиска и просмотра дерева

0 голосов
/ 04 июня 2018

У меня есть требование создать элемент управления или директиву ниже (см. Изображение).Директива имеет выпадающий список, при щелчке по раскрывающемуся списку отображаются окно поиска и древовидная структура.Когда вы щелкаете элемент в древовидном меню, значение должно отображаться в раскрывающемся списке.Когда вы вводите значение в текстовое поле, данные должны фильтровать древовидную структуру по значению совпадения, если данные совпадают в иерархии, она отображает иерархию.Например, если вы ищете вариант 1.1.1, результатом должен быть вариант 1> вариант 1.1> вариант 1.1.1.

Вот текущая реализация, над которой я работаю, которая пока не работает, которую я скопировал из github https://plnkr.co/edit/gmv0aUiBUMnOlvxzFdRt?p=preview

Другое решение, такое как кендо, использующее angularjs, которое имеет ту же функциональность, что и я.для приемлемо.

demo.controller.js 

/**
 * Created by Shripad on 2015-Nov-17.
 */

angular.module('App',['tree.dropdown']).controller('treeDropdownCtrl', treeDropdownCtrl);

function treeDropdownCtrl() {
    var ctrl = this;

    ctrl.treeData = [
        {
            "id": 1,
            "name": "Option 1",
            "children": [
                {
                    "id": 2,
                    "name": "Option 1.1",
                    "children": [
                        {
                            "id": 3,
                            "name": "Option 1.1.1",
                        },
                        {
                            "id": 4,
                            "name": "Option 1.1.2",
                        }
                    ]
                }
            ]
        },
        {
            "id": 5,
            "name": "Option 2",
            "children": [
                {
                    "id": 6,
                    "name": "Option 2.1",
                    "children": [
                        {
                            "id": 7,
                            "name": "Option 2.1.1",
                        },
                        {
                            "id": 8,
                            "name": "Option 2.1.2",
                        }
                    ]
                }
            ]
        }
    ]

    // Set default selected...
    ctrl.selected = ctrl.treeData[0];


    ctrl.update = function (){
        ctrl.treeData = [
            {
                "id": 1,
                "name": "Level 1",
            },
            {
                "id": 5,
                "name": "Level 2",
            }
        ]
        ctrl.selected = ctrl.treeData[0];
    }
}

tree-dropdown.js 

/**
 * Created by Shripad on 2015-Nov-17.
 */

angular.module('tree.dropdown', []).directive('treeDropdown', treeDropdown);

treeDropdown.$inject = ['$compile'];

function treeDropdown($compile){
    var template = "<div class='select' ng-click='openTree()'><p>{{selected.name}}</p></div>";
    template += "<div class='list' ng-show='isOpen'></div>";

    return {
        restrict: 'E',
        scope: {
            data: '=',
            selected: '='
        },

        template: template,
        controller: function($scope, $element){
            ctrl = $scope;
            ctrl.isOpen = false;

            ctrl.openTree = function(){
                ctrl.isOpen = ctrl.isOpen? false:true;
            }

            ctrl.childClick = function(obj){
                setSelected(ctrl, obj);
                ctrl.isOpen = false;
                ctrl.$apply();
            }
        },
        link: function(scope, element, attrs, ngModel) {
            var list =  angular.element(element[0].querySelector('.list'));

            scope.$watchGroup(['data', 'selected'], function(newValues, oldValues, scope) {
                list.html('');
                list.append("<li><input type='text' placeholder='Query' ng-model='query'/></li>");
                if(!scope.selected){
                    setSelected (scope, null);
                }
                var options = getOptions(scope, scope.data, 0);
                list.append($compile(options)(scope));
            });

            // Close on click outside the dropdown...            
            angular.element(document).bind('click', function(event){
                if (element !== event.target && !element[0].contains(event.target)) {
                    scope.$apply(function(){
                        scope.isOpen = false;
                    })
                }
            });
        }
    };

    function getOptions(scope, data, level){

        var optionUL = angular.element("<ul></ul>");


        angular.forEach(data, function(obj){
            var optionLI = angular.element("<li></li>");
            var optionA = angular.element("<p ng-class='{selected:selected.id=="+obj.id+"}' class='level-"+level+"'>"+obj.name+"</p>");
            optionLI.append(optionA);

            // Set selected option if selected id or object exist..
            if(scope.selected==obj){
                setSelected (scope, obj);
            }

            optionA.bind("click", function(){
                scope.childClick(obj);
            })

            if(obj.children){
                optionLI.append(getOptions(scope, obj.children, level+1));
            }
            optionUL.append(optionLI);
        })

        return optionUL;
    }

    function setSelected(scope, obj){
        if(obj){
            scope.selected = obj;
        } else {
            scope.selected = null;
        }
    }
}

tree-dropdown.css 

body {
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.tree-dropdown {
   position: relative;
   display: block;
   font-size: 13px;
   width: 300px;
}

.tree-dropdown .select {
   padding: 0 10px;
   height: 32px;
   display: block;
   line-height: 14px;
   color: #333333;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #cccccc;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.tree-dropdown .select::after {
   content: " ";
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 5px solid #CDCDCD;
   position: absolute;
   right: 10px;
   top: 13px;
}

.tree-dropdown p {
   line-height: 32px;
   margin: 0;
}

.tree-dropdown .list{
   box-sizing: content-box;
   position: absolute;
   top: 33px;
   left: 0px;
   right: 0px;
   background-color: #FFF;
   border-style: solid;
   border-color: #cccccc;
   border-width: 1px 1px 1px 1px;
   z-index: 1100;
   overflow-x: hidden;
   max-height: 300px;
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.tree-dropdown ul {
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}

.tree-dropdown ul:first-child { 
   padding: 0px;
}

.tree-dropdown .list p:hover{
   background: #eee;
}

.tree-dropdown .list p.selected{
   background: #DDDBFF;
}

.tree-dropdown .level-0 {
   padding-left: 15px
}
.tree-dropdown .level-1 {
   padding-left: 30px
}
.tree-dropdown .level-2 {
   padding-left: 45px
}
.tree-dropdown .level-3 {
   padding-left: 60px
}
.tree-dropdown .level-4 {
   padding-left: 75px
}
.tree-dropdown .level-5 {
   padding-left: 90px
}
.tree-dropdown .level-6 {
   padding-left: 105px
}
.tree-dropdown .level-7 {
   padding-left: 120px
}
.tree-dropdown .level-8 {
   padding-left: 135px
}
.tree-dropdown .level-9 {
   padding-left: 150px
}
.tree-dropdown .level-10 {
   padding-left: 110px
}

index.html 

<!DOCTYPE html>
<html ng-app="App">

  <head lang="en">
    <meta charset="UTF-8" />
    <title>Demo angular-tree-dropdown</title>
    <link rel="stylesheet" href="tree-dropdown.css" />
    <script src="angular.min.js"></script>
    <script src="demo.controller.js"></script>
    <script src="tree-dropdown.js"></script>
    <style type="text/css">
    .col-xs-6 {
        display: inline-block;
        width: 49%;
    }
    label {
        margin-left: 10px;
    }
    </style>
  </head>

  <body>
    <h2>Demo angular-tree-dropdown</h2>
    <div class="row" ng-controller="treeDropdownCtrl as ctrl">
      <div class="col-xs-6">
        <tree-dropdown class="tree-dropdown" data="ctrl.treeData" selected="ctrl.selected"></tree-dropdown>
      </div>
      <div class="col-xs-6">
        <button ng-click="ctrl.update()">Update Data Array</button>
        <button ng-click="ctrl.selected=ctrl.treeData[1]">Select by Object</button>
        <label>Selected Id: {{ctrl.selected.id}}</label>
      </div>
    </div>
  </body>

</html>

enter image description here

1 Ответ

0 голосов
/ 05 июня 2018

В последнем выпуске Kendo UI (R2 2018) появился новый виджет DropDownTree, который, кажется, именно то, что вы ищете. Здесь - демонстрационная страница.

...