Angular JS ng Grid Default global configurations

问题

I am creating a new application using Angular JS where ng grid used at many pages. I want to enable some global configuration for all the grid so that I can change the look and feel from a common place for all grids like, allow sorting, re-size of columns etc.

Below thread is explaining a bit about this, I would appreciate if someone can provide a more details with some code examples.

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

I want to implement all global configuration in such a way that if user is not defining any of the configuration then it picks up from global configuration.

I want to define them just after the route configuration. so the same for datepickerConfig, how can I do the same for ngGrid.

回答1:

Solved it this way:

Wrap your grid controllers in a parent controller that holds variables for global grid configuration.

    <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>

In your individual grid options set the options you want to control globally to the variables stored in the globalGridConfig controller. Since this one wraps the gridcontrollers the variables there are inherited to the scope of the gridcontrollers.

        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
            }
        });

Since the ng-grid cdns are currently not reachable via my computer I can't provide you with a plunker. Keep me informed if this works for you. I can create a Plunker Demo as soon as this works again.

Update:

Hey, it's up again! Here is the promised Plunker

See, no rtfm-bs, just plain angular magick.

Update 2:

This will be a lengthy answer again:-)

I don't think there is a way to define a global scope without some tricks. It' simply not in the ngGrid code and you won't find any answer to this in the documentation nor in the sourcecode.

But here is a different approach:

Add a new object to the $rootScope, this is will be available throughout your app.

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

Then in your controllers define your gridOptions like this:

        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;
        });

This way you don't need the wrapper controller in your html.

Of course you can still put the globals to a controller instead of the $rootScope, to prevent overhead on pages where you don't have a grid.

Here's the updated Plunker

I don't think you can get it more convenient than this.

回答2:

If you look through the code, you will find:

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

I'm not sure when this was available, but it is available in the latest release at time of writing (2.0.11) at line 1504. So in your config or run you can specify:

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

回答3:

you can refer to this ng-grid module for the grid layout. and yes you can specify with this ng grid module some your global gridding!

回答4:

as Lalit Sachdeva said, you have the Getting Started source but you also have their Github wiki page that has more advanced features to offer you like: Configuration Options,Defining Columns,Templating your Rows and Cells,Column Sorting and Filtering ,Grid Events etc.

来源：https://stackoverflow.com/questions/23630928/angular-js-ng-grid-default-global-configurations

标签

javascript

angularjs

ng-grid