Question

首先，这是图像：

...并链接到live example。

是的，实际示例不起作用，这就是我将问题发布到SO的原因。

左列中的每个项目都可以有一种或多种颜色，在json文件中指定。在我的例子中，天空是蓝色的，太阳是黄色的，草是绿色的，自行车是蓝色和黄色的。你可以看到它directly in the file itself。

我想要什么？

如果我选择＆＃34; blue＆＃34;在第一个下拉列表中，将第二个下拉列表留空，然后表格会显示天空和自行车。
如果我选择＆＃34; blue＆＃34;在第一次下拉和＆＃34;黄色＆＃34;在第二个，表格将只显示自行车。

怎么做？

虽然我相信实例更适合使用，但我也直接在这里发布所有代码。

的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's 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];
        }
    };
});

Answer 1

我之前使用ag-grid与您的要求完全相同（想要列上的过滤选项）。

同一列中的多个下拉过滤器

1 个答案: