如何重新排列剑道网格行？

Question

我正在向 kendo gid 动态添加行。现在我需要一个重新排序按钮，我可以在其中上下移动一行。我不想要拖放功能。我能够获得每一行 ​​id。需要一些帮助...

<script>
$(document).ready(function () {
    var grid = $("#grid").kendoGrid({
        columns: [
            { field: "Control", title: "Web Control Name" },
            { field: "Value", title: "Drag & Drop Variable" },
            {
                command: [
                { title: "create", template: "<img class='ob-image' src='../DefaultAssets/Images/New.png' style='padding: 0 15px 0 5px;' />" },
                { title: "reorder", template: "<img class ='up-image' src='../DefaultAssets/Images/Upimages.jpg' style='padding: 0 15px 0 5px;' />" },
                { "name": "destroy", title: "" }
                ],
            },
        ],
        dataSource: {
            data: [
              {
                  Control: "Web Control name",
                  Value: "Drag & Drop Variable"
              },
            ],
            schema: {
                model: {
                    Control: "Web Control name",
                    Value: "Drag & Drop Variable"
                }
            }
        },
        reorderable: true,

        editable: {
            //    confirmation: "Are you sure that you want to delete this record?",
            createAt: "bottom"
        },
        remove: function (e) {
        }
    });
    var grid = $("#grid").data("kendoGrid");
    $("#grid").on("click", ".ob-image", function () {
        var grid = $("#grid").data("kendoGrid");            
        grid.addRow();          
    });

    $("#grid").on("click", ".up-image", function () {
        var row = $(this).closest("tr");
        var rowIdx = $("tr", grid.tbody).index(row);         
        alert(rowIdx);
    });

});

Answer 1

您可以创建模板列并使用数据源insert 和remove 方法重新排列数据项。网格会自动刷新。

$("#grid").kendoGrid({
  dataSource: [
    { foo: "foo" },
    { foo: "bar" },
    { foo: "baz" }
  ],
  columns: [
    { field: "foo" },
    { template: '<button onclick="return up(\'#=uid#\')">up</button><button onclick="return down(\'#=uid#\')">down</button>' }
  ]  
});


function up(uid) {
  var grid = $("#grid").data("kendoGrid");
  var dataItem = grid.dataSource.getByUid(uid);
  var index = grid.dataSource.indexOf(dataItem);
  var newIndex = Math.max(0, index - 1);

  if (newIndex != index) {
    grid.dataSource.remove(dataItem);
    grid.dataSource.insert(newIndex, dataItem);
  }

  return false;
}

function down(uid) {
  var grid = $("#grid").data("kendoGrid");
  var dataItem = grid.dataSource.getByUid(uid);
  var index = grid.dataSource.indexOf(dataItem);
  var newIndex = Math.min(grid.dataSource.total() - 1, index + 1);

  if (newIndex != index) {
    grid.dataSource.remove(dataItem);
    grid.dataSource.insert(newIndex, dataItem);
  }

  return false;
}

这是一个现场演示：http://jsbin.com/ExOgiPib/1/edit

Answer 2

曾几何时，我是一名剑道 UI 用户。我也遇到了排序问题，这就是我当时解决它的方法（在经历了很多痛苦之后）：

        //Sort Hack

        /*
        Changes all dataSources to case insensitive sorting (client side sorting).
        This snipped enable case insensitive sorting on Kendo UI grid, too.

        The original case sensitive comparer is a private and can't be accessed without modifying the original source code.
        tested with Kendo UI version 2012.2.710 (Q2 2012 / July 2012).
        */

        var CaseInsensitiveComparer = {

            getterCache: {},

            getter: function (expression) {
                return this.getterCache[expression] = this.getterCache[expression] || new Function("d", "return " + kendo.expr(expression));
            },

            selector: function (field) {
                return jQuery.isFunction(field) ? field : this.getter(field);
            },

            asc: function (field) {
                var selector = this.selector(field);
                return function (a, b) {

                    if ((selector(a).toLowerCase) && (selector(b).toLowerCase)) {
                        a = selector(a).toLowerCase(); // the magical part
                        b = selector(b).toLowerCase();
                    }

                    return a > b ? 1 : (a < b ? -1 : 0);
                };
            },

            desc: function (field) {
                var selector = this.selector(field);
                return function (a, b) {

                    if ((selector(a).toLowerCase) && (selector(b).toLowerCase)) {
                        a = selector(a).toLowerCase(); // the magical part
                        b = selector(b).toLowerCase();
                    }

                    return a < b ? 1 : (a > b ? -1 : 0);
                };
            },

            create: function (descriptor) {
                return this[descriptor.dir.toLowerCase()](descriptor.field);
            },


            combine: function (comparers) {
                return function (a, b) {
                    var result = comparers[0](a, b),
            idx,
            length;

                    for (idx = 1, length = comparers.length; idx < length; idx++) {
                        result = result || comparers[idx](a, b);
                    }

                    return result;
                };
            }
        };

        kendo.data.Query.prototype.normalizeSort = function (field, dir) {
            if (field) {
                var descriptor = typeof field === "string" ? { field: field, dir: dir} : field,
        descriptors = jQuery.isArray(descriptor) ? descriptor : (descriptor !== undefined ? [descriptor] : []);

                return jQuery.grep(descriptors, function (d) { return !!d.dir; });
            }
        };

        kendo.data.Query.prototype.sort = function (field, dir, comparer) {

            var idx,
    length,
    descriptors = this.normalizeSort(field, dir),
    comparers = [];

            comparer = comparer || CaseInsensitiveComparer;

            if (descriptors.length) {
                for (idx = 0, length = descriptors.length; idx < length; idx++) {
                    comparers.push(comparer.create(descriptors[idx]));
                }

                return this.orderBy({ compare: comparer.combine(comparers) });
            }

            return this;
        };

        kendo.data.Query.prototype.orderBy = function (selector) {

            var result = this.data.slice(0),
    comparer = jQuery.isFunction(selector) || !selector ? CaseInsensitiveComparer.asc(selector) : selector.compare;

            return new kendo.data.Query(result.sort(comparer));
        };

        kendo.data.Query.prototype.orderByDescending = function (selector) {

            return new kendo.data.Query(this.data.slice(0).sort(CaseInsensitiveComparer.desc(selector)));
        };
        //Sort Hack

您可以实现自己的解决方案，您可以添加自己的功能，订单更改会随心所欲地发生。