2

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>
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 に答える
0

私はブートストラップ 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 に答える