Question

我有一列包含使用自定义单元格和标题模板colDef的操作按钮的列，如下所示：

{name: 'custom', headerCellTemplate: actionHeader, cellTemplate: actionCell, enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 140}

grid具有ui-grid-move-columns属性，除具有标题模板的列外，所有列均可移动。我什至从源代码（模板缓存）中获取了一个模板，并在不做任何修改的情况下使用了它-仍然无法移动列。这是一个已知的错误吗？

我要使用的模板是这样：

<div role="columnheader"
     ng-class="{ 'sortable': sortable, 'ui-grid-header-cell-last-col': isLastCol }"
     ui-grid-one-bind-aria-labelledby-grid="col.uid + '-header-text ' + col.uid + '-sortdir-text'"
     aria-sort="{{col.sort.direction == asc ? 'ascending' : ( col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}">
    <div class="ui-grid-vertical-bar">&nbsp;</div>
    <div class="ui-grid-cell-contents">
        <div><i class="fa fa-fw fa-line-chart"></i><span class="tt-label"> - Chart</span></div>
        <div><i class="fa fa-fw fa-folder-open"></i><span class="tt-label"> - Docs</span></div>
        <div><i class="fa fa-fw fa-address-card"></i><span class="tt-label"> - Contacts</span></div>
    </div>
</div>

有什么我想念的吗？

Answer 1

我已使用UI-Grid Tutorial on Column Moving创建了一个初始Plunker，并对其进行了尽可能地更改，以包括您的代码：actionHeader将是您指定的模板，但是actionCell丢失了，所以我忽略了

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

我在columnDefs中添加了下一列：

  {name: 'custom', 
 headerCellTemplate: '<div role="columnheader" ng-class="{ \'sortable\': sortable, \'ui-grid-header-cell-last-col\': isLastCol }"      ui-grid-one-bind-aria-labelledby-grid="col.uid + \'-header-text \' + col.uid + \'-sortdir-text\'"      aria-sort="{{col.sort.direction == asc ? \'ascending\' : ( col.sort.direction == desc ? \'descending\' : (!col.sort.direction ? \'none\' : \'other\'))}}">     <div class="ui-grid-vertical-bar">&nbsp;</div>     <div class="ui-grid-cell-contents">         <div><i class="fa fa-fw fa-line-chart"></i><span class="tt-label"> - Chart</span></div>         <div><i class="fa fa-fw fa-folder-open"></i><span class="tt-label"> - Docs</span></div>         <div><i class="fa fa-fw fa-address-card"></i><span class="tt-label"> - Contacts</span></div>     </div> </div>'  
  }

据我所知，所有列都可以移动，包括使用headerCellTemplate的列。

您的代码在某处是否不同？

如果使用headerCellTemplate，则angularjs ui-grid无法移动列

1 个答案: