AngularJS中如何通过按钮点击过滤ag-grid的Dept10数据

没问题，我来帮你实现这个按钮触发的过滤功能。针对AngularJS版本的ag-grid，你可以通过获取网格实例的API来手动设置过滤条件，具体实现步骤和代码如下：

核心思路 #

Ag-Grid提供了setFilterModel API来手动设置列级过滤规则，我们只需要在按钮点击事件中调用这个API，指定目标列的过滤条件即可实现精准过滤。

完整代码示例 #

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/19.1.3/ag-grid.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/19.1.3/styles/ag-grid.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/19.1.3/styles/ag-theme-balham.css">
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <!-- 触发过滤的按钮 -->
    <button ng-click="filterDept10()">获取Dept10信息</button>
    
    <!-- Ag-Grid容器 -->
    <div ag-grid="gridOptions" class="ag-theme-balham" style="height: 500px;"></div>

    <script>
        // 初始化AngularJS应用，注入agGrid模块
        var app = angular.module('myApp', ['agGrid']);
        
        app.controller('myCtrl', function($scope) {
            // 列定义：根据你的实际数据调整字段名和表头
            var columnDefs = [
                { headerName: '部门', field: 'department', filter: true }, // 开启该列的过滤功能
                { headerName: '姓名', field: 'name', filter: true },
                { headerName: '职位', field: 'position' }
            ];

            // 模拟你的业务数据
            var rowData = [
                { department: 'Dept10', name: '张三', position: '前端工程师' },
                { department: 'Dept20', name: '李四', position: 'UI设计师' },
                { department: 'Dept10', name: '王五', position: '产品经理' },
                { department: 'Dept30', name: '赵六', position: '测试工程师' }
            ];

            // Ag-Grid配置项
            $scope.gridOptions = {
                columnDefs: columnDefs,
                rowData: rowData,
                enableFilter: true, // 全局开启过滤功能
                onGridReady: function(params) {
                    // 可选：保存Grid API引用，方便后续调用
                    $scope.gridApi = params.api;
                }
            };

            // 按钮点击触发的过滤函数
            $scope.filterDept10 = function() {
                // 构建过滤模型：指定department列精确匹配"Dept10"
                var filterModel = {
                    department: {
                        filterType: 'text',
                        filter: 'Dept10',
                        type: 'equals' // 匹配规则：equals=精确匹配，contains=包含匹配
                    }
                };
                
                // 应用过滤模型，网格会自动刷新显示符合条件的数据
                $scope.gridOptions.api.setFilterModel(filterModel);
                
                // 如果你需要全局快速过滤（匹配所有列的内容），可以用下面的方法：
                // $scope.gridOptions.api.setQuickFilter('Dept10');
            };
        });
    </script>
</body>
</html>

关键说明 #

1. 模块注入：确保AngularJS应用注入了agGrid模块，否则Ag-Grid无法正常工作。
2. 列过滤配置：目标列需要开启过滤（filter: true），或者全局开启enableFilter: true。
3. 过滤模型：filterModel对象的键对应列的field值，你可以根据实际需求调整匹配规则（比如contains实现模糊匹配）。
4. API调用：通过gridOptions.api.setFilterModel应用过滤规则，网格会自动重新渲染过滤后的结果。

如果需要清除过滤，只需要调用$scope.gridOptions.api.setFilterModel(null)即可。

内容的提问来源于stack exchange，提问作者GrailsLearner