从 ajax 调用更改高度后向展开的 div 添加边框答案

【问题标题】：Add border to expanded div after height changes from ajax call从 ajax 调用更改高度后向展开的 div 添加边框
【发布时间】：2014-01-19 08:12:15
【问题描述】：

提前感谢您的任何建议 - 我有一张桌子，上面有一堆 tbody 作为行。每个 tbody 可以单独展开，也可以一起展开。我正在通过边框类在扩展的 tbody 周围添加边框还有 2 个扩展级别 - 因此当任一级别显示时都会添加边框类。

我有一个简单的函数：

    function toggleBorder(el){ 
        if($(el).height() > 50){
            $(el).addClass('tbodyBorder');
        }else{
          $(el).removeClass('tbodyBorder');
       }
    }

（顺便说一句：我检查高度的原因是因为我搭载的点击事件是切换功能，所以我最大限度地减少了创建新点击事件的需要。）

此功能可以通过 4 种不同方式触发。其中 2 个使用 ajax 来获取要在展开部分中显示的数据，因此我将 toggleBorder() 放在 setTimeout 函数中，当我展开单行时，该函数可以正常工作，

但是 - 这是我的问题：

当我想扩展所有行时，服务器可能需要 X 时间来返回所有数据并填充行，如果它在加载数据之前进行检查，则高度不会改变，因此不会添加边框类，我不断使 setTimeout 更长，当我有一行时这很可笑.....

任何想法....考虑 setInterval 但似乎过分了....

【问题讨论】：

你会使用 Dom 突变而不是 setInterval 来获取变化，但我想每次它应该等待看看在一定时间内元素是否没有其他变化。跨度>

标签： jquery ajax

【解决方案1】：

我建议你使用类来标记 tbody 元素的状态。

他们可能是：

"expanded" - 表示 tbody 已扩展。
"loaded" - 表示 tbody 已通过 ajax 加载。
“正在加载” - 表示当前正在通过 ajax 加载 tbody，但尚未加载。
"permanent" - 表示当 tbody 折叠时不应隐藏 tr。

您不需要注册额外的事件处理程序，只需在检查类的存在并做出相应响应的事件处理程序。事实上，您可以使用.on() 函数的版本，它将选择器作为第二个参数，并为整个表格注册一个单击处理程序。

$('#dataTable').on('click', '>tbody', function() {
    var $tbody = $(this);
    if (!$tbody.hasClass('expanded')) {
        if (!$tbody.hasClass('loaded')) {
            if (!$tbody.hasClass('loading')) {
                $tbody.addClass('loading');
                $.ajax('url', {
                    ...,
                    success: function(html) {
                        $tbody.removeClass('loading')
                            .append(html)
                            .addClass('loaded')
                            .addClass('expanded');
                    }
                });
            }
        } else {
            $tbody.children(':not(.permanent)').show();
            $tbody.addClass('expanded');
        }
    } else {
        $tbody.children(':not(.permanent)').hide();
        $tbody.removeClass('expanded');
    }
});

注意：在这种情况下，您不需要“tbodyBorder”类。相反，您可以将边框样式放在“扩展”类上。

jsfiddle

【讨论】：

您的老话是删除切换事件并在每次单击元素时检查状态，猜猜这是最好的选择。谢谢！

【解决方案2】：

为什么不为 ajax 使用.ajaxSuccess() 事件返回数据时注册一个处理程序。

这样，您将在 ajax 返回后立即调用您的代码，而不必猜测调用需要多长时间。

【讨论】：

好主意，它可以工作，但是当行折叠时我还需要删除边框，所以我尝试将点击事件与 ajaxSuccess 事件一起附加，但没有运气..

【解决方案3】：

也许在完成 AJAX 后，你可以抛出一个回调函数来为你调整高度。

在原版 Javascript 中，它看起来像：

function ajax(url) {

    var xhr = new XMLHTTPRequest;

    //put all your try, catch statements in there too

    xhr.onreadystatechange = function() {

        if (xhr.readyState == 4 /* and some other stuff */) {
            callback(someParamter);
            //the callback will do whatever you want, when the code completes
        }

    }

    xhr.open("GET",url,true);
    xhr.send();

}

或者，在 jQuery 中

$.ajax(function() {

    //all your stuff up here
    success: function(result) {
        callback(someParameter);
    }

});

【讨论】：