如何使用ng grid在AngularJS中實現原始標題和列標題

如何使用ng-grid實現以下內容。如何使用ng grid在AngularJS中實現原始標題和列標題

Team   GP W L T OL GF GA Pts 
x-Boston  79 40 18 14 7 201 179 101 
x-Toronto 80 43 24 10 3 234 204 99 
x-Ottawa  79 41 22 10 6 254 178 98 
x-Montreal 79 40 28 7 4 201 182 91 
Buffalo  79 36 32 7 4 213 210 83

所以所有的團隊都是粗體以及GP W L T OL GF GA GA也是一個大膽的。因爲這些都是標題。

以下是json源的上述信息。 $ scope.myData = [{team：「x-boston」，gp：79，w：40，l：18，t：14，ol：7，gf：201，ga：179，pts：'

101'}，{team：「x-toronto」，gp：80，w：43，l：24，t：10，ol：3，gf：234，ga：204，pts：'99'}，.. .........]; }）;

我指的是http://angular-ui.github.io/ng-grid/，但沒有找到解決方案，我想要做什麼。

來源

2014-05-22 Rajul

什麼？不清楚請詳細說明。您沒有提供數據的來源以及您的應用程序的任何工作環境 – Dalorzo

修改了我的問題。簡單地說，我想渲染一個網格，如上所述，它具有列標題以及行標題。 – Rajul

再次不清楚你沒有提供你的數據來源 – Dalorzo

在columndefs使用rowTemplate和headerClass的組合得到這個工作：

app.controller('MyCtrl', function ($scope) { 
     $scope.myData = [ 
      { 
       team: "x-boston", gp: 79, w: 40, l: 18, t: 14, ol: 7, gf: 201, ga: 179, pts: '101' 
      }, 
      { 
       team: "x-toronto", gp: 80, w: 43, l: 24, t: 10, ol: 3, gf: 234, ga: 204, pts: '99' 
      } 
     ]; 

     var rowTemplate = '<div style="height: 100%"><div ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}">' + 
      '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last}">&nbsp;</div>' + 
      '<div ng-class="{bold: $first }" ng-cell></div></div></div>'; 

     $scope.gridOptions = { 
      data: 'myData', 
      rowTemplate: rowTemplate, 

      columnDefs: [ 
       { 
        field: 'team', 
        width: 90, 
        headerClass: 'bold' 
       }, 
       { 
        field: 'gp' 
       }, 
       { 
        field: 'l' 
       }, 
       { 
        field: 't' 
       }, 
       { 
        field: 'ol' 
       }, 
       { 
        field: 'gf' 
       }, 
       { 
        field: 'ga' 
       }, 
       { 
        field: 'w' 
       }, 
       { 
        field: 'pts', 
        headerClass: 'bold' 
       } 
      ] 
     } 
    });

Here is a Plunker

注意如何<div ng-class="{bold: $first }"在rowTemplate添加大膽類第一collumn。在Columdefs中，最簡單的方法是使用headerClass。

您可以修改style.css中的css。

如果你真的想要另一種風格的x-team的前2個字母，你也可以添加一個單元格模板，應用一個過濾器，將一個span中的前兩個字母包裝起來，然後將cellText渲染爲html。如果你想知道如何做到這一點，添加一個新的問題，或者這太長了。

來源

2014-05-23 10:55:48 mainguy

賓果！ GERONIMO !!! – Rajul

如何使用ng grid在AngularJS中實現原始標題和列標題

回答

相關問題