Question

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

Answer 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。

Answer 2

是的，你可以在KendoUi做到这一点。我同意，他们的文档可能会更加清晰，但请查看treeview drag＆amp;下降：

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

Answer 3

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

Answer 4

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

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

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

Answer 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();

KendoUI可以像JQueryUI一样排序

5 个答案: