Question

我在使用03选择框，国家，州和城市过滤时遇到一些问题。如何嵌套选择框？我怎样才能获得这些数据的过滤器？

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

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;
        });

      };

Answer 1

要按选择框值过滤数据，您可以使用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>

有关您可以找到here的过滤操作的详细信息。

我已经创建了一个小样本来演示这种方法 - http://plnkr.co/edit/SR93AIRSp9TUuA5fYmpa

如何过滤devextreme

1 个答案: