如何使用wijmo flex grid獲取選定的行值
[英]how to get selected rows value using wijmo flex grid
問題描述
在這里，我為wijmo flex grid創建了示例代碼，其工作正常，但問題是如何獲取所選行值？
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'); });
<!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>
2 個解決方案
解決方案1
1 2016-03-15 23:27:35
您可以使用FlexGrid的selectedItems屬性，以及selectedRows和selection屬性（如果您願意）來訪問行值。 selectedItems可能是訪問基礎數據項的最簡單方法，下面是樣本的修改版本，它將選定的數據項記錄到控制台。
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); }; });
<!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>
解決方案2
0 2019-06-12 06:16:25
您必須添加自己的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;
}
如何從wijmo flex grid的樹視圖中的節點轉到父節點
[英]How to go to a parent node from a node in a treeview of wijmo flex grid
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.