如何在devextreme中过滤选择框

How to filter select-box in devextreme

本文关键字：过滤 选择 devextreme      更新时间：2023-09-26

我在筛选03个选择框、国家、州和城市时遇到了一些问题。如何使选择框嵌套?如何用这些数据进行筛选?

我的代码在script.js使用MySQL数据库:

var serviceFilterCountry = "http://localhost:8000/filtercountry";
var serviceFilterProvince = "http://localhost:8000/filterprovince";
var serviceFilterCity = "http://localhost:8000/filtercity";

$scope.countries = new DevExpress.data.DataSource(serviceFilterCountry);
$scope.provinces = new DevExpress.data.DataSource(serviceFilterProvince);
$scope.cities = new DevExpress.data.DataSource(serviceFilterCity);
//var dataSourceCity = new DevExpress.data.DataSource(serviceFilterCity);
//var dataSourceF = new DevExpress.data.DataSource(serviceFilter);

      $scope.selectedProvince = null;
      $scope.filterProvincesByCountry = function(e) {
        var countryP = e.value;
        $scope.provinces.filter("country", countryP);
        $scope.provinces.load().done(function(result) {
          $scope.selectedProvince = result.state;
        });
      };


      $scope.selectedCity = null;
      $scope.filterCitiesByProvince = function(e) {
        var provinceC = e.value;
        $scope.cities.filter("country", $scope.countries.select('country'));
        $scope.cities.filter("state", provinceC);
        $scope.cities.load().done(function(result) {
          $scope.selectedCity = result.city;
        });
      };

要通过选择框值过滤数据，可以使用onValueChanged事件。例如，下面的代码显示了如何按国家id筛选城市:

JS: 

$scope.countries = new DevExpress.data.DataSource({
    store: [{id: 1, text: "USA"}, {id: 2, text: "Canada"}]
});
$scope.cities = new DevExpress.data.DataSource({
    store: [{id: 1, countryId: 1, text: "NY"}, {id: 2, countryId: 2, text: "Toronto"}]
});
$scope.filterCitiesByCountry = function(e) {
    var countryId = e.value;
    $scope.cities.filter("countryId", countryId);
    $scope.cities.load();
};
HTML: 

<div dx-select-box="{dataSource: countries, displayExpr: 'text', valueExpr: 'id', onValueChanged: filterCitiesByCountry}"></div>
<div dx-select-box="{dataSource: cities, displayExpr: 'text', valueExpr: 'id', bindingOptions: { value: 'selectedCity' } }"></div>

有关过滤器操作的更多信息请参阅此处。

我创建了一个小示例来实际演示这种方法- http://plnkr.co/edit/SR93AIRSp9TUuA5fYmpa

相关文章：