angular-js ng-grid rowTemplate與enableCellEdit衝突？

Question

看看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>' 
}; 

我使用的角度1.2.3和NG-電網2.0.13

Answer 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>"; 

注意自定義colorizer ng-class=\"{green: row.getProperty(\'age\') < 30}\"

然後使用該模板在gridOptions：

$scope.gridOptions = { 
    data: 'myData', 
    enableCellEdit: true, 
    enableCellSelection: true, 
    rowTemplate: tabrow 
    }; 

試試這個Plunker