在 Kendo Grid 上放置时推动记录

Question

我正在尝试使用此示例，如 HERE in 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

拖放时插入行的方法是使用数据源insert（或add）功能。在高层次上，您将行插入新位置，并将其从旧位置删除。 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);
        }
    }
});

Answer 2

由于您只是尝试修改行的顺序，因此您的原始方法应该可行。您需要根据所有其他行与源行和目标行的相对位置来调整所有其他行的位置，而不是交换位置。

您的放置目标定义可能如下所示：

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")),
            sourcePosition,
            targetPosition,
            position,
            item;

        //not on same item
        if (target.get("id") !== dest.get("id")) {
            // set new position for dropped item
            sourcePosition = target.get("position");
            targetPosition = dest.get("position");
            if (targetPosition > sourcePosition) {
                targetPosition -= 1;
            }
            target.set("position", targetPosition);

            // update positions for all other items
            for (var i = 0, max = dataSource.total(); i < max; i++) {
                item = dataSource.at(i);
                if (item.uid === target.uid) continue;
                position = item.position;

                // items which had a higher position than the source item need to move down by one
                if (position >= sourcePosition) {
                    position -= 1;
                }
                // items which had a higher position than the target position need to move up by one
                if (position >= targetPosition) {
                    position += 1;
                }

                item.set("position", position);
            }

            dataSource.sort({
                field: "position",
                dir: "asc"
            });
        }
    }
});

(demo)