如何将两个过滤后的 ui 网格合并为一个

Question

我正在使用 angularjs ui 网格 api。我创建了一个 html 输入标签，以根据用户输入将过滤器应用于所有列。我想过滤每一列，然后将结果组合成一个 ui 网格

我尝试遍历每一列并将输入标签中的文本过滤器应用于所有列。但是，这会在 ui 网格中查找所有列中包含来自输入标签的文本的行。我想显示至少有一列包含过滤字符串的所有行，而不是所有列中包含过滤字符串的所有行

angular.module('main') .controller('mainCtrl', function($scope, $filter, uiGridConstants) {

    // ********************************************
    // ui-grid configuration and functionality
    // ********************************************
    $scope.atlasUserMonitorGrid = {

        enableSorting: true,
        enableFiltering: true,
        enableGridMenu: true,
        enableColumnMenus: false,

        // pagination settings
        paginationPageSizes: [1, 2, 5, 10],
        paginationPageSize: 5,

        // Dummy test data
        data: [
            {counter: 1, username: 'bob27', last_view: '27/12/2018', total_views: 48, group: 'group 1', data_view: 32, records: 3, crosstabs: 8, reports: 5, explorer: 3, bookmarks: 2},
            {counter: 2, username: 'sarah01', last_view: '04/01/2019', total_views: 8, group: 'group 2', data_view: 2, records: 2, crosstabs: 7, reports: 4, explorer: 2, bookmarks: 12},
            {counter: 3, username: 'jono0501', last_view: '09/01/2019', total_views: 33, group: 'group 1', data_view: 12, records: 7, crosstabs: 4, reports: 18, explorer: 78, bookmarks: 44},
            {counter: 4, username: 'peterh', last_view: '21/01/2019', total_views: 33, group: 'group 3', data_view: 111, records: 12, crosstabs: 6, reports: 55, explorer: 9, bookmarks: 5},
            {counter: 5, username: 'joe201', last_view: '11/02/2019', total_views: 34, group: 'group 1', data_view: 3, records: 17, crosstabs: 24, reports: 128, explorer: 178, bookmarks: 144},
            {counter: 6, username: 'amy_mcN', last_view: '25/01/2019', total_views: 65, group: 'group 2', data_view: 212, records: 27, crosstabs: 14, reports: 718, explorer: 278, bookmarks: 244},
            {counter: 7, username: 'ke', last_view: '15/02/2019', total_views: 1156, group: 'group 3', data_view: 1124, records: 47, crosstabs: 64, reports: 17, explorer: 378, bookmarks: 344},
        ],

        columnDefs: [
            {
                field: 'counter',
                displayName: '',
                name: 'Counter',
                type: 'number',
                sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                enableSorting: false,
                enableFiltering: false,
                width: 45
            },
            {
                field: 'username',
                displayName: 'Username',
                name: 'Username',
                type: 'string',
                sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                enableSorting: true,
                enableFiltering: true,
                filter: {
                    term: ''
                }
            },
            {
                field: 'last_view',
                displayName: 'Last View',
                name: 'Last View',
                type: 'date',
                sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                enableSorting: true,
                enableFiltering: true,
                filter: {
                    condition: uiGridConstants.filter.EXACT
                }

            },
            {
                field: 'total_views',
                displayName: 'Total Views',
                name: 'Total Views',
                type: 'number',
                sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                enableSorting: true,
                enableFiltering: true,
                filter: {
                    condition: uiGridConstants.filter.EXACT
                }
            },
            {
                field: 'group',
                displayName: 'Group',
                name: 'Group',
                type: 'string',
                sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                enableSorting: true,
                enableFiltering: true,
                filter: {
                    term: ''
                }
            },
            {
                field: 'data_view',
                displayName: 'Data View',
                name: 'Data View',
                type: 'number',
                sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                enableSorting: true,
                enableFiltering: true,
                filter: {
                    condition: uiGridConstants.filter.EXACT
                }
            },
            {
                field: 'records',
                displayName: 'Records',
                name: 'Records',
                type: 'number',
                sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                enableSorting: true,
                enableFiltering: true,
                filter: {
                    condition: uiGridConstants.filter.EXACT
                }
            },
            {
                field: 'crosstabs',
                displayName: 'Crosstabs',
                name: 'Crosstabs',
                type: 'number',
                sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                enableSorting: true,
                enableFiltering: true,
                filter: {
                    condition: uiGridConstants.filter.EXACT
                }
            },
            {
                field: 'reports',
                displayName: 'Reports',
                name: 'Reports',
                type: 'number',
                sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                enableSorting: true,
                enableFiltering: true,
                filter: {
                    condition: uiGridConstants.filter.EXACT
                }
            },
            {
                field: 'explorer',
                displayName: 'Explorer',
                name: 'Explorer',
                type: 'number',
                sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                enableSorting: true,
                enableFiltering: true,
                filter: {
                    condition: uiGridConstants.filter.EXACT
                }
            },
            {
                field: 'bookmarks',
                displayName: 'bookmarks',
                name: 'bookmarks',
                type: 'number',
                sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                enableSorting: true,
                enableFiltering: true,
                filter: {
                    condition: uiGridConstants.filter.EXACT
                }
            }
        ],
    };

    // ********************************************
    // Filtering configuration and functionality
    // ********************************************
    $scope.filterGrid = function(filterValue) {

        // Looping through all columns that have filtering enabled
        // and are of type string
        for (var i = 0; i < $scope.atlasUserMonitorGrid.columnDefs.length; i++) {

            if ($scope.atlasUserMonitorGrid.columnDefs[i].enableFiltering == true
                && $scope.atlasUserMonitorGrid.columnDefs[i].type === "string") {

                // setting term variable in the columnDefs filter object to equal
                // the filterValue passed into the function
                $scope.atlasUserMonitorGrid.columnDefs[i].filter.term = filterValue;
            }
        }
    }

filterBy: 博 ui-网格

名称组

鲍勃组1

约翰组2

艾米bobo_group

预期结果：

结果

名称组

鲍勃组1

艾米bobo_group

实际结果：

名称组

*空*

这是因为筛选正在查找名称和组列中包含字符串 "bo" 的行。如果名称或组列中有字符串 "bo"，我希望它过滤 ui 网格。

Answer 1

感谢 Remko 的 link，我解决了我的问题。

我附上了下面的 link 帮助我实现单一过滤器的文档

http://ui-grid.info/docs/#!/tutorial/Tutorial:%20321%20Single%20filter

如何将两个过滤后的 ui 网格合并为一个

How to combine two filtered ui grids into one

javascript

filtering

filter

angularjs

ui-grid

名称组

结果

名称组

实际结果：

名称组