angular-js ng-grid rowTemplate 与 enableCellEdit 冲突？答案

【问题标题】：angular-js ng-grid rowTemplate conflicting with enableCellEdit?angular-js ng-grid rowTemplate 与 enableCellEdit 冲突？
【发布时间】：2014-09-11 15:39:59
【问题描述】：

查看 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 }">&nbsp;</div><div ng-cell></div></div></div>'
};

我正在使用 angular 1.2.3 和 ng-grid 2.0.13

【问题讨论】：

标签： javascript angularjs ng-grid

【解决方案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 }\">&nbsp;</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

【讨论】：

成功了，谢谢。我注意到颜色从外部 div 移动到 ng-cell 的 div。我实际上需要一个行悬停颜色，这就是我定义 rowTemplate 的原因。我应该把绿色类定义放在哪里，这样整行都是彩色的？并且仍然能够通过标签/导航。