简体   繁体   English

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

[英]How to combine two filtered ui grids into one

I am using angularjs ui grid api. 我正在使用angularjs ui网格api。 I have created a single html input tag to apply a filter to all columns based on the users input. 我创建了一个html输入标签,以根据用户输入将过滤器应用于所有列。 I want to filter each column then combine the results into a single ui grid 我想过滤每一列,然后将结果合并到单个ui网格中

I have tried to loop through each column and apply the text filter from the input tag to all columns. 我试图遍历每一列,并将文本标签从输入标签应用到所有列。 This however looks for a row in the ui grid that has the text from the input tag in all columns. 但是,这会在ui网格中查找一行,所有行中的输入标签中均包含文本。 I want to display all rows that have at least one column that contains the filter string not all rows that contain the filter string in all columns 我想显示所有至少具有包含过滤字符串的列的行,而不是所有包含所有过滤字符串的行

angular.module('main') .controller('mainCtrl', function($scope, $filter, uiGridConstants) { 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: bo ui-grid filterBy:bo ui-grid

name group 名称组

bob group1 鲍勃组1

john group2 约翰·group2

amy bobo_group 艾米bobo_group

expected results: 预期成绩:

result 结果

name group 名称组

bob group1 鲍勃组1

amy bobo_group 艾米bobo_group

actual results: 实际结果:

name group 名称组

* empty * *空*

This is because the filtering is looking for a row that contains the string "bo" in the name and group column. 这是因为过滤正在名称和组列中查找包含字符串“ bo”的行。 I want it to filter the ui grid if it has the string "bo" in the name or group column. 我希望它在名称或组列中包含字符串“ bo”的情况下过滤ui网格。

I solved my problem thanks to the link from Remko. 我通过Remko的链接解决了我的问题。

I have attached the link below for the docs that helped me implement the single filter 我已经附上了以下链接的文档,这些文档帮助我实现了单个过滤器

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM