Question

正如标题所示，我有一个工作但未优化的固定标题表，它会在加载所有行后调整表格单元格的大小。

我希望用户不要看到重新调整大小并直接显示表格。

但问题是它花了太长时间，并且在显示所有行之前没有表可见，直到jQuery事件触发调整大小。

我想继续使用之前的DOM或者如何在屏幕上保留上一页缓冲区，直到调整大小，此时我想在jQuery中运行show事件。

如何实现这一预期结果，或者，如果没有，哪种方法有助于制作更有效的固定标头表呈现，而不会向用户显示为用户重新调整表格单元的大小？

PHP Serverside宽度计算代码

$visibleCols = array_diff($cols, $excludeCols, $hideCols);

foreach($visibleCols as $cidx=>$col)
{
    if (colIsCategoryField($col, $categoryNames))
        $visibleCols[] = $manageActionItems->getCategoryName($col);
}

foreach($visibleCols as $cidx=>$col)
{
    $thWidth[$col] = 0;
    $maxTDWidth[$col] = 0;
}

foreach($resAll as $idx=>$row)
{
    foreach ($visibleCols as $cidx=>$col)
    {
        $td = trim(preg_replace("/[\n\r]/", " ", $row[$col]));
        $length = (imagefontwidth($fontSize)) * strlen($td);

        if ($length > $maxTDWidth[$col])
        {
            $maxTDWidth[$col] = $length;
        }
    }
}
foreach ($visibleCols as $cidx=>$col)
{
    $th = ($cidx == 0)? "ID":$col;
    $thlen = (imagefontwidth($fontSize)) * strlen($th);
    $thWidth[$col] = $thlen;
}

foreach($visibleCols as $cidx=>$col)
{
    if ($cidx == 0)
        $width[$col] = 34;
    else
        $width[$col] = (max($maxTDWidth[$col], $thWidth[$col]) *.60) + 25;
}

＆GT;

jQuery列宽代码

function setColWidth(id_header, id_table)
{
            $("table#"+id_header).attr("style", "opacity: 0");
            $("table#"+id_table).attr("style", "opacity: 0");
            headers = $("table#"+id_header+" thead tr td");
            topcols = $("table#"+id_table+" tbody tr:first td");
            topcolvals = $("table#"+id_table+" tbody tr:first td input");
            headervals = $("table#"+id_header+" thead tr:first td input");

        $('div.'+id_header+'#'+id_header).attr('style', 'max-width:' + $('div.'+id_header+"#"+id_table).width());    

            for (var colidx = 0; colidx < $(headers).size(); colidx++)
            {
                    headerwidth = $(headers[colidx]).width();
                    topcolwidth = $(topcols[colidx]).width();


                    if (headerwidth > topcolwidth && !$(headervals[colidx]).attr('value'))
                    {
                        $(topcols[colidx]).attr('style',  'width: ' +  headerwidth + 'px; min-width:'+ headerwidth + 'px');
                        $(headers[colidx]).attr('style', 'width: ' +  headerwidth + 'px; min-width:'+ headerwidth + 'px');

                        $(topcolvals[colidx]).attr('value', headerwidth);
                        $(headervals[colidx]).attr('value', headerwidth);
                    }
                    else if (headerwidth < topcolwidth && !$(topcolvals[colidx]).attr('value'))
                    {
                        $(topcols[colidx]).attr('style',  'width: ' +  topcolwidth + '; min-width:'+ topcolwidth + 'px');
                        $(headers[colidx]).attr('style', 'width: ' +  topcolwidth + '; min-width:'+ topcolwidth + 'px');

                        $(topcolvals[colidx]).attr('value', topcolwidth);
                        $(headervals[colidx]).attr('value', topcolwidth);
                    }
            }
            $("table#"+id_header).attr("style", "opacity: 1");
            $("table#"+id_table).attr("style", "opacity: 1");
    }

PHP / HTML表格代码

<div class="summary_header <?=getHeaderClass($resAll);?>">
<table id="summary_header" border=1>
    <thead class="header">     
            <tr> 
                <th class="edit">
                    Edit&nbsp;
                </th>           
                <?php foreach ($cols as $cidx=>$col): ?>
                        <?php if (!in_array($col, $hideCols) || $col == 'ActionItemID'): ?>
                            <th <?//=getWidth($cidx)?>>
                            <? if (in_array($col, $categoryNames)):?>
                                <a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$col?>&dir=<?=getDir($dir, $col)?>');$('#summaryform').submit();"><?=$manageActionItems->getCategoryName($col)?></a>
                                <?=getArrow($orderBy, $col, $dir)?>
                            <?else:?>
                                <a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$col?>&dir=<?=getDir($dir, $col)?>');$('#summaryform').submit();"><?=($col=="ActionItemID")?"ID": $col?></a>
                                <?=getArrow($orderBy, $col, $dir)?>
                            <?endif?>
                            </th>                                                                     
                        <?php endif; ?> 
                <?php endforeach; ?>
            </tr>
        </thead>
    </table>
    </div>

动态固定TH优化 - 如何隐藏重新调整单元格宽度的渲染？

0 个答案: