twitter-bootstrap - 剑道网格页脚/寻呼机在引导选项卡内损坏

Question

我发现剑道网格放置在当前不可见的引导选项卡中时存在问题。当使标签可见时，页脚（Pager）与网格断开了连接。如果在显示选项卡后初始化网格，则一切正常。此外，如果数据源是从中读取（），一切看起来都很好（卡入到位）。这些都不是可取的（我可能希望在 dom 准备好时初始化，或者不希望在选择选项卡时阅读）。

我该如何解决这个问题？

我在下面回答我自己的问题，但会对替代、精致或“更合适”的解决方案感兴趣。

Answer 1

假设这是此处列出的问题http: //www.kendoui.c​​om/forums/kendo-ui-web/grid/grid-height-issues.aspx k-grid-content div 的高度需要重新计算，但是只有一次（因为这似乎解决了特定页面视图的问题）。

此代码应解决问题：

function recalculateGridSize(gridElement) {
    gridElement = $(gridElement);
    var contentHeight = $('.k-grid-content').height();
    var headerHeight = gridElement.find('.k-grid-header').height(),
        pagerHeight = gridElement.find('.k-grid-pager').height();
    contentHeight = contentHeight - (pagerHeight + headerHeight);
    gridElement.find('.k-grid-content').css('height', contentHeight);
};

$('body').on('shown.bs.tab', function(e) {
    var currentTabHref = $(e.target).attr('href');
    $($(e.target).attr('href')).find('.k-grid:not([data-recalculated])').each(function() {
        recalculateGridSize(this);
        $(this).attr('data-recalculated', 'true');
    });
});

希望这会有所帮助。