Question

如何使用ng-grid实现以下目标。

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 Pts也是大胆的。因为这些都是标题。

以下是json上述信息的来源。

$ scope.myData = [{team：＆＃34; x-boston＆＃34;，gp：79，w：40，l：18，t：14，ol：7，gf：201，ga：179 ，PTS：＆＃39; 101＆＃39; }，{team：＆＃34; x-toronto＆＃34;，gp：80，w：43，l：24，t：10，ol：3，gf：234，ga：204，pts：＆＃39; 99＆＃39; }，...........]; }）;

我指的是http://angular-ui.github.io/ng-grid/，但没有找到我想做的解决方案。

Answer 1

通过在columndef中使用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

注意rowTemplate中的<div ng-class="{bold: $first }"如何将粗体类添加到第一列。在Columdefs中，最简单的方法是使用headerClass。

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

如果你真的想要另一种风格的x-teams的前2个字母，你也可以添加一个单元格模板，应用一个包装在span中的前两个字母的过滤器，然后将cellText渲染为html。如果你想知道如何做这个添加一个新问题，或者这个问题太长了。

如何使用ng网格在AngularJS中实现原始标题和列标题

1 个答案: