2

使用 ng-grid，我想使用标题单元格模板添加我自己的工具提示。为此，我想创建一个名为“工具提示”的列属性。试过了，它没有出现在 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>
4

4 回答 4

3

建立了一个解决方案 - 更多的是一种解决方法 - 在这里： 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()。

于 2013-09-05T03:54:33.573 回答
1

在我的情况下，您可以使用 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>';

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

于 2014-03-18T17:22:19.520 回答
1

（由于代表得分，无法对已接受的答案添加评论，所以我在此处添加）

绕过已接受答案的脚本错误的简单解决方案，可以创建一个简单的 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。

于 2014-05-21T02:05:57.400 回答
0

我正在使用 bootstrap 3.0、ui-bootstrap 0.10、nggrid 2.0.11，为了使其正常工作，我定义了一个标题列模板，如答案模板，不同之处在于使用了 tooltip-append-to-body="true " 工具提示的属性。列 def 中的 cellClass: '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>
于 2014-08-08T20:59:07.417 回答