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