按 API 次调用过滤数据

Question

我的页面上有一个 table 和这个 table 的自定义过滤器，所以默认情况下我使用 API 调用它来加载数据。

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

在左侧我有过滤器。这个过滤器我通过 http get 方法

$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>

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

Answer 1

编辑：更多解释。
您的目标是编写 查询字符串 以便能够过滤多个类别。

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

现在，您想通过单个请求过滤类别 1 和 6，因此您的请求应该是这样的：

http://地址:8080/events-api/rest/Events?category=1&category=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=')

按 API 次调用过滤数据

filtering data by API calls

javascript

angularjs

bootstrap-table