Question

如何使用AngularJS创建具有可重用选项的kendo-grid？

除默认设置外，网格必须动态包含复选框列，并选择所有行。处理选择的方法应该是指令的一部分，不知何故，我应该能够访问在控制器中选择的行。

另一个重要的行为是保持对网格的引用：

// In the controller : $scope.grid
<div kendo-grid="grid" k-options="gridOptions"></div>

在我想象的初始路径下面，但由于AngularJS不能从复选框列中编译信息，因此它不是100％工作，所以不要调用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;
}]);

Answer 1

我在这里发布了一个示例指令：http://embed.plnkr.co/fQhNUGHJ3iAYiWTGI9mn/preview

它会在my-grid属性上激活并插入一个复选框列。该复选框绑定到每个项目的selected属性（请注意，它是一个Angular模板，它使用dataItem来引用当前项目）。要找出所选项目，您可以执行以下操作：

var selection = $scope.grid.dataSource.data().filter(function(item){
    return item.selected;
});

标题中添加的复选框将切换选择。

HTH。

Answer 2

@rGiosa是对的我试过这样做：

var options = angular.extend({}, $scope.$eval($attrs.kOptions));
options['resizable']= true;

似乎在options对象中添加属性但是网格仍然无法调整原因么？ http://plnkr.co/edit/Lc9vGKPfD8EkDem1IP9V?p=preview

编辑：显然，网格选项无法动态更改。您需要使用不同的选项重新创建整个网格，以便动态地禁用/启用它们吗？！

干杯

使用AngularJS创建具有可重用选项的kendo-grid

2 个答案: