Question

我正在使用ag-grid来显示数据，下面是我用来填充值的代码。当我点击按钮Get Dept10 Info时，我应该过滤ag-grid并仅显示dept 10值。我知道ag-grid启用了过滤器选项，我可以输入10个值来过滤部门值，但在我的用例中，我必须有一个按钮来显示dept值。

＆＃13;

<html>
     <head>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
     </head>
     <body ng-app ng-controller="CustController as custCtrl">
         <input type="button" ng-click="getDeptInfo()" value = "Get Dept10 Info" />
         <div ag-grid="custCtrl.gridOptions" id="myGrid" style="height: 
          115px;width:500px;" class="ag-fresh"></div>
          <script>
            var app = angular.module('myApp');
    app.controller('CustController', function($scope, $http) {
    var columnDefs = [
      {headerName: "Employee Name", field: "empName"},
      {headerName: "Address", field: "address"},
      {headerName: "Ph NO", field: "phNo"},
      {headerName: "Dept", field:"deptNo"}
    ];

    var rowData = [
    {empName: "A", address: "xyz", phNo: '123-123-1234',deptNo:10},
    {empName: "B", address: "lmn", phNo: '345-456-5672',deptNo:20},
    {empName: "C", address: "pqr", phNo: '903-456-2345',deptNo:10}
    ];

    var gridOptions = {
      columnDefs: columnDefs,
      enableColResize: true,
      rowBuffer:0,
      enableSorting: true,
      enableFilter: true,
      rowHeight: 30,
      headerHeight: 35,
      sizeColumnsToFit: true,
      onGridReady: function () {
                            $scope.gridOptions.api.setRowData(rowData);
                        },
       suppressLoadingOverlay: true,
       pagination: true
     };
function getDeptInfo{
     var deptNoFilter = {
     deptNo: { type:'equals',filter: 10}
     };
    
     vm.gridOptions.api.setFilterModel(deptNoFilter);
     vm.gridOptions.api.onFilterChanged();
    }
    });
          </script>
     </body>
    </html>

＆＃13;

如何在单击按钮上的angularjs中过滤ag-grid值

0 个答案: