移动 SlickGrid 的顶部面板答案

【问题标题】：Moving SlickGrid's top panel移动 SlickGrid 的顶部面板
【发布时间】：2014-02-13 22:10:42
【问题描述】：

我想知道如何在 DataView 中移动 SlickGrid 的顶部面板。我希望它滑到列标题上方而不是下方。

http://mleibman.github.io/SlickGrid/examples/example4-model.html

如果有人知道我如何做到这一点，我将不胜感激。

谢谢！

【问题讨论】：

标签： slickgrid

【解决方案1】：

想通了……

我必须在 slick.grid.js 中更改以下内容，

  $focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container);

  $headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $headers = $("<div class='slick-header-columns' style='left:-1000px' />").appendTo($headerScroller);
  $headers.width(getHeadersWidth());

  $headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $headerRow = $("<div class='slick-headerrow-columns' />").appendTo($headerRowScroller);
  $headerRowSpacer = $("<div style='display:block;height:1px;position:absolute;top:0;left:0;'></div>")
      .css("width", getCanvasWidth() + scrollbarDimensions.width + "px")
      .appendTo($headerRowScroller);

  $topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $topPanel = $("<div class='slick-top-panel' style='width:10000px' />").appendTo($topPanelScroller);

到这个...

  $focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container);

  $topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $topPanel = $("<div class='slick-top-panel' style='width:10000px' />").appendTo($topPanelScroller);

  $headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $headers = $("<div class='slick-header-columns' style='left:-1000px' />").appendTo($headerScroller);
  $headers.width(getHeadersWidth());

  $headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $headerRow = $("<div class='slick-headerrow-columns' />").appendTo($headerRowScroller);
  $headerRowSpacer = $("<div style='display:block;height:1px;position:absolute;top:0;left:0;'></div>")
      .css("width", getCanvasWidth() + scrollbarDimensions.width + "px")
      .appendTo($headerRowScroller);

【讨论】：

【解决方案2】：

在示例中替换此代码

$("#inlineFilterPanel")
  .appendTo(grid.getTopPanel())
  .show();

与

$('.grid-header')
  .after($("#inlineFilterPanel"))
  .show();

【讨论】：

对我没用。顶部面板保持在原来的位置，内联过滤器消失了。