javascript - 如何使用 ng grid 在 AngularJS 中实现原始标题和列标题

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:"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/但没有找到我想做的事情的解决方案。

Answer 1

通过在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 中将粗体类添加到第一列。在 Columdefs 中，最简单的方法是使用 headerClass。

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

如果您确实想要其他样式的 x-teams 的前 2 个字母，您也可以添加一个单元格模板，应用一个将前 2 个字母包装在一个跨度中的过滤器，然后将 cellText 呈现为 html。如果您想知道如何执行此操作，请添加一个新问题，否则这会变得太长。