Question

我是SlickGrid的新手，但喜欢它的外观和感觉。

我在页面上有两个SlickGrids，两个都是由后端MVC控制器的JSON提供的。这工作正常（虽然我有一个轻微的格式问题，但我相信我会想出那个位）。

我希望能够在网格之间拖放...但是，丢弃不会“添加”到网格中，它应该会导致我的服务器发布一个帖子，显示网格1从网格中删除的内容想象一下，如果你......

第一个网格有一个用户列表第二个网格有一个角色列表。

我想将用户放到一个角色上，然后回发到服务器，该用户被放到哪个角色上。（它也会以另一种方式工作......将角色放到用户身上，为用户提供角色 - 同样的结果，不同的掉落）

关注https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example9-row-reordering.html，我部分工作了。我花了一些时间来达到这个目的。我可以从一个网格拖动，但绝对没有关于如何让第二个网格接受掉落的IDEA，更别知第二个网格如何能够告诉第一个网格从第一个网格中删除了什么。

如何让第二个网格接受丢弃？我如何获得丢弃内容的详细信息？

在我想要进入的网格的JS中，我有......

        rolegrid.onMouseEnter.subscribe(function (e) {
            var cell = rolegrid.getCellFromEvent(e);
            console.log('-' + cell.row);
            //grid.setSelectedRows([cell.row]);
            dropRow = roleslickdata[cell.row].RoleName;
            console.log(cell.row + ' : ' + roleslickdata[cell.row].RoleName);
            e.stopPropagation();
        });

        rolegrid.onMouseLeave.subscribe(function (e) {
            var cell = rolegrid.getCellFromEvent(e);
            console.log('OUT-' + cell.row);
            //grid.setSelectedRows([cell.row]);
            dropRow = null;
            console.log('Leaving ' + cell.row + ' : ' + roleslickdata[cell.row].RoleName);
            e.stopPropagation();
        });

        rolegrid.onDragEnd.subscribe(function (e) {
            var cell = rolegrid.getCellFromEvent(e);
            console.log('DragEnd-' + cell.row);
            //grid.setSelectedRows([cell.row]);
            e.stopPropagation();
        });

现在...... onDragEnd似乎没有被触发，我假设这是因为拖动开始没有从这里开始。

onMouseEnter和onMouseLeave在射击时似乎是断断续续的...当onMouseEnter触发时，onMouseLeave也会触发，所以我不能依赖它。

任何想法都会有所帮助。

就像你知道的那样，它不会只是页面上的2个网格，最终可能会有更多，我希望每个网格都可以拖动，每个网格都可以接受来自另一个网格的拖放。< / p>

感谢您的帮助。

从上面继续...仍在尝试。我尝试过使用格式化程序，但是没有用。然而，我确实注意到一些非常奇怪的事情，因为当我拖动的项目落后于鼠标时，它会触发onMouseEnter和onMouseLeave事件......这是间歇性行为的原因。（我拖动的项目的顶部/左侧有鼠标指针10px。）

所以，改变......

      grid.onDrag.subscribe(function (e, dd) {
          dd.helper.css({ top: e.pageY - 5, left: e.pageX - 10 });
      });

拥有e.pageX + 10，我可以让onMouseEnter和onMouseLeave每次都发射几次。但是，我认为这不是理想的...因为它只是感觉有点奇怪，因为当您在Windows中拖动某些东西时，鼠标指针总是在您拖动的项目内。

我将继续这条路线，但如果有人有任何可能有帮助的进一步建议，我们将不胜感激。

谢谢。

Answer 1

我已经得到了......它花了我几天的时间，绝望地来到这里，但并没有放弃。发布答案以防其他人需要它，但如果有人有更好的方法，我们将不胜感激。

在目标网格中...... 基本上，在onMouseEnter中，将单元格的详细信息记录到全局var中，在我的情况下，我想记录RoleName。

在onMouseLeave中，将global var设置为null。

这样，当鼠标在单元格上方时，我知道我在哪里掉线。但是，请记住，如果我有一个我正在拖动的div，鼠标实际上不能超过div，它必须在它之外。

目标网格占位符div已绑定...

  $("#RoleTable-")
  .bind("drop", function (e, dd) {
      if (dd.mode != "DragUser") {
          return;
      }
      console.log("Drop in " + dropRow);

      console.log('Working with ' + dd.grid.getDataItem(dd.row).Username);

      grid.invalidate();
      grid.setSelectedRows([]);
  });

并通过

  dd.grid.getDataItem(dd.row).Username

我从源网格中获取用户名。（我不确定我是否需要grid.invalidate和grid.setSelectedRows ......它们可能只是我过去接近我想要的样本的剩余物。）

现在，我可以继续拯救......但与我对堕落感到沮丧相比，这是微不足道的。

在同一页面上从一个slickgrid拖放到另一个slickgrid

1 个答案: