KendoUI可排序等jQueryUI的

Question

寻找使用KendoUI像jQueryUI的排序方法的一个例子。似乎无法找到像这样的东西。如果你不能在KendoUI做到这一点是多么遗憾。

http://jqueryui.com/demos/sortable/

Answer 1

您可以创建一个自定义的jQuery UI JS与自定义生成器文件：http://jqueryui.com/download

刚刚得到的参考包括用户界面的核心和您所需要的排序功能，文件大小将是最小的你会得到你正在寻找的功能。

由于剑道UI工作与jQuery和jQuery UI的增加的重量微乎其微。

Answer 2

是的，你可以做，在KendoUi。我同意，他们的文件可能是一个更加清楚一点，但检查出下树视图拖&下降：

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

Answer 3

如果你想拥有相同的外观&觉得其他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; 
} 

如果允许再嵌套你应该append取代insertBefore。

Answer 4

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

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