0

我尝试使用下面的代码片段为简单的 HTML 表实现虚拟化逻辑，但在滚动时遇到了一些问题

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
          <title>Table Virtualization></title>
        <script src="scripts/jquery-1.10.1.min.js"></script>
        <script src="scripts/jsrender.min.js"></script>
        <script src="scripts/jquery.globalize.min.js"></script>        
        <script src="scripts/jsondata.js"></script>      
</head>
<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 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.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;
                if (vScrollDist > viewportH) {
                    setTimeout($.proxy(this._render, this), 50);
                }
                else {
                    this.render();
                }
                prevScrollTop = scrollTop;
            }
        }

        function render() {
            visiblerange = this._getVisibleRowRange();
            renderedrange = this._getRenderedRowRange();
            this._clearCachedRows();
            var temp = visiblerange.top * 20;
            $(".table1").css({ "margin-top": temp + "px" });
            this._render(renderedrange);            
            prevRenderedRange = renderedrange;
            prevVisibleRange = visiblerange;
        }

        function _render(range) {

            if (!range)
                return;
            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" + i;
                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 _clearCachedRows()  {  

            if ((renderedrange.top - prevRenderedRange.top) >= extend) {
                for (var i = prevRenderedRange.top; i < prevRenderedRange.bottom; i++) {
                    if (rows[i] != null)
                        //console.log("Remove Row:" + i);
                        var name = ".rowcell" + i;
                    $(name).remove();
                }
            }
            else
            {
                for (var i = prevRenderedRange.top; i < renderedrange.top; i++) {
                    if (rows[i] != null)
                        //console.log("Remove Row:" + i);
                        var name = ".rowcell" + i;
                    $(name).remove();
                }
            }
        }

        function _getRenderedRowRange(viewportTop) {
            var range = this._getVisibleRowRange(viewportTop);
            extend = Math.round(viewportH / 20);
            var minExtend = 3;
            if (vScrollDir == -1) {
                //Need to implepent the scrolling direction as UP
            }
            else if (vScrollDir == 1) {
                range.top -= minExtend;
                range.bottom += extend;
            }           
            range.top = Math.max(0, range.top);
            range.bottom = Math.min(orderArray.length, range.bottom);
            return range;     
        }

        function _getVisibleRowRange (viewportTop) {
            if (viewportTop == null) {
                viewportTop = scrollTop;
            }
            return {
                top: this._getrowposition(viewportTop),
                bottom: this._getrowposition(viewportTop + viewportH)
            };
        }

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


    </script>
</body>
</html>

滚动 div 滚动条的滚动条时未正确更新。请参阅随附的屏幕截图以供参考。

截屏： 在此处输入图像描述

我尝试过更新 div 的 scrollTop 值，但我无法做到这一点。您能否请任何人查看此内容。提供建议以实现此要求。

问候， 拉贾塞卡

4

0 回答 0