默認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-電網

回答

相關問題