5

JQueryUI の sortable メソッドのような KendoUI の使用例を探しています。このようなものを見つけることができないようです。KendoUI でこれができないのは残念です。

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

4

5 に答える 5

4

他の 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。

于 2012-11-06T15:34:18.907 に答える
3

はい、KendoUi でそれを行うことができます。私は同意します、彼らのドキュメントはもう少し明確かもしれませんが、ツリービューのドラッグ＆ドロップの下でチェックしてください：

http://demos.kendoui.c​​om/web/treeview/dragdrop.html

于 2012-10-05T11:03:54.467 に答える
2

この質問を見つけた人のために。Kendo UI に Sortable 要素が追加されました: http://demos.telerik.com/kendo-ui/web/sortable/index.html

于 2014-04-16T12:10:38.570 に答える
1

カスタム ビルダーを使用してカスタム jQuery UI js ファイルを作成できます: http://jqueryui.com/download

必要な ui コアと並べ替え可能な関数を含めるための参照を取得するだけで、ファイル サイズが最小限に抑えられ、探している機能が得られます。

Kendo UI は jQuery で動作するため、jQuery UI の追加の重みは最小限です。

于 2012-08-28T02:28:55.047 に答える