使用angularjs ui grid 動態載入列名

標籤：lap   net開發   data   boot   field   blog   closed   service   sel   

　　來個開場白吧：

　　　　我是做.net開發的，來到新公司後，缺一個前端開發，SO，我就不得不撓著頭幹活呀......之前也就寫寫js,jq，剛看到前端架構的時候一臉懵逼...心裡就有三個字：什麼鬼！什麼angularjs,angularjs ui grid,bootstrap，阿西吧..

　　　　木有辦法，總不能又跳槽吧。熟悉了一兩天業務和代碼後，經理說：“開幹！”。

　　　　首先，做的第一個功能就是使用angularjs ui grid 動態載入列。（這裡不得不吐槽一點，ui grid的官方文檔執行個體太少了，度娘上也沒找到.......）於是腦袋一拍，就有了下邊代碼。

1 <div class="text-center" ui-grid="vm.gridOptions" ui-grid-auto-resize ui-grid-resize-columns ng-style="vm.getTableHeight()"></div>

HTML

　　　　重點在這段代碼！

 1 (function () { 2     angular.module(‘app‘).controller(‘app.care.workingHours.index‘, [ 3         ‘$scope‘, ‘$window‘, ‘omsCareService‘, 4         function ($scope, $window, omsCareService) { 5             var vm = this; 6             vm.gridOptions = { 7                 enableSorting: true, 8                 enableFiltering: false, 9                 enableColumnMenus: false,10                 enableVerticalScrollbar: 1,11                 enableFooterTotalSelected: false,12                 showColumnFooter: true,13                 // -------- 分頁屬性 --------14                 enablePagination: false, //是否分頁,default為true  15                 enablePaginationControls: false, //使用預設的底部分頁16                 // -------- 選中行設定 --------17                 enableRowHeaderSelection: false, //是否顯示選中checkbox框 ,預設為true18                 enableSelectAll: false, // 選擇所有checkbox是否可用，預設為true; 19                 onRegisterApi: function (gridApi) {20                     $scope.gridApi = gridApi;21                 }22             };23 24             vm.showWorkHours = function () {25                 omsCareService.query(vm.query).success(function (result) {26                     if (result) {27                         vm.gridOptions.columnDefs = [];28                         vm.gridOptions.data = result.items;29                         // 動態載入資料列30                         if (result.colNames != null) {31                             result.colNames.forEach(function (flag) {32                                     vm.gridOptions.columnDefs.push({ field: "" + flag + ""});                              33                             });34                         }35                     }36                 });37             }38         }39     ]);40 })();

　　　　result.colNames  是後台傳的列名

　　　　vm.gridOptions.columnDefs  本身是個數組，追加新元素就可以

　　　　如有問題，歡迎聯絡：Waite0517

使用angularjs ui grid 動態載入列名