Question

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

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

存储这些列名的配置文件，我试图将其编辑为具有＆lt; br＆gt;标签我想要分割，但是在呈现页面时没有得到解释，我看到列名称为aaaaaaa＆lt; br＆gt; bbbbbbbbbb＆lt; br＆gt; 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};
    }

当我这样做时，列标题变为空白！救命！

Answer 1

如果要在列名中呈现HTML，则需要更改headerCellTemplate.html JS文件中的模板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>

如果您对修改外部lib内容感到不满意，可以使用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 +）的文档。

如何在ng-grid列标题中呈现html格式的文本

1 个答案: