Question

使用ng-grid，我想使用标题单元格模板添加自己的工具提示。为此，我想创建一个名为“tooltip”的列属性。尝试过它并没有出现在col属性中。您如何为我们提供该功能？否则我会在每种情况下创建一个新模板吗？

请参阅plunkr：http://plnkr.co/edit/lSf4XK?p=preview

理想情况下，gridOptions将包含columnDefs，如下所示：

  columnDefs: [
    {field: 'complex.name', displayName: 'Name', headerCellTemplate:'header_template2.html'},
    {field:'complex.active', 
    dimension1: "Testing",
    displayName: 'In Progress', 
    headerCellTemplate:'header_template.html', 
    cellTemplate : 'checkBoxTemplate.html'}]

可以在模板中访问dimension1属性，如下所示：

<div tooltip="{{col.dimension1}}">{{col.displayName}}</div>

Answer 1

建立一个解决方案 - 更多的解决方法 - 在这里： http://plnkr.co/edit/0PMmrw?p=preview

这是一段摘录。我将displayName设为对象而不是字符串：

  columnDefs: [
    {field: 'complex.name', displayName: 'Name'},
    {field:'complex.active', 
    cellClass: 'overflow-visible',
    displayName: {name:'In Progress', tooltip:'Testing'}, 
    headerCellTemplate:'header_template.html', 
    cellTemplate : 'checkBoxTemplate.html'}]

然后在单元格模板中引用它，如下所示：

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

修改
这个问题是它会抛出错误，因为ng-grid的实现要求displayName是一个字符串（至少在v2.0.7中）;它调用col.displayName.toLowerCase（）。

Answer 2

你可以在我的情况下使用cellClass / headerClass属性我没有使用cellClass作为我的列，所以我使用了cellClass。我想在每个列标题上使用“help-id”属性。

在您的列定义中：

{field: 'id.value',       displayName: $scope.CONFIGVLANSlabels.tbl_vlans_id,             enableCellEdit: true,   editableCellTemplate: idEditCellTemplate,         headerCellTemplate: myHeaderCellTemplate,   cellClass:'tbl_vlans_id'}

在标题模板中

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" help-id="{{col.cellClass}}">{{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>';

希望这会对某人有所帮助。

Answer 3

（由于代表得分，无法在接受的答案中添加评论，所以我在这里添加评论）

解决已接受答案的脚本错误的简单解决方案，可以创建一个简单的JavaScript对象来支持使用ng-grid中的toLowerCase（）调用：

  function DisplayObject(name, tooltip) {
    // this refers to the new instance
    this.name = name;
    this.tooltip = tooltip;
    // you can also call methods
    this.toLowerCase = function() {
      return this.name.toLowerCase();
    }
  }

然后像这样使用它：

columnDefs: [
    {field: 'complex.name', displayName: 'Name'},
    {field:'complex.active', 
    cellClass: 'overflow-visible',
    displayName: new DisplayObject('In Progress','Testing'), 
    headerCellTemplate:'header_template.html', 
    cellTemplate : 'checkBoxTemplate.html'}]

ng-grid将不再抱怨toLowerCase（），并且名称将被添加到ng-grid fieldMap。

Answer 4

我正在使用bootstrap 3.0，ui-bootstrap 0.10，nggrid 2.0.11，为了使其工作我定义了一个标题列模板，就像答案模板一样，区别在于使用工具提示 - 附加到正文=工具提示的“true”属性。 cellClass：def列中的'overflow-visible'不是必需的。

<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" tooltip-append-to-body="true" tooltip="{{col.displayName.tooltip}}">{{col.displayName.name}}</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-grid列

4 个答案: