随笔 - 394 文章 - 0 评论 - 946 阅读 - 143万

物联网平台设计心得：列表数据可视化

列表是数据的展现方式之一，可以更加直观的进行数据查验。在本篇文章中，我们将通过基于bootstrap封装的angular grid来展示其具体的使用方法和效果。

准备工作

首先，我们需要下载angular-ui-grid组件，通过这个名称，我们可以在github中找到其具体的项目地址，我这里就不再贴了，大家可以自行寻找。

然后，项目下载下来之后我们需要包括到工程中，并在页面中进行引入：

1 2	`<!--UIGrid Part-->` `<script src="~/Content/front/angular-ui-grid/ui-grid.min.js"></script>`

然后是Html模板的设置：

<div class="datacontainer">
      <div class="row">
          <div class="col-md-12">
              <div class="panel panel-default">
                  <div class="panel-heading">{{selectedMachine.machine_name}}列表数据</div>
                  <div class="panel-body" style="height:auto;overflow:auto">
                      <div ui-grid="gridOptions" ui-grid-selection ui-grid-pagination></div>
                  </div>
              </div>
          </div>
      </div>
  </div>

绑定列表数据

好了，设置完毕，我们去controller中进行相关的绑定操作即可：

app.controller('collectorController', ['$scope', '$cookies', '$timeout','$compile', 'baseService', 'collectorService', 'uiGridConstants', function ($scope, $cookies,$timeout,$compile, baseService, collectorService, uiGridConstants) {
    var self = this;
 
    //绑定列表
    $scope.gridOptions = {
        enableRowSelection: true,
        enableSelectAll: false,
        selectionRowHeaderWidth: 35,
        rowHeight: 35,
        showGridFooter: false,
        multiSelect: true,
        enablePaginationControls: true,
        paginationPageSizes: [9, 15, 20],
        paginationPageSize: 9
    };
 
    $scope.gridOptions.columnDefs = [
            { name: 'Param_name', displayName: '参数名称' },
            { name: 'Param_unit', displayName: '参数单位' },
            { name: 'Param_data', displayName: '参数值' },
            { name: 'Param_time', displayName: '采集时间' }
    ];
 
    $scope.gridOptions.onRegisterApi = function (gridApi) {
        $scope.gridApi = gridApi;
    };
 
    $scope.ClickToGetParamDataList = function (paramId) {
       
        timeCheck($scope.starttime,$scope.endtime);
 
        var starttimeFmt = timeFmt($scope.starttime);
        var endtimeFmt = timeFmt($scope.endtime);
 
        var machineId = $scope.selectedMachine.machine_id;
        collectorService.GetHistoryDataListByParamId(machineId, paramId, starttimeFmt, endtimeFmt).then(function (data) {
            var flag = data.data.success;
            if (flag) {
                $scope.gridOptions.data = data.data.list;
            }
        });
    }
    
}]);

由于我们使用了分页，所以我们必须得引入其分页模块，在app.js入口处，我们可以进行注入操作，同时如果想选择列表项，我们同时可以引入其选择项模块：

var app = angular.module('dsBootstrap', [
                                        'ui.grid',
                                        'ui.grid.selection',
                                        'ui.grid.pagination',
                                        'ngCookies',
                                        'ui.bootstrap.datetimepicker'
                                        ]);