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。快速谷歌搜索引导我到this StackOverflow线程，该线程表示如果元素scrollLeft设置为overflow，则无法设置元素的visible属性。

我的解决方案是将containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid);替换为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;替换为var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].style.marginLeft;，以使用边距而不是菜单放置计算中的滚动值。

列标题中的Bootstrap下拉列表

1 个答案: