查看ng-grid的示例,我发现既可以为样式添加rowTemplate等,也可以通过在单元格中输入数据来进行类似excel的编辑。这两个人是否存在已知冲突?或者我只是没有正确配置数据网格?一旦应用了rowTemplate,就会丢失标记字段的功能。
以下是ng-grid github页面中的示例plunker供参考:
http://plnkr.co/edit/fGhK5VNwFH6GNakZ1TVq?p=preview
//main.js
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
enableCellEdit: true,
enableCellSelection: true,
rowTemplate: '<div style="height: 100%" ng-class="{green: row.getProperty(\'age\') < 30}"><div ng-style="{ \'cursor\': row.cursor }" 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-cell></div></div></div>'
};
我使用角度1.2.3和ng-grid 2.0.13
答案 0 :(得分:1)
像这样写rowTemplate
:
var tabrow = "<div ng-style=\"{ 'cursor': row.cursor }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngCell {{col.cellClass}}\">\r" +
"\n" +
"\t<div class=\"ngVerticalBar\" ng-style=\"{height: rowHeight}\" ng-class=\"{ ngVerticalBarVisible: !$last }\"> </div>\r" +
"\n" +
"\t<div ng-class=\"{green: row.getProperty(\'age\') < 30}\" ng-cell></div>\r" +
"\n" +
"</div>";
请注意自定义着色器ng-class=\"{green: row.getProperty(\'age\') < 30}\"
然后使用gridOptions
中的模板:
$scope.gridOptions = {
data: 'myData',
enableCellEdit: true,
enableCellSelection: true,
rowTemplate: tabrow
};
试试这个Plunker