劍道網格拖放中的一列值保持不變

Question

我對kendo UI還是比較陌生，但是有些方法可以通過拖放功能渲染kendo網格，用戶可以在其中拖放行。在我的情況下，我有三列id，name，sequence

所以我需要在拖放一行時更改id和name數據的同時保持序列列數據不變。

Ex id=1 Name=David Sequnce=0
   id=2 Name=Mark  Sequnce=1

現在，我將第1行拖到第2行，同時序列列的數據保持不變，就像這樣的新數據，

Ex id=2 Name=Mark   Sequnce=0
   id=1 Name=David  Sequnce=1

就我而言，每一行都在變化。 我需要實施此解決方案。

有人可以幫我這個忙嗎？

干杯，

Chinthaka

Answer 1

嘗試這個，

腳本

<script type="text/javascript">

    $(document).ready(function () {
    var data = [
{ id: 1, text: "David ", Sequnce: 0 },
{ id: 2, text: "Mark  ", Sequnce: 1 }
]

    var dataSource = new kendo.data.DataSource({
        data: data,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    text: { type: "string" },
                    Sequnce: { type: "number" }
                }
            }
        }
    });

    var grid = $("#grid").kendoGrid({
        dataSource: dataSource,
        scrollable: false,
        columns: ["id", "text", "Sequnce"]
    }).data("kendoGrid");

    grid.table.kendoDraggable({
        filter: "tbody > tr",
        group: "gridGroup",
        hint: function (e) {
            return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
        }
    });

    grid.table/*.find("tbody > tr")*/.kendoDropTarget({
        group: "gridGroup",
        drop: function (e) {
            var target = dataSource.get($(e.draggable.currentTarget).data("id"));
        dest = $(e.target);

            if (dest.is("th")) {
                return;
            }
            dest = dataSource.get(dest.parent().data("id"));

            //not on same item
            if (target.get("id") !== dest.get("id")) {
                //reorder the items
                var tmp = target.get("Sequnce");
                target.set("Sequnce", dest.get("Sequnce"));
                dest.set("Sequnce", tmp);

                dataSource.sort({ field: "Sequnce", dir: "asc" });
            }
        }
    });     

    });

</script>

視圖

<div id="grid">
</div>

演示： http : //jsfiddle.net/nmB69/710/