[英]Creating a kendo-grid with reusable options using AngularJS
How to create a kendo-grid with reusable options using AngularJS? 如何使用AngularJS创建具有可重用选项的kendo-grid?
Besides the default settings, the grid must include a checkbox column dynamically with the option to select all rows . 除默认设置外,网格还必须动态包含复选框列,并选择所有行。 Methods to treat the selections should be part of the directive and, somehow, I should be able to access the rows selected in controller.
处理选择的方法应该是指令的一部分,并且不知何故,我应该能够访问在控制器中选择的行。
Another important behavior is to keep a reference to the grid : 另一个重要的行为是保持对网格的引用:
// In the controller : $scope.grid
<div kendo-grid="grid" k-options="gridOptions"></div>
Below an initial path that I imagined, but it is not 100% working because AngularJS not compile information from checkbox column, so do not call the methods of the controller directive. 在我想象的初始路径下面,但它不是100%工作,因为AngularJS不能从checkbox列中编译信息,所以不要调用controller指令的方法。 At the same time I'm not sure where force $compile in this code.
同时我不确定在这段代码中强制$编译的位置。
myApp.directive('myApp', ['$compile', function ($compile) {
var directive = {
restrict: 'A',
replace: true,
template: '<div></div>',
scope: {
gridConfiguration: '='
},
controller: function ($scope) {
$scope.gridIds = [];
$scope.gridIdsSelected = [];
var updateSelected = function (action, id) {
if (action === 'add' && $scope.gridIdsSelected.indexOf(id) === -1) {
$scope.gridIdsSelected.push(id);
}
if (action === 'remove' && $scope.gridIdsSelected.indexOf(id) !== -1) {
$scope.gridIdsSelected.splice($scope.gridIdsSelected.indexOf(id), 1);
}
};
$scope.updateSelection = function ($event, id) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
updateSelected(action, id);
};
$scope.isSelected = function (id) {
return $scope.gridIdsSelected.indexOf(id) >= 0;
};
$scope.selectAll = function ($event) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
for (var i = 0; i < $scope.gridIds.length; i++) {
var id = $scope.gridIds[i];
updateSelected(action, id);
}
};
},
link: function ($scope, $element, $attrs) {
var baseColumns = [
{
headerTemplate: '<input type="checkbox" id="selectAll" ng-click="selectAll($event)" ng-checked="isSelectedAll()">',
template: '<input type="checkbox" name="selected" ng-checked="isSelected(#=Id#)" ng-click="updateSelection($event, #=Id#)">',
width: 28
}
];
for (var i = 0; i < $scope.gridConfiguration.columns.length; i++) {
var column = $scope.gridConfiguration.columns[i];
baseColumns.push(column);
}
var gridOptions = {...};
var grid = $element.kendoGrid(gridOptions).data("kendoGrid");;
$scope.$parent[$attrs[directive.name]] = grid;
}
};
return directive;
}]);
I've put an example directive here: http://embed.plnkr.co/fQhNUGHJ3iAYiWTGI9mn/preview 我在这里提出了一个示例指令: http : //embed.plnkr.co/fQhNUGHJ3iAYiWTGI9mn/preview
It activates on the my-grid
attribute and inserts a checkbox column. 它在
my-grid
属性上激活并插入复选框列。 The checkbox is bound to the selected
property of each item (note that it's an Angular template and it uses dataItem
to refer to the current item). 复选框绑定到每个项目的
selected
属性(请注意,它是一个Angular模板,它使用dataItem
来引用当前项目)。 To figure out the selected items you can do something like: 要找出所选项目,您可以执行以下操作:
var selection = $scope.grid.dataSource.data().filter(function(item){
return item.selected;
});
The checkbox that is added in the header will toggle the selection. 标题中添加的复选框将切换选择。
HTH. HTH。
@rGiosa is right I've tried to do that : @rGiosa是对的,我试过这样做:
var options = angular.extend({}, $scope.$eval($attrs.kOptions));
options['resizable']= true;
Seems to add the attribute in options object but the grid is still not resizable why? 似乎在options对象中添加属性但是网格仍然无法调整大小为什么? http://plnkr.co/edit/Lc9vGKPfD8EkDem1IP9V?p=preview
http://plnkr.co/edit/Lc9vGKPfD8EkDem1IP9V?p=preview
EDIT: Apparently,Options of the Grid cannot be changed dynamically. 编辑:显然,网格的选项不能动态更改。 You need to re-create the whole Grid with different options in order to disable/enable them dynamically?!
您需要使用不同的选项重新创建整个网格,以便动态地禁用/启用它们?!
Cheers 干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.