[英]Creating a kendo-grid with reusable options using AngularJS
如何使用AngularJS创建具有可重用选项的kendo-grid?
除默认设置外,网格还必须动态包含复选框列,并选择所有行。 处理选择的方法应该是指令的一部分,并且不知何故,我应该能够访问在控制器中选择的行。
另一个重要的行为是保持对网格的引用:
// In the controller : $scope.grid
<div kendo-grid="grid" k-options="gridOptions"></div>
在我想象的初始路径下面,但它不是100%工作,因为AngularJS不能从checkbox列中编译信息,所以不要调用controller指令的方法。 同时我不确定在这段代码中强制$编译的位置。
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;
}]);
我在这里提出了一个示例指令: http : //embed.plnkr.co/fQhNUGHJ3iAYiWTGI9mn/preview
它在my-grid
属性上激活并插入复选框列。 复选框绑定到每个项目的selected
属性(请注意,它是一个Angular模板,它使用dataItem
来引用当前项目)。 要找出所选项目,您可以执行以下操作:
var selection = $scope.grid.dataSource.data().filter(function(item){
return item.selected;
});
标题中添加的复选框将切换选择。
HTH。
@rGiosa是对的,我试过这样做:
var options = angular.extend({}, $scope.$eval($attrs.kOptions));
options['resizable']= true;
似乎在options对象中添加属性但是网格仍然无法调整大小为什么? http://plnkr.co/edit/Lc9vGKPfD8EkDem1IP9V?p=preview
编辑:显然,网格的选项不能动态更改。 您需要使用不同的选项重新创建整个网格,以便动态地禁用/启用它们?!
干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.