如何使用 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/但没有找到我想做的事情的解决方案。
最佳答案
通过在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}"> </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'
}
]
}
});
注意如何<div ng-class="{bold: $first }"
rowTemplate 中将粗体类添加到第一列。在 Columdefs 中,最简单的方法是使用 headerClass。
您可以修改style.css中的css。
如果您确实想要其他样式的 x-teams 的前 2 个字母,您也可以添加一个单元格模板,应用一个将前 2 个字母包装在一个跨度中的过滤器,然后将 cellText 呈现为 html。 如果您想知道如何执行此操作,请添加一个新问题,否则这会变得太长。
关于javascript - 如何使用 ng grid 在 AngularJS 中实现原始标题和列标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23818738/