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 回答