如何使用wijmo flex grid获取选定的行值

时间：2016-03-09 07:12:11

标签： javascript angularjs angularjs-directive wijmo

这里我创建了wijmo flex grid的示例代码，它的工作正常，但问题是如何获取所选的行值？

＆＃13;
＆＃13; 
angular.module('app', ['wj']);



'use strict';

// declare app module
var app = angular.module('app');

// controller
app.controller('appCtrl', function ($scope, $http) {

    // create the filter and expose it to scope for customization
    $scope.initialized = function (s, e) {
        var flex = s;
        $scope.filter = new wijmo.grid.filter.FlexGridFilter(flex);
        $scope.downloadsColumnFilterType = wijmo.grid.filter.FilterType.Condition;
        $scope.$apply();
        $scope.filter.filterChanging.addHandler(function () {
            console.log('filter changing');
        });
        $scope.filter.filterChanged.addHandler(function () {
            console.log('filter changed');
        });
        $scope.filter.filterApplied.addHandler(function () {
            console.log('filter applied');
        });
    }

    // persist filter definition
    $scope.saveFilter = function () {
        localStorage['filter'] = $scope.filter.filterDefinition;
    }
    $scope.restoreFilter = function () {
        $scope.filter.filterDefinition = localStorage['filter'];
    }

    // update filter type for "downloads" column
    $scope.$watch('downloadsColumnFilterType', function () {
        var f = $scope.filter;
        if (f) {
            var col = f.grid.columns.getColumn('downloads'),
                cf = f.getColumnFilter(col, true);
            cf.filterType = $scope.downloadsColumnFilterType;
        }
    });

    // filters are localizable
    $scope.culture = 'en';
    $scope.$watch('culture', function () {

        // remove old localization reference
        var loc = document.getElementById('loc');
        if (loc) {
            document.head.removeChild(loc);
        }

        // add new localization reference
        loc = document.createElement('script');
        loc.id = 'loc';
        loc.type = 'text/javascript';
        loc.async = false;
        loc.src = 'scripts/vendor/wijmo.culture.' + $scope.culture + '.js';
        document.getElementsByTagName('head')[0].appendChild(loc);

        // show changes
        invalidateAll();
    });

    // invalidate all Wijmo controls
    // using a separate function to handle strange IE9 scope issues
    function invalidateAll() {
        wijmo.Control.invalidateAll();
    }

    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < 1000; i++) {
        data.push({
            id: i,
            date: new Date(2015, i % 12, (i + 1) % 25),
            time: new Date(2015, i % 12, (i + 1) % 25, i % 24, i % 60, i % 60),
            country: countries[i % countries.length],
            countryMapped: i % countries.length,
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
            checked: i % 9 == 0
        });
    }
    $scope.data = new wijmo.collections.CollectionView(data);

    // notify scope when collectionView changes
    $scope.data.collectionChanged.addHandler(function () {
        if (!$scope.$root.$$phase) {
            $scope.$apply();
        }
    });

    // expose countries, country map
    $scope.countries = countries;
    var countryMap = [
        { name: 'US', key: 0 },
        { name: 'Germany', key: 1 },
        { name: 'Japan', key: 2 },
        { name: 'Italy', key: 3 },
        { name: 'Greece', key: 4 },
        { name: 'Spain', key: 5 },
        { name: 'Chile', key: 6 },
        { name: 'China', key: 7 },
        { name: 'Canada', key: 8 },
        { name: 'Astralia', key: 9 },
        { name: 'Austria', key: 10 }
    ];
    $scope.countryMap = new wijmo.grid.DataMap(new wijmo.collections.CollectionView(countryMap), 'key', 'name');

});
＆＃13; 
<!DOCTYPE html>
<html>

  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
     <!-- Wijmo -->
     <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.min.js" type="text/javascript"></script>
     <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
     <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.grid.filter.min.js" type="text/javascript"></script>
  
    <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
  
    <link href="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/styles/vendor/wijmo.min.css" rel="stylesheet" />

    <!-- Wijmo-Angular interop -->
    <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.angular.min.js" type="text/javascript"></script>
    
    
    
    
  </head>
<body ng-app="app" ng-controller="appCtrl">
 
    
        <wj-flex-grid
            style="height:300px"
            initialized="initialized(s, e)"
            items-source="data">
                <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
                <wj-flex-grid-column header="Date" binding="date" format='MMM/dd/yyyy'></wj-flex-grid-column>
                <wj-flex-grid-column header="Time" binding="time" format="t"></wj-flex-grid-column>
                <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
                <wj-flex-grid-column header="Country ID" binding="countryMapped" data-map="countryMap"></wj-flex-grid-column>
                <wj-flex-grid-column header="Downloads" binding="downloads"></wj-flex-grid-column>
                <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
                <wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column>
                <wj-flex-grid-column header="Checked" binding="checked"></wj-flex-grid-column>
        </wj-flex-grid>
      
        
         
         
    </div>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

如果您愿意，可以使用FlexGrid的selectedItems属性以及selectedRows和selection属性来访问行值。 selectedItems可能是访问基础数据项的最简单方法，下面是样本的修改版本，它将选定的数据项记录到控制台。

＆＃13;
＆＃13; 
angular.module('app', ['wj']);



'use strict';

// declare app module
var app = angular.module('app');

// controller
app.controller('appCtrl', function ($scope, $http) {
    $scope.ctx = {
      grid: null
    };

    // create the filter and expose it to scope for customization
    $scope.initialized = function (s, e) {
        var flex = s;
        $scope.filter = new wijmo.grid.filter.FlexGridFilter(flex);
        $scope.downloadsColumnFilterType = wijmo.grid.filter.FilterType.Condition;
        $scope.$apply();
        $scope.filter.filterChanging.addHandler(function () {
            console.log('filter changing');
        });
        $scope.filter.filterChanged.addHandler(function () {
            console.log('filter changed');
        });
        $scope.filter.filterApplied.addHandler(function () {
            console.log('filter applied');
        });
    }

    // persist filter definition
    $scope.saveFilter = function () {
        localStorage['filter'] = $scope.filter.filterDefinition;
    }
    $scope.restoreFilter = function () {
        $scope.filter.filterDefinition = localStorage['filter'];
    }

    // update filter type for "downloads" column
    $scope.$watch('downloadsColumnFilterType', function () {
        var f = $scope.filter;
        if (f) {
            var col = f.grid.columns.getColumn('downloads'),
                cf = f.getColumnFilter(col, true);
            cf.filterType = $scope.downloadsColumnFilterType;
        }
    });

    // filters are localizable
    $scope.culture = 'en';
    $scope.$watch('culture', function () {

        // remove old localization reference
        var loc = document.getElementById('loc');
        if (loc) {
            document.head.removeChild(loc);
        }

        // add new localization reference
        loc = document.createElement('script');
        loc.id = 'loc';
        loc.type = 'text/javascript';
        loc.async = false;
        loc.src = 'scripts/vendor/wijmo.culture.' + $scope.culture + '.js';
        document.getElementsByTagName('head')[0].appendChild(loc);

        // show changes
        invalidateAll();
    });

    // invalidate all Wijmo controls
    // using a separate function to handle strange IE9 scope issues
    function invalidateAll() {
        wijmo.Control.invalidateAll();
    }

    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < 1000; i++) {
        data.push({
            id: i,
            date: new Date(2015, i % 12, (i + 1) % 25),
            time: new Date(2015, i % 12, (i + 1) % 25, i % 24, i % 60, i % 60),
            country: countries[i % countries.length],
            countryMapped: i % countries.length,
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
            checked: i % 9 == 0
        });
    }
    $scope.data = new wijmo.collections.CollectionView(data);

    // notify scope when collectionView changes
    $scope.data.collectionChanged.addHandler(function () {
        if (!$scope.$root.$$phase) {
            $scope.$apply();
        }
    });

    // expose countries, country map
    $scope.countries = countries;
    var countryMap = [
        { name: 'US', key: 0 },
        { name: 'Germany', key: 1 },
        { name: 'Japan', key: 2 },
        { name: 'Italy', key: 3 },
        { name: 'Greece', key: 4 },
        { name: 'Spain', key: 5 },
        { name: 'Chile', key: 6 },
        { name: 'China', key: 7 },
        { name: 'Canada', key: 8 },
        { name: 'Astralia', key: 9 },
        { name: 'Austria', key: 10 }
    ];
    $scope.countryMap = new wijmo.grid.DataMap(new wijmo.collections.CollectionView(countryMap), 'key', 'name');

    $scope.buttonClick = function() {
      if(!$scope.ctx.grid) return;
      console.log($scope.ctx.grid.selectedItems);
    };

});
＆＃13; 
<!DOCTYPE html>
<html>

  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
     <!-- Wijmo -->
     <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.min.js" type="text/javascript"></script>
     <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
     <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.grid.filter.min.js" type="text/javascript"></script>
  
    <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
  
    <link href="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/styles/vendor/wijmo.min.css" rel="stylesheet" />

    <!-- Wijmo-Angular interop -->
    <script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.angular.min.js" type="text/javascript"></script>
    
    
    
    
  </head>
<body ng-app="app" ng-controller="appCtrl">
 
       <button ng-click="buttonClick()">Log Selected Data Items</button>
        <wj-flex-grid
            control="ctx.grid"
            style="height:300px"
            initialized="initialized(s, e)"
            items-source="data">
                <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
                <wj-flex-grid-column header="Date" binding="date" format='MMM/dd/yyyy'></wj-flex-grid-column>
                <wj-flex-grid-column header="Time" binding="time" format="t"></wj-flex-grid-column>
                <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
                <wj-flex-grid-column header="Country ID" binding="countryMapped" data-map="countryMap"></wj-flex-grid-column>
                <wj-flex-grid-column header="Downloads" binding="downloads"></wj-flex-grid-column>
                <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
                <wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column>
                <wj-flex-grid-column header="Checked" binding="checked"></wj-flex-grid-column>
        </wj-flex-grid>
      
        
         
         
    </div>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您必须添加自己的html代码 selection-changed =“ selectionChanged（）” 

 <wj-flex-grid   style="height:300px"
        initialized="initialized(s, e)"
        items-source="data"  selection-changed="selectionChanged(s,e)">
    <wj-flex-grid-column [width]="'*'" [header]="'نام کاتالوگ'" [binding]="'Description'" [dataType]="'String'">
    </wj-flex-grid-column>
  </wj-flex-grid>

并在控制器中添加方法

$scope.selectionChanged = function (s, e) {
    var flex = s;
}
相关问题
最新问题