Web Programming examples

Google Maps,AngularJS

AngularJS ui-grid multiple column spanning for headers

  • AngularJS : 1.6.5
  • ui-grid : 4.0.6
  • include file
  • ui-grid.min.css,angular.min.js,ui-grid.min.js
<link href="http://www.example.com/wp/wp-content/themes/ang/css/ui-grid.min.css" rel="stylesheet">
<link href="http://www.example.com/wp/wp-content/themes/ang/css/grid.css" rel="stylesheet">
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/ui-grid.min.js'></script>
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/grid.js'></script>
<div ng-controller="MyCtrl">
  <div category-header="gridOptions"></div>
  <div class="myGrid" ui-grid="gridOptions"></div>
</div>
var app = angular.module('MyApp', ['ui.grid']);

app.controller('MyCtrl', ['$scope',
  function($scope) {
    $scope.myData = [
      {name: "product-a", avg1: 10.5, count1: 50, avg2: 28.3, count2: 24},
      {name: "product-b", avg1: 13.5, count1: 33, avg2: 14.3, count2: 54},
      {name: "product-c", avg1: 50.5, count1: 10, avg2: 64.3, count2: 91},
      {name: "product-d", avg1: 56.1, count1: 60, avg2: 18.3, count2: 35},
      {name: "product-e", avg1: 17.5, count1: 56, avg2: 68.3, count2: 13}
    ];
    $scope.gridOptions = {
      data: 'myData',
      columnDefs: [
        {field: 'name', displayName: 'Name',width:"80"},
        {field: 'avg1', displayName: 'Avg', categoryDisplayName: '2013',width:"80"},
        {field: 'count1', displayName:'Count', categoryDisplayName: '2013',width:"80"},
        {field: 'avg2', displayName: 'Avg', categoryDisplayName: '2014',width:"80"},
        {field: 'count2', displayName:'Count', categoryDisplayName: '2014',width:"80"},
      ]
    }
  }
])
  .directive('categoryHeader', function() {
    function link(scope) {
      console.log(scope.gridOptions.columnDefs);
      scope.headerRowHeight = 30;
      scope.catHeaderRowHeight = scope.headerRowHeight + 'px';
      scope.categories = [];
      var lastDisplayName = "";
      var totalWidth = 0;
       :
       :
    see 
      "https://github.com/angular-ui/ng-grid/issues/644"
      "http://plnkr.co/edit/lZk3YB?p=preview"
      :
      :
    }
    return {
      templateUrl: '../wp-content/themes/wp/category_header.html',
      link: link
    };
  });

(grid.css)
.myGrid {
  height: 300px;
}