Question

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

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

如果有人知道如何实现这一目标，我将非常感激。

谢谢！

Answer 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);

Answer 2

替换示例中的此代码

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

与

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

移动SlickGrid的顶部面板

2 个答案: