ng-grid中的默认headerCell模板

时间:2022-08-24 11:34:24

Consider the following snippet of angularJs code:

考虑以下angularJs代码片段:

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 }
    ]
};

I am trying to display an excel in browser using ng-grid. I need a headerCellTemplate common for all my fields. Since the fields are coming from an excel, they can be random, dynamic and any number.

我试图使用ng-grid在浏览器中显示excel。我需要一个对所有字段都通用的headerCellTemplate。由于字段来自excel,因此它们可以是随机的,动态的和任何数字。

How to set a default headerCellTemplate to all the fields, so that I do not have to mention fields in the columnDefs section of gridOptions? (Since fields are uncontrolled)

如何为所有字段设置默认的headerCellTemplate,这样我就不必提及gridOptions的columnDefs部分中的字段了? (因为字段不受控制)

P.S. Refer to this question asked by me as well. This is the reason I can't use template on a row, because I want fields to be individually draggable.

附:请参阅我提出的这个问题。这就是我不能在一行上使用模板的原因,因为我希望字段可以单独拖动。

1 个解决方案

#1


Did something like this in Java(backend):

在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;
    }

Controller:

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

where $scope.colDefs contains the output of generateHeaderCellTemplate() List<String> excelFields has all the column names groupped together

其中$ scope.colDefs包含generateHeaderCellTemplate()的输出List excelFields将所有列名组合在一起

#1


Did something like this in Java(backend):

在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;
    }

Controller:

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

where $scope.colDefs contains the output of generateHeaderCellTemplate() List<String> excelFields has all the column names groupped together

其中$ scope.colDefs包含generateHeaderCellTemplate()的输出List excelFields将所有列名组合在一起