3

我在一个配置文件中有 5 个列名，我将其读入一个名为 javascript 中的列的数组。

var columns = [];
var columnNames = [];
var columnCount = 5;
$scope.nettingGridOptions = {
        data : 'tableData',
        columnDefs: 'columnNames'
}

接下来，我只是遍历列数组并在columnNames数组中分配值，以便我的 ng-grid 开始显示正确的displayName.

for(i=0;i<columnCount;i++)
    {       
        columnNames[i] = { field: i, displayName: columns[i], headerClass : "myPersonalHeaderClass"};
    }

我遇到的问题是列名太大。我想将列名（例如“aaaaaaaa bbbbbbbbbb cccccccc”）拆分为三行并将列名显示为

aaaaaaaaa
bbbbbbbbb
ccccccccc

存储这些列名的配置文件，我试图编辑它以在我想要拆分的任何地方都有一个 <br> 标记，但是
在呈现页面时标记没有被解释，我看到列名是 aaaaaaaaa<br> bbbbbbbbbb<br>cccccccc

我想我必须使用headerCellTemplate，但不确定我应该在那里做什么来告诉它呈现{{col.displayName}}为 HTML。

在看到 lort 给出的答案后（见下面的第一个答案） - 我尝试了一些东西，但仍然无法正常工作。

你好，

谢谢 Lort，我试图使用https://github.com/angular-ui/ng-grid/wiki/Templating上描述的模板。

这就是我所做的（将您使用 ng-html-bind 的建议与上述链接建议的更新模板的方式合并）。

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" ng-bind-html="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 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>';


    for(i=0;i<columnCount;i++)
    {           
        columnNames[i] = { field: i, displayName: columns[i], headerClass : "myPersonalHeaderClass", headerCellTemplate: myHeaderCellTemplate};
    }

当我这样做时，列标题变为空白！！！！帮助！

4

1 回答 1

3

如果要在列名中呈现 HTML，则需要更改JS 文件headerCellTemplate.html中的模板。ngGrid为此，请在该模板中找到以下代码：

<div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\">{{col.displayName}}</div>

并将其更改为：

<div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\" ng-bind-html=\"col.displayName\"></div>

如果您对修改外部库内容不满意，可以使用以下run()方法在应用程序的方法中覆盖该模板$templateCache：

// Assuming you have
// var app = angular.module(...);
// somewhere before following code
app.run(function($templateCache){
    $templateCache.put("headerCellTemplate.html",
    "<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\" ng-bind-html=\"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 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>"
);

请注意，我使用ng-bind-html的可能不足以满足您的需求。如果是这种情况，请尝试使用ng-bind-html-unsafe（在 Angular 1.0.8 中）或阅读$sce.trustAsHtml()（Angular 1.2+）的文档。

于 2013-10-25T13:40:19.077 回答