Angularjs 将属性添加到网格列

使用ng grid，我想使用标题单元格模板添加我自己的工具提示。为此，我想创建一个名为“tooltip”的列属性。尝试过，但它没有显示在col属性中。你觉得给我们这个功能怎么样。否则，我会在每种情况下创建一个新模板吗

见PRUNKR：

理想情况下，gridOptions将包含如下ColumnDef：

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

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

并且

dimension1

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

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

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

{{col.displayName}

构建了一个解决方案—更多的是一个解决方案—此处：

这里有一段摘录。我将

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 tooltip="{{col.dimension1}}">{{col.displayName}}</div>

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

{{col.displayName.name}

编辑

---

问题是它会抛出错误，因为ng grid的实现希望displayName是一个字符串（至少在v2.0.7中是这样）；它调用col.displayName.toLowerCase（）。

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

var myHeaderCellTemplate=''+
“{{col.displayName}}”+
''+
''+
“{col.sortPriority}”+
''+
'';

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

（由于rep分数问题，无法在已接受的答案中添加注释，因此我将在此处添加注释）

一个简单的解决方案可以绕过接受答案的脚本错误，可以创建一个简单的JavaScript对象来支持在ng网格中使用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', headerCellTemplate:'header_template2.html'},
    {field:'complex.active', 
    dimension1: "Testing",
    displayName: 'In Progress', 
    headerCellTemplate:'header_template.html', 
    cellTemplate : 'checkBoxTemplate.html'}]

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。

我使用的是bootstrap 3.0、ui bootstrap 0.10、nggrid 2.0.11，为了使其正常工作，我定义了一个标题列模板，就像答案模板一样，区别在于使用工具提示append to body=“true”工具提示的属性。def列中的cellClass:“溢出可见”不是必需的

<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> {{col.displayName.name} {{col.sortPriority}

---

在堆栈溢出时，您应该始终在post中包含源代码。关于这个特殊的问题，如果你有一个已知的解决方法，你可以发布它，然后链接到这篇文章，并向ng grid团队提交一个功能请求。我会更新这个问题。至于plunkr，我最终创作了原作（也可能不是个好主意）。在我提出问题之前，我向ng grid团队提出了一个问题，但后来就解决了。我会重新打开它，如果他们愿意，我会让他们关闭它。我承认这是一个懒惰的问题。很酷，我只是觉得这可能不会在这里得到答案，因为我看到这里有几个网格扩展请求没有响应。这将是一个很好的内置虽然如果你认为它足够干净，它可能值得张贴拉请求。。。如果你删除了链接，我会投赞成票，最好有列描述。非常聪明的解决方法-很高兴知道可以使用对象，而不仅仅是字符串ng grid的实现希望displayName是字符串（至少在v2.0.7中）；它调用col.displayName.toLowerCase（）。非常正确。我已经编辑了我的解决方案。事实是，事实上，这些错误，加上滞后，以及与旧IE浏览器的不兼容，使我完全放弃了ng网格。我现在使用的智能表很容易定制。（如果您感兴趣）您好，我正在使用bootstrap 3.0、ui bootstrap 0.10、nggrid 2.0.11，您的解决方案不起作用，您能检查一下吗？谢谢谢谢，这修复了我在页面加载中遇到的一些ng grid控制台错误