使用angularjs ui grid 动态加载列名

Posted 2020-09-21

　　来个开场白吧：

　　　　我是做.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框 ,默认为true
18                 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