Question

我正在使用Angular JS创建一个新的应用程序，其中ng网格用于许多页面。我想为所有网格启用一些全局配置，以便我可以从所有网格的公共位置更改外观，例如允许排序，重新调整列的大小等。

下面的主题是对此有所解释，如果有人可以通过一些代码示例提供更多详细信息，我将不胜感激。

https://github.com/angular-ui/ng-grid/issues/249

我希望以这样的方式实现所有全局配置：如果用户没有定义任何配置，那么它将从全局配置中获取。

我想在路由配置之后定义它们。所以对于datepickerConfig也一样，我怎样才能对ngGrid做同样的事情。

Answer 1

如果查看代码，您会发现：

self.config = $.extend(defaults, window.ngGrid.config, options);

我不确定这是什么时候可用，但在撰写本文时（2.0.11）的第1504行可以在最新版本中找到它。因此，在config或run中，您可以指定：

window.ngGrid.config = { enablePinning: true };

Answer 2

解决这个问题：

将网格控制器包装在包含全局网格配置变量的父控制器中。

    <div ng-controller="GridGlobals">
        <h1>Grid 1</h1>
        <div ng-controller="MyCtrl1">
            <div class="gridStyle" ng-grid="gridOptions1"></div>
        </div>

        <h1>Grid 2</h1>
        <div ng-controller="MyCtrl2">
            <div class="gridStyle" ng-grid="gridOptions2"></div>
        </div>
    </div>

在您的单个网格选项中，将要全局控制的选项设置为存储在globalGridConfig控制器中的变量。由于这个包装了网格控制器，因此变量会继承到网格控制器的范围。

        Gridtest.controller('GridGlobals', function ($scope) {
            $scope.GLobGridShowFilter = true;
            $scope.GLobGridShowFooter = true;
        });

        Gridtest.controller('MyCtrl1', function ($scope) {
            $scope.myData = [
                {name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}
            ];

            $scope.gridOptions1 = {
                data: 'myData',
                showFilter: $scope.GLobGridShowFilter,
                showFooter: $scope.GLobGridShowFooter
            }

        });


        Gridtest.controller('MyCtrl2', function ($scope) {
            $scope.myData = [
                {name: "Tom", age: 50},
                {name: "Sue", age: 43},
                {name: "Jack", age: 27},
                {name: "Willy", age: 29},
                {name: "Josh", age: 34}
            ];


            $scope.gridOptions2 = {
                data: 'myData',
                showFilter: $scope.GLobGridShowFilter,
                showFooter: false
            }
        });

由于目前无法通过我的计算机访问ng-grid cdns，因此我无法为您提供一个plunker。如果这对您有用，请随时通知我。我可以在再次使用时创建一个Plunker演示。

<强>更新

嘿，它又来了！这是承诺的Plunker

看，没有rtfm-bs，只是普通的角度魔法。

更新2：

这将是一个冗长的答案： - ）

我不认为有一种方法可以在没有一些技巧的情况下定义全局范围。它＆＃39;根本不在ngGrid代码中，你在文档和源代码中都找不到任何答案。

但这是一种不同的方法：

将新对象添加到$ rootScope，这将在整个应用程序中可用。

        Gridtest.run(function ($rootScope) {
            $rootScope.gridOptionsGlobal = function () {
                this.data = 'myData';
                this.showFilter = true;
                this.showFooter = true;
            }
        })

然后在您的控制器中定义您的gridOptions，如下所示：

        Gridtest.controller('MyCtrl1', function ($scope) {
            $scope.myData = [
                {name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}
            ];

            $scope.gridOptions = new $scope.gridOptionsGlobal();
        });


        Gridtest.controller('MyCtrl2', function ($scope) {
            $scope.myOtherData = [
                {name: "Tom", age: 50},
                {name: "Sue", age: 43},
                {name: "Jack", age: 27},
                {name: "Willy", age: 29},
                {name: "Josh", age: 34}
            ];

            $scope.gridOptions = new $scope.gridOptionsGlobal();
            //overwiting global settings here
            $scope.gridOptions.data = 'myOtherData';
            $scope.gridOptions.showFooter = false;
        });

这样你就不需要你的html中的包装控制器。

当然，您仍然可以将全局变量放入控制器而不是$ rootScope，以防止您没有网格的页面上的开销。

这是更新的Plunker

我认为你不能比这更方便。

Answer 3

您可以参考此ng-grid module获取网格布局。是的，您可以使用此ng网格模块指定一些全局网格！

Answer 4

正如Lalit Sachdeva所说，你有Getting Started来源，但你也有他们的Github wiki页面，它有更高级的功能可以提供给你：配置选项，定义列，模板你的行和单元格，列排序和过滤，网格事件等。

Angular JS ng Grid默认全局配置

4 个答案: