Несколько выпадающих фильтров в одном столбце

Question

Несколько выпадающих фильтров в одном столбце

0

Прежде всего, вот изображение:

Да, живой пример не работает, поэтому я отправляю вопрос в SO.

Каждый элемент в левом столбце может иметь один или несколько цветов, указанных в json файле. В моем примере небо голубое, солнце желтое, зеленая трава, а синий - желтый. Вы можете увидеть его непосредственно в самом файле.

Что я хочу?

Если я выберу "синий" в первом раскрывающемся списке и оставьте второй раскрывающийся список пустым, тогда таблица покажет мне небо и велосипед.
И если я выберу "синий" в первом выпадающем меню и "желтый" во втором, таблица покажет только байк.

Как это можно сделать?

Хотя я считаю, что живой пример более удобен в использовании, я также размещаю весь код прямо здесь.

index.html

<!doctype html>
<html ng-app="app">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
        <script src="http://ui-grid.info/release/ui-grid.js"></script>
        <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
        <link rel="stylesheet" href="app.css" type="text/css">
    </head>
    <body>

        <div ng-controller="MainCtrl">
            <br>
            <br>
            <button id='toggleFiltering' ng-click="toggleFiltering()" class="btn btn-success">Toggle Filtering</button>
            <div id="grid1" ui-grid="gridOptions" class="grid"></div>
        </div>

        <script src="app.js"></script>
    </body>
</html>

test.json

[
    {
        "name": "sky",
        "color": {
            "color1": "blue",
            "color2": ""
        }
    },
    {
        "name": "sun",
        "color": {
            "color1": "yellow",
            "color2": ""
        }
    },
    {
        "name": "grass",
        "color": {
            "color1": "green",
            "color2": ""
        }
    },
    {
        "name": "john bike",
        "color": {
            "color1": "blue",
            "color2": "yellow"
        }
    }
]

app.css

.header-filtered {
    color: blue;
}

app.js

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {

    $scope.gridOptions = {
        enableFiltering: true,
        onRegisterApi: function(gridApi){
            $scope.gridApi = gridApi;
        },
        columnDefs: [

            { field: 'name', headerCellClass: $scope.highlightFilteredHeader },


            // THE COLORS GOES HERE

            { field: 'color', filters: [
                {
                        type: uiGridConstants.filter.SELECT,
                        selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
                },
                {
                        type: uiGridConstants.filter.SELECT,
                        selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
                }
            ], cellFilter: 'mapColor', headerCellClass: $scope.highlightFilteredHeader},

        ]
    };

    $http.get('https://rawgit.com/johncja/b8bf0cf099f5437025a5/raw/42c80882674bd5700fd2bd399992e8eab9afb4a8/test.json')
        .success(function(data) {
            $scope.gridOptions.data = data;

            data.forEach( function addDates( row, index ){

                if (row.color==='blue') {
                    row.color = '1';
                } else if (row.color==='yellow') {
                    row.color = '2';
                } else if (row.color==='green') {
                    row.color = '3';
                }

            });
        });

    $scope.toggleFiltering = function(){
        $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
        $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
    };
}])
.filter('mapColor', function() {
    var colorHash = {
        1: 'blue',
        2: 'yellow',
        3: 'green'
    };

    return function(input) {
        if (!input){
            return '';
        } else {
            return colorHash[input];
        }
    };
});

john c. j. 22 март 2016, в 13:47

Источник

Теги:

angularjs

angular-ui

angular-ui-grid

1 ответ

Ещё вопросы

Vinit Solanki · Answer 1 · 2016-03-22T11-24-00.000Z

Я использую ag-grid раньше, точно так же, как и ваши требования (требуется опция фильтрации в столбце).