在Kendo Grid上放下时推动记录

Question

我正在尝试使用JSFIDDLE 中显示的这个例子，我遇到的问题是我想在放下时挤压新记录而不是交换。我尝试在 drop 函数中添加一个 for 循环，如果目标小于目标记录，则增加目标记录，如果目标大于目标，则减少它。

问题是我最终得到了重复的位置，如 4,4 或 5,5,5。是否有任何剑道 UI 示例可以与此功能一起使用？而不是交换？。

例子：

id   text      position
1    world        1
2    cup          2
3    Brazil       3
4    2014         4
5    Soccer       5

如果我将记录 4 移到顶部，我想

id   text      position
4    2014         1
1    World        2
2    Cup          3
3    Brazil       4
5    Soccer       5

如果有人能指出我正确的方向，我将不胜感激。

Answer 1

拖放时插入行的方法是使用数据源插入（或添加）功能。在较高级别，您将行插入新位置，并将其从旧位置删除。Kendo 的网格将自动刷新显示 - 您只需要正确获取数据即可。下一个挑战是获取目标行号。您已经通过在网格中添加一列并执行 target.get("position")) 来完成此操作。我为此使用了 datasource.indexOf 方法，并删除了 Position 列 - 清理显示。参考jsfiddle。以下是代码的一小段摘录（感谢下面的 Lars 的改进！）

grid.table.kendoDropTargetArea({
    filter: "td",
    group: "gridGroup",
    drop: function (e) {
        e.draggable.hint.hide();
        var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
            destElement = $(e.dropTarget).closest("tr"),
            dest = dataSource.getByUid(destElement.data("uid")),
            destPosition = dataSource.indexOf(dest);

        //not on same item
        if (target.get("id") !== dest.get("id")) {
            dataSource.remove(target);
            dataSource.insert(destPosition, target);
        }
    }
});