Need to brainstorm some ideas for high performance overflow detector_问答_开发者

Need to brainstorm some ideas for high performance overflow detector

开发者 https://www.devze.com 2022-12-10 16:56 出处：网络

Problem: I have a large table, with say 20 columns, and 150 rows. The columns can be resized by the user (think excel). Each cell has overflow:hidden set.

When text overflows in any given cell i want to give a hint to the user开发者_JS百科 that this is happening.

Constraints:

This must perform well on IE6. Meaning that if you do this on IE6, you wont want to kill someone while using it.

This is what i ended up using. it works in IE only, but that is ok in this case:

add this css rule to the container that has overflow:hidden

text-overflow:ellipsis;

Preface: I have no idea how (or if) this will perform in IE6.

There are probably other ways to do this but you could use nested elements and compare their offsetHeight attributes:

 <html>
    <head>
        <style type="text/css">
            td { width: 80px; border: 1px solid #000; }
            td div { height: 20px; overflow: hidden; }
            .highlight { background-color: #efe; }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td><div><span>A B C</div></span></td>
                <td><div><span>D E F G H I J</span></div></td>
                <td><div><span>K L M</span></div></td>
            </tr>
            <tr>
                <td><div><span>N O P</span></div></td>
                <td><div><span>Q R S</span></div></td>
                <td><div><span>T U V W X Y Z</span></div></td>
            </tr>
        </table>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready
            (
                function()
                {
                    $("td div").each
                    (
                        function()
                        {
                            var collapsedHeight = $(this).attr("offsetHeight");
                            var actualHeight = $("span", this).attr("offsetHeight");

                            // if the inner span is taller than the div, make the div green
                            if (actualHeight > collapsedHeight)
                                $(this).addClass("highlight");
                        }
                    );
                }
            );
        </script>
    </body>
 </html>

I think the best way is to amortize the overflow detection by (for example) writing to a custom property everytime the user inputs data into a cell.

So, you would be using an approach similar to Lobstrosity's but instead of calculating overflow initially you would be calculating overflow each time a cell's input changes. This has the obvious drawback of not working for pre-populated cells, in this situation way you will have to calculate it for all populated cells at program startup.

Another hardcore option is to fix the cell dimensions (in other words, assuming the cell dimensions are known at page-generation-time) and calculate the overflow on server-side page generation (assuming you are using a server-side language). Its fugly, but it works.