列标题中的Bootstrap下拉列表

Question

我一直在尝试使用ng-grid 3.0（ui-grid）。 我已经设法填充我的网格，它的响应速度很快，它的功能非常棒。 但我正在尝试自定义列标题，因为我需要更多信息。

我可以创建一个自定义标题单元格模板，如文档中所示，但我似乎无法在那里使用Bootstrap Dropdown，它会被裁剪，我根本无法使用它。 一些谷歌搜索让我觉得它可能是溢出属性的一些问题，但我仍然无法解决它。 我的网格选项如下：

  $scope.columnDefs = [
    { name:'name', displayName: 'Vdd', headerCellTemplate: 'headerTemplate.html' },
    { name:'gender', headerCellTemplate: 'headerTemplate.html' },
    { name:'company' }
  ]

  $scope.gridOptions = {
    columnDefs: $scope.columnDefs,
    rowTemplate: 'rowTemplate.html',
    data: 'data'
  };

我在plunkr中举了一个例子并设法重现了我的问题： http ：//plnkr.co/edit/qdrFiifiz18fxB8w6Aja？p = preview

我想替换内置的下拉菜单（因为它似乎不允许嵌套和子菜单）并添加另一个（所以最后，我在每个标题单元格中有两个下拉菜单）

任何帮助表示赞赏=）

Answer 1

我很自豪地说我认为我已经弄明白了。 我一直在挖掘ui-grid的源代码并将其缩小到这个块（行：2847 - 2852）。

function syncHorizontalHeader(scrollEvent){
    var newScrollLeft = scrollEvent.getNewScrollLeft(colContainer, containerCtrl.viewport);
    if (containerCtrl.headerViewport) {
        containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid);
    }
}

我注意到containerCtrl.headerViewport.scrollLeft永远不会被设置为newScrollLeft 。 一个快速的谷歌搜索引导我到这个 StackOverflow线程，它说如果它的overflow设置为visible ，你不能设置元素的scrollLeft属性。

我的解决方案是替换containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid); with containerCtrl.headerViewport.style.marginLeft = -gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid) + 'px'; 这只是在标题上设置了一个负余量。 然后添加一个overflow:hidden; 样式为.ui-grid-render-container-body以隐藏超出主网格视口的标题。

这样做会搞乱列菜单的放置，但有一个简单的解决方法。 在第514行替换var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].scrollLeft; with var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].style.marginLeft; 在菜单放置计算中使用边距而不是滚动值。