Dynamically loading column names using the Angularjs UI grid

Let's Make a prologue:

I do. NET development, came to a new company, lack of a front-end development, so, I have to scratch my head to work ah ... Before also write JS,JQ, just see the front-end architecture of when a face confused force ... There are three words in my heart: What a ghost! What Angularjs,angularjs UI Grid,bootstrap, Assi Bar.

Wood has a way, always can not go again. After familiar with the business and code for a day or two, the manager said: "Open dry!" ”。

First, the first function is to dynamically load columns using the Angularjs UI grid. (I have to spit a bit here, the official document instance of the UI grid is too few, no Niang found ....) Then a shot of the head, there is the code below.

1 class="text-center" ui-grid="vm.gridoptions " Ui-grid-auto-resize ui-grid-resize-columns ng-style="vm.gettableheight ()"></ Div>

HTML

　　　　Focus on this piece of code!

1(function () {2Angular.module (' app '). Controller (' App.care.workingHours.index ', [3' $scope ', ' $window ', ' Omscareservice ',4         function($scope, $window, Omscareservice) {5             varVM = This;6Vm.gridoptions = {7Enablesorting:true,8Enablefiltering:false,9Enablecolumnmenus:false,TenEnableverticalscrollbar:1, OneEnablefootertotalselected:false, AShowcolumnfooter:true, -                 //--------The Paging property-------- -Enablepagination:false,//whether paging, default is True theEnablepaginationcontrols:false,//Use the default bottom part Page -                 //--------The selected row settings-------- -Enablerowheaderselection:false,//Whether the check box is displayed, the default is True -Enableselectall:false,//Select whether all checkboxes are available and the default is true; +ONREGISTERAPI:function(GRIDAPI) { -$scope. Gridapi =Gridapi; +                 } A             }; at  -Vm.showworkhours =function () { -Omscareservice.query (Vm.query). Success (function(Result) { -                     if(Result) { -Vm.gridOptions.columnDefs = []; -Vm.gridOptions.data =Result.items; in                         //dynamically Loading Data columns -                         if(Result.colnames! =NULL) { toResult.colNames.forEach (function(flag) { +Vm.gridOptions.columnDefs.push ({field: "+ Flag +" "});  -                             }); the                         } *                     } $                 });Panax Notoginseng             } -         } the     ]); +})();

Result.colnames  is a background pass column name

The Vm.gridOptions.columnDefs  itself is an array of elements, and a new element can be added

If you have any questions, please contact: Waite0517

Dynamically loading column names using the Angularjs UI grid