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