1

我正在使用剑道网格。我想添加一个向下滑动的动画 - 当我点击网格中的一行时，它会随着动画展开（展开发生在 grid.ExpandRow 函数 - 剑道内部）。

我认为我需要关于 k-detail-row 元素的动画。但我仍然找不到合适的地方/方法来做到这一点。

任何人都已经这样做了，并且可以帮助我。

4

3 回答 3

1

我有同样的问题，虽然这是一个旧帖子，但我认为有人可能需要它。

不幸的是，剑道还不支持这个功能，但是有一个解决方案。

Kendo 使用 jquery toggle() 来显示和隐藏详细信息行，因此通过在 jQuery 上执行条件覆盖，您可以插入动画。

jQuery(function($) {
    var _oldShow = $.fn.show;
    var _oldHide = $.fn.hide;

    $.fn.show = function(speed, oldCallback) {
        return $(this).each(function(index, item) {
        var obj = $(item);
        _oldShow.apply(obj, [speed, oldCallback]);

        if (obj.hasClass("k-detail-row")) {
            obj.find(".k-grid.k-widget").each(function () {
                var grid = $(this);
                grid.slideDown(300);

            });
        }
    });
}

$.fn.hide = function (speed, oldCallback) {
    return $(this).each(function () {
        var obj = $(this);

        if (obj.hasClass("k-detail-row")) {
            obj.find(".k-grid.k-widget").each(function () {
                $(this).slideUp(300, function () { _oldHide.apply(obj, [speed, oldCallback]); });
            });
        } else {
            _oldHide.apply(obj, [speed, oldCallback]);
        }
    });
    }
});
于 2013-04-26T13:04:25.690 回答
1

不幸的是，表格行不支持动画。这是一个相关的问题：如何在表格行上使用 slideDown（或显示）功能？

于 2012-12-23T21:23:06.753 回答
0

我今天遇到了这个问题，并设法使用网格的 detailExpand 函数来解决它。然后，您可以使用 Kendo Fx 向下滑动效果使详细信息行向下滑动。例如：

detailExpand: function (e) {
    var detailRow = e.detailRow;
    setTimeout(function () {
        kendo.fx(detailRow).slideIn("down").duration(375).play();
    }, 0);
}

欲了解更多信息，请查看：

详细展开文档

Kendo Fx 文档

于 2015-06-23T12:58:25.637 回答