javascript - 如何过滤devextreme中的选择框

Question

我在使用 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;
        });

      };

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