默认headerCell模板在NG-电网

考虑的angularJs下面的代码片断：默认headerCell模板在NG-电网

var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }">' + 
          '<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}} <img src="PLUS-ICON.png" /></div>' + 
          '<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>' + 
          '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>' + 
          '<div class="ngSortPriority">{{col.sortPriority}}</div>' + 
          '<div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div>' + 
          '</div>' + 
          '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>'; 
$scope.gridOptions = { 
    data: self.myData, 
    columnDefs: [ 
     { field: 'firstField', displayName: 'First Column', headerCellTemplate: myHeaderCellTemplate }, 
     { field: 'secondField', displayName: 'Second Column', headerCellTemplate: myHeaderCellTemplate }, 
     { field: 'lastField', displayName: 'Last Column', headerCellTemplate: myHeaderCellTemplate } 
    ] 
};

我试图用NG-格在浏览器中显示的Excel。我需要一个headerCellTemplate适用于我所有的领域。由于这些字段来自excel，因此它们可以是随机的，动态的和任意数量的。

如何设置一个默认的headerCellTemplate到所有的字段，这样我就不必在gridOptions的columnDefs部分提到字段了？（由于田地是不受控制的）

P.S.请参阅我也问过的this question。这是我无法在一行上使用模板的原因，因为我希望字段可以单独拖放。

来源

2015-05-12 chaity

做过类似的在Java中（后端）：

public static String generateHeaderCellTemplate(List<String> excelFields) { 

     String headerCellTemplate = "{ \"data\": \"myData\", \"columnDefs\": ["; 
     for (int i = 0; i < excelFields.size(); i++) { 
      String field = excelFields.get(i); 
      if (i != 0) { 
       headerCellTemplate += ","; 
      } 
      headerCellTemplate += ("{ \"field\": \"" + field); 
      headerCellTemplate += ("\", \"width\":80," + " \"headerCellTemplate\":" + "\"myHeaderCellTemplate\"}"); 
     } 
     headerCellTemplate += "]}"; 
     return headerCellTemplate; 
    }

控制器：

@RequestMapping(value= "/myHeaderCellTemplate", method= RequestMethod.GET) 
    public @ResponseBody String headerTemplate() { 
     return "<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{cursor: col.cursor}\" ng-class=\"{ ngSorted: !noSortVisible }\">"+ 
       "<div class=\"ngHeaderText item\" id=\"{{col.displayName}}\" draggable value=\"{{col.displayName}}\">{{col.displayName}}</div>"+ 
       "<div class=\"ngSortButtonDown\" ng-show=\"col.showSortButtonDown()\"></div>"+ 

     "<div class=\"ngSortButtonUp\" ng-show=\"col.showSortButtonUp()\"></div>"+ 
     "<div class=\"ngSortPriority\">{{col.sortPriority}}</div>"+ 
     "</div>"+ 
"<div ng-show=\"col.resizable\" class=\"ngHeaderGrip\" ng-click=\"col.gripClick($event)\" ng-mousedown=\"col.gripOnMouseDown($event)\"></div>"; 
    }

App.js：

$scope.myData = excelAsJson.excelData; 
    $scope.colDefs = columnDefsJson.columnDefs; 
    $scope.gridOptions = { data: 'myData', columnDefs: 'colDefs'};

其中$scope.colDefs包含generateHeaderCellTemplate() List<String> excelFields输出有所有专栏nam es分组在一起

来源

2015-05-12 11:42:53 chaity

默认headerCell模板在NG-电网

回答

相关问题