Question

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

我有一个简单的功能：

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

（顺便说一句：我检查高度的原因是因为我捎带的点击事件是切换功能所以我最小化了创建新点击事件的需要。）

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

但是 - 这是我的问题：

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

任何想法....考虑setInterval但似乎过度杀人......

Answer 1

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

这样，一旦返回ajax，您就会调用代码，而不必猜测调用需要多长时间。

Answer 2

也许在完成AJAX后，您可以使用一个回调函数来调整高度。

在vanilla 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);
    }

});

Answer 3

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

他们可能是：

“expand” - 意味着tbody得到扩展。
“loaded” - 表示已通过ajax加载tbody。
“loading” - 表示当前正在通过ajax加载tbody，但尚未加载。
“permanent” - 表示当tbody折叠时不应隐藏tr。

你不需要注册额外的事件处理程序，只需要有条件逻辑事件处理程序，用于检查类的存在并进行相应的响应。实际上，您可以使用.on()函数的版本，该函数将选择器作为第二个参数，并为整个表注册一个on-click-handler。

$('#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

从ajax调用高度更改后，向扩展div添加边框

3 个答案: