通过API调用过滤数据

filtering data by API calls

本文关键字：数据过滤调用 API 通过更新时间：2023-09-26

我的页面上有一个表，并且为这个表定制了过滤器，所以默认情况下我使用API调用来加载数据。

 $('#table').bootstrapTable('refreshOptions', {
 url: 'http://address:8080/events-api1/rest/Events/'
 });

在左边我有过滤器。这个过滤器我通过http获取方法

$http({
            method: "GET",
            url: "http://address:8080/events-api1/rest/EventTypeCategories"
        }).then(function success(response) {
            $scope.categories = response.data;
        }, function error(response) {
            $scope.categories = response.statusText;
        });

和通过作用域函数渲染过滤器

$scope.selectCat = function () {
            angular.forEach($scope.categories, function (category) {
                if (category.selected) {
                    $scope.selectedAllCat = false;
                    if (category.name == "Study") {
                        $scope.checked = true;
                        $('#table').bootstrapTable('refreshOptions', {
                            url: 'http://address:8080/events-api1/rest/Events?category=1'
                        });
                    }
                    else if (category.name == "Corporate") {
                        $scope.checked = true;
                        $('#table').bootstrapTable('refreshOptions', {
                            url: 'http://address:8080/events-api1/rest/Events?category=2'
                        });
                    }
                    else if (category.name == "Safety") {
                        $scope.checked = true;
                        $('#table').bootstrapTable('refreshOptions', {
                            url: 'http://address:8080/events-api1/rest/Events?category=3'
                        });
                    }
                    else if (category.name == "Partners") {
                        $scope.checked = true;
                        $('#table').bootstrapTable('refreshOptions', {
                            url: 'http://address:8080/events-api1/rest/Events?category=4'
                        });
                    }
                    else if (category.name == "Standards") {
                        $scope.checked = true;
                        $('#table').bootstrapTable('refreshOptions', {
                            url: 'http://address:8080/events-api1/rest/Events?category=5'
                        });
                    }
                    else if (category.name == "Technology") {
                        $scope.checked = true;
                        $('#table').bootstrapTable('refreshOptions', {
                            url: 'http://address:8080/events-api1/rest/Events?category=6'
                        });
                    }
                }
            });
        };

html

  <div class="panel-body">
                        <table class="table">
                            <tr>
                                <td class="col-md-1"> <input type="checkbox" ng-model="selectedAllCat" ng-click="selectAllCat()">&nbsp;</td>
                                <td class="col-md-9">All</td>
                                <td class="col-md-2">
                                    {{ categories.length }}
                                </td>
                            </tr>
                            <tr ng-repeat="category in categories | orderBy : 'id' ">
                                <td class="col-md-1"> <input type="checkbox" ng-model="category.selected" ng-click="selectCat()">&nbsp;</td>
                                <td class="col-md-9">{{ category.name }}</td>
                                <td class="col-md-2">
                                    {{ category.selected }}
                                </td>
                            </tr>
                        </table>
                    </div>
      <table id="table"
                           data-flat="true"
                           data-toggle="table"
                           data-toolbar="#toolbar"
                           data-search="true"
                           data-show-toggle="false"
                           data-show-columns="true"
                           data-show-export="true"
                           data-filter-control="true"
                           data-events="operateEvents"
                           data-formatter="operateFormatter"
                           data-response-handler="responseHandler"
                           class="table-striped">
                    </table>

我的问题是，对于多个类别的选择，我必须做什么？

编辑：有更多解释
您的目标是组成查询字符串，以便能够对多个类别进行筛选。

当您想要类别1时，您可以执行以下请求：
http://address:8080/events-api/rest/Events类别=1

现在，您想用一个请求过滤类别1和6，所以您的请求应该是这样的：

http://address:8080/events-api/rest/Eventscategory=1&类别=6

因此，在您的代码中，您应该：
1更改标记自：

<td class="col-md-1"> <input type="checkbox" ng-model="category.selected" ng-click="selectCat()"> </td>
收件人：<td class="col-md-1"> <input type="checkbox" ng-click="updateFilter(category.id)"> </td>

2以下功能将帮助我们跟踪当前标记的过滤器：

 $scope.selectedFilters = [];
    $scope.updateFilter = function(categoryId) {
        if ($scope.selectedFilters.indexOf(categoryId) > -1) {
            $scope.selectedFilters.push(categoryId);
        } else {
        $scope.selectedFilters.splice($scope.selectedFilters.indexOf(categoryId), 1);
    }
    //Optional, to reload on change.
    $scope.requestEvents();
}

3：以下请求数据的功能基于选定的筛选器，也可以在完全没有筛选器的情况下工作。

$scope.requestEvents() {
    var url = 'http://address:8080/events-api/rest/Events';
    if ($scope.selectedFilters.length > -1) {
        var queryString = '?category=';
        queryString += $scope.selectedFilters.join('&category=');
        url += queryString;
    }
    $('#table').bootstrapTable('refreshOptions', {
        'url': url
    });
}

--旧版本--不确定这是否会从第一次就很清楚，但这是因为你方缺乏细节。因此，保持现有的代码样式，就可以编写这样的东西。

$scope.filterByCategory = function(categories) {
    //Assuming you have in categories, an array of numbers, (or 
    //strings, anyway they should match categories from your backend)
    categories = categories.join('&category=');
    $('#table').bootstrapTable('refreshOptions', {
        url: 'http://address:8080/events-api/rest/Events?category=6' + categories
}

注意，根据您的后端，查询字符串可能应该由（'&category[]='）连接，而不是由（'&category='）

连接