Question

我在我的项目中使用SlickGrid，当我尝试重新排序列时，网页垂直滚动，列标题变得不可见。我发现在SlickGrid.js中，在函数setupColumnReorder中，当用户开始拖动列时调用start函数。我在setupColumnReorder中更改了启动和停止功能，如下所示。这次，当用户第一次开始拖动列标题时，网页会自动滚动。当用户第二次拖动时，它按预期工作，不会发生垂直滚动。如何在第一次拖动操作中阻止垂直滚动？

＆＃13;

    function setupColumnReorder() {
      $headers.filter(":ui-sortable").sortable("destroy");
      $headers.sortable({
        containment: "parent",
        distance: 3,
        axis: "x",
        cursor: "default",
        tolerance: "intersection",
        helper: "clone",
        placeholder: "slick-sortable-placeholder ui-state-default slick-header-column",
        start: function (e, ui) {
 /********************I added this part******************************************************/
        $("body").css("overflow", "hidden");
        $(this.parentNode).css("overflow", "hidden");
//       window.scrollTo(0, 0) ;
  /********************I added this part******************************************************/
          ui.placeholder.width(ui.helper.outerWidth() - headerColumnWidthDiff);
          $(ui.helper).addClass("slick-header-column-active");
        },
        beforeStop: function (e, ui) {
          $(ui.helper).removeClass("slick-header-column-active");
        },
        stop: function (e) {
   /********************I added this part******************************************************/
       $("body").css("overflow", "auto");
       $(this.parentNode).css("overflow", "auto");
   /********************I added this part******************************************************/

＆＃13;

编辑：我正在添加一个垂直滚动的例子。

＆＃13;

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <title>SlickGrid example 2: Formatters</title>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
  <style>
    .cell-title {
      font-weight: bold;
    }

    .cell-effort-driven {
      text-align: center;
    }

    .green {
      background-color: green;
    }      
    .red {
      background-color: red;
    }      
    .orange {
      background-color: orange;
    }      
  </style>
<script src="../lib/firebugx.js"></script>

<script src="../lib/jquery-1.11.2.min.js"></script>
<script src="../lib/jquery-ui-1.11.3.min.js"></script>
<script src="../lib/jquery.event.drag-2.3.0.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.formatters.js"></script>
<script src="../slick.grid.js"></script>
<script>
   // a standard formatter returns a string 
  function formatter(row, cell, value, columnDef, dataContext) {
      return value;
  }

  // an extended formatter returns an object { text , removeClasses, addClasses }
  // the classes are removed and then added during an update, or just added on cell creation
  function statusFormatter(row, cell, value, columnDef, dataContext) {
      var rtn = { text: value, removeClasses: 'red orange green' };
      if (value !== null || value !== "") {
        if (value < 33) {
          rtn.addClasses = "red";
        } else if (value < 66) {
          rtn.addClasses =  "orange";
        } else {
          rtn.addClasses =  "green";
        }
      }
      return rtn;
  }

  var grid;
  var data = [];
  var columns = [
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
    {id: "status", name: "Status", field: "percentComplete", width: 50, resizable: false, formatter: statusFormatter},
    {id: "start", name: "Start", field: "start", minWidth: 60},
    {id: "finish", name: "Finish", field: "finish", minWidth: 60},
    {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
  ];

  
  var options = {
    editable: false,
    enableAddRow: false,
    enableCellNavigation: true
  };

  $(function () {
    for (var i = 0; i < 5; i++) {
      var d = (data[i] = {});

      d["title"] = "<a href='#' tabindex='0'>Task</a> " + i;
      d["duration"] = "5 days";
      d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110));
      d["start"] = "01/01/2009";
      d["finish"] = "01/05/2009";
      d["effortDriven"] = (i % 5 == 0);
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
  })
</script>
</head>
<body>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="position:absolute;top:300px;width:700px;height:500px;"></div>
    </td>
    <td valign="top">
      <h2>Demonstrates:</h2>
      <ul>
        <li>width, minWidth, maxWidth, resizable, cssClass column attributes</li>
        <li>custom column formatters</li>
        <li>an extended formatter returning an object { text , removeClasses, addClasses } rather than a string, allowing adding and removing css classes from the cell</li>
      </ul>
        <h2>View Source:</h2>
        <ul>
            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example2-formatters.html" target="_sourcewindow"> View the source for this example on Github</a></li>
        </ul>
    </td>
  </tr>
</table>
</body>
</html>

＆＃13;

编辑：问题似乎与Mozilla Firefox有关。我使用谷歌浏览器测试了上述代码，没有垂直滚动。

Answer 1

您是否复制了基本示例中的错误？
您可以在http://6pac.github.io/SlickGrid/examples/example2-formatters.html中拖动列问题出在那里吗？

我没有遇到任何问题，所以如果您有问题请指定您正在使用的浏览器和操作系统。

列重新排序

1 个答案: