1

次のコード スニペットを使用して、html テーブルにデータを表示し、大きなデータの読み込み時間を改善しました。

コードスニペット：

 <body onload="load();">
        <div id="Grid" style="overflow:scroll; width:600px;height:300px;   onscroll="handleScroll();"></div>
        <script type="text/javascript">        



  var orderArray = [100];
    var viewportH = 300;
    var prevScrollTop = 0;
    var scrollTop = 0;
    var vScrollDir = 1;
    var rows = [];
    var top=0;
    var temp=0;
    var m = 0;
    var prevRenderedRange = {}, prevVisibleRange = {};
    var renderedrange, visiblerange;
        var rows = [];  
        var extend;
        var tbody = document.createElement('tbody');
        for (var i = 0; i < 100; i++) {
            orderArray[i] = { "CustomerID": i, "CustomerName": "Name" + i, "City": "City" + i }
        }
        function load() {
            var panel = document.createElement('div');
            var h = orderArray.length * 20;
            panel.style.height = h + "px";
            var table = document.createElement('table');
            table.cellSpacing = 0;
            //table.style.position = "absolute";
            table.className = "table1";
            table.appendChild(tbody);
            panel.appendChild(table);
            var element = document.getElementById("Grid");
            element.appendChild(panel);
            this.render();
        }

        function handleScroll() {
            var contentdiv = $("#Grid");
            scrollTop = contentdiv.scrollTop();          

            var vScrollDist = Math.abs(scrollTop - prevScrollTop);
            if (vScrollDist) {
                vScrollDir = prevScrollTop < scrollTop ? 1 : -1;
                this.render();
                prevScrollTop = scrollTop;
            }
        }

        function render() {            
                renderedrange = this._getRenderedRowRange();          

            var datarange = orderArray.slice(renderedrange.top, renderedrange.bottom);
                var margin = ((renderedrange.top - visiblerange.top)*20) +
                    (renderedrange.top * 20) +
                     -temp +
                    "px";
            console.log("VisibleRange: " + visiblerange.top + " " + visiblerange.bottom);
            console.log("RenderedRowRange: " + renderedrange.top + " " + renderedrange.bottom);
            console.log(margin);
            $(".table1").css({ "top": margin });
            this._render(renderedrange);                        
        }

        function _render(range) {

            if (!range)
                return;

            console.log("Top:  " + range.top + "Bottom: " + range.bottom);
            for (var i = range.top; i <= range.bottom; i++) {

                if (i > orderArray.length - 1) {
                    return;
                }
                if (rows[i] != null)
                    continue;

                var vals = orderArray[i];
                var tr = document.createElement('tr');
                tr.className = "rowcell";
                tr.style.height = "20px";
                tr.height = "20px"
                var cell1 = document.createElement("td");
                cell1.style.border = "0px solid black";
                cell1.textContent = vals["CustomerID"];
                cell1.style.height = "20px";
                tr.appendChild(cell1);

                var cell2 = document.createElement("td");
                cell2.style.border = "0px solid black";
                cell2.textContent = vals["CustomerName"];
                cell2.style.height = "20px";
                tr.appendChild(cell2);
                tbody.appendChild(tr);
                rows[i] = i;
            }




        }       

        function _getRenderedRowRange() {
            visiblerange = this._getVisibleRowRange();
            var range = {};
            var topIndex = visiblerange.top;
            var bottomIndex = visiblerange.bottom;
            extend = Math.round(300 / 20);
            var minExtend = 3;
            if (vScrollDir == 1) {
                topIndex -= minExtend;
                bottomIndex += extend;
            } else {
                topIndex -= (extend - minExtend);
                bottomIndex += minExtend;
            }
            topIndex = Math.max(0, topIndex);
            bottomIndex = Math.min(orderArray.length, bottomIndex);
            range = { top: topIndex, bottom: bottomIndex };            
            return range;
        }

        function _getVisibleRowRange() {
            var coeff = scrollTop / (20 * orderArray.length);
            top = (coeff * orderArray.length);
            temp = (top % 1) * 20;
            var topIndex = Math.floor(top);
            var bottomIndex = Math.ceil(this._getrowposition(scrollTop + 300));
            topIndex = Math.max(0, topIndex);
            bottomIndex = Math.min(orderArray.length, bottomIndex);
            var rang = { top: topIndex, bottom: bottomIndex };
            return rang;
        }

        function   _getrowposition  (y) {
            return Math.floor((y) / 20);
        }   


    </script>
</body>

この場合、テーブルの上マージンを更新して、テーブルを div に配置しました。しかし、それは正しく適用されませんでした。

注：これは、テーブルをdivで置き換えた私の場合のテーブル仮想化の簡単な例です

4

1 に答える 1

1

結局、あなたの質問は明確ではありません。とにかく、テーブルを div 内に配置する場合は、テーブルの位置の値を親 div に対して相対的にします。

style="position:relative;"

このようにして、テーブルは相対的な位置になります

于 2013-11-11T11:51:23.780 に答える