Javascript ng网格中的默认headerCell模板
考虑以下angularJs代码片段:Javascript ng网格中的默认headerCell模板,javascript,angularjs,excel,ng-grid,Javascript,Angularjs,Excel,Ng Grid,考虑以下angularJs代码片段: var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }">' + '<div ng-click="col.sort($event
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 grid在浏览器中显示excel。我需要一个适用于所有字段的HeaderCell模板。由于字段来自excel,因此它们可以是随机、动态和任意数字
如何将默认headerCellTemplate设置为所有字段,这样我就不必在gridOptions的columnDefs部分提到字段了?因为田地是不受控制的
请注意,我也问过你。这就是我不能在一行上使用模板的原因,因为我希望字段可以单独拖动。在Javabackend中做了如下操作:
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;
}
其中$scope.colDefs包含generateHeaderCellTemplate的输出
列表字段将所有列名分组在一起
@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>";
}
$scope.myData = excelAsJson.excelData;
$scope.colDefs = columnDefsJson.columnDefs;
$scope.gridOptions = { data: 'myData', columnDefs: 'colDefs'};