Kendo UI 像 JQuery UI 一样可排序答案

【问题标题】：KendoUI Sortable like JQueryUIKendo UI 像 JQuery UI 一样可排序
【发布时间】：2016-03-21 20:54:00
【问题描述】：

寻找使用 KendoUI 的示例，例如 JQueryUI 可排序方法。似乎找不到这样的东西。如果你不能在 KendoUI 中做到这一点，那真是太可惜了。

【问题讨论】：

【解决方案1】：

如果您想拥有与其他 KendoUI 小部件相同的外观和感觉，您可以尝试使用 TreeView 来实现它：

如果这是可排序的元素：

var dataSource = [
    { id:1, text:"Element 1" },
    { id:2, text:"Element 2" },
    { id:3, text:"Element 3" },
    { id:4, text:"Element 4" },
    { id:5, text:"Element 5" },
    { id:6, text:"Element 6" }
];

那么你可以使用下面的代码：

$("#sortable").kendoTreeView({
    dataSource :dataSource,
    template   :"<div class='ob-item'> #= item.text # </div>",
    dragAndDrop:true,
    drag       :function (e) {
        var dst = $($(e.dropTarget).closest(".k-item")[0]).data("uid");
        var src = $(e.sourceNode).data("uid");
        if ($(e.dropTarget).hasClass("ob-item") && dst != src) {
            e.setStatusClass("k-insert-top");
        } else {
            e.setStatusClass("k-denied");
        }
    },
    drop       :function (e) {
        if ($(e.sourceNode).data("uid") !== $(e.destinationNode).data("uid")) {
            $(e.sourceNode).insertBefore(e.destinationNode);
        }
        e.setValid(false);
    }
});

呈现一个可排序的列表。

注意事项：

ob-item 是您希望为每个可排序项目设置的样式。例如：

.ob-item {
    background-color: #e9e9e9;
    border: 1px solid #a99f9a;
    color: #2e2e2e;
    padding: 5px;
    border-radius: 4px;
}

如果您允许嵌套，则应将insertBefore 替换为append。

【讨论】：

【解决方案2】：

是的，您可以在 KendoUi 中做到这一点。我同意，他们的文档可能会更清晰一些，但请在树视图拖放下查看：

http://demos.kendoui.com/web/treeview/dragdrop.html

【讨论】：

有没有办法持久化这个排序服务器端？
Kendoui 是一个客户端库。是的，你可以，但它会使用你的服务器端语言。我不明白你为什么必须这样做。它只是将更多的计算放在服务器上。
抱歉，排序顺序（由客户端上的堆叠/排序设置）由用户自定义，应用程序需要（在我的情况下需要）
关于持久化列表，我不明白为什么这是一个不合理的问题。如果可排序列表不持久，它有什么好处？如果您返回列表并且它以默认顺序返回，则它没有用。

【解决方案3】：

对于那些发现这个问题的人。现在 Kendo UI 有了 Sortable 元素：http://demos.telerik.com/kendo-ui/web/sortable/index.html

【讨论】：

【解决方案4】：

您可以使用自定义构建器构建自定义 jQuery UI js 文件：http://jqueryui.com/download

只需获取包含 ui 核心和您需要的可排序功能的参考，文件大小将最小，您将获得所需的功能。

由于 Kendo UI 与 jQuery 一起使用，因此 jQuery UI 增加的重量是最小的。

【讨论】：

【解决方案5】：

这样试试

  var template = kendo.template("<ul id='sortable-basic'><li class='sortable'>Papercut <span>3:04</span></li><li class='sortable'>One Step Closer <span>2:35</span></li><li class='sortable'>With You <span>3:23</span></li><li class='sortable'>Points of Authority <span>3:20</span></li><li class='sortable'>Crawling <span>3:29</span></li><li class='sortable'>Runaway <span>3:03</span></li><li class='sortable'>By Myself <span>3:09</span></li></ul>");

$("#divSolution").html(template); //display the result
$("#sortable-basic").kendoSortable();

【讨论】：