Javascript 简单HTML表中的虚拟化_Javascript_Jquery_Html

Javascript 简单HTML表中的虚拟化

javascript jquery html

Javascript 简单HTML表中的虚拟化,javascript,jquery,html,Javascript,Jquery,Html,我尝试使用下面的代码片段实现简单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"></

我尝试使用下面的代码片段实现简单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>


表虚拟化>
var orderArray=[100]；
var viewportH=300；
var-prevScrollTop=0；
var scrollTop=0；
var-vScrollDir=1；
var行=[]；
var m=0；
var prevrendedRange={}，prevVisibleRange={}；
var RenderRange，visiblerange；
var行=[]；
var扩展；
var tbody=document.createElement（'tbody'）；
对于（变量i=0；i<100；i++）{
orderArray[i]={“CustomerID”：i，“CustomerName”：“Name”+i，“City”：“City”+i}
}
函数加载（）{
var panel=document.createElement（'div'）；
var h=orderArray.length*20；
panel.style.height=h+“px”；
var table=document.createElement（'table'）；
表1.1：间距=0；
table.className=“table1”；
表3.儿童（t身体）；
面板.附件（表）；
var元素=document.getElementById（“网格”）；
元素。子元素（面板）；
这个。render（）；
}
函数handleScroll（）{
var contentdiv=$（“#网格”）；
scrollTop=contentdiv.scrollTop（）；
var vScrollDist=Math.abs（scrollTop-prevScrollTop）；
if（vScrollDist）{
vScrollDir=prevScrollTopviewportH）{
setTimeout（$.proxy（this.\u render，this），50）；
}
否则{
这个。render（）；
}
prevScrollTop=scrollTop；
}
}
函数render（）{
visiblerange=这个；
renderdRange=这个；
这个；
var temp=visiblerange.top*20；
$（“.table1”）.css（{“页边距顶端”：temp+“px”}）；
此._渲染（渲染范围）；
PrevRenderRange=RenderRange；
PrevisibleRange=可视范围；
}
函数_渲染（范围）{
如果（！范围）
返回；
for（var i=range.top；i orderArray.length-1）{
返回；
}
if（行[i]！=null）
继续；
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纯黑色”；
cell1.textContent=VAL[“CustomerID”]；
cell1.style.height=“20px”；
tr.appendChild（cell1）；
var cell2=document.createElement（“td”）；
cell2.style.border=“0px纯黑色”；
cell2.textContent=VAL[“客户名称”]；
cell2.style.height=“20px”；
tr.appendChild（cell2）；
t附肢儿童（tr）；
行[i]=i；
}
}
函数_clearCachedRows（）{
如果（（renderRange.top-preverrenderRange.top）>=extend）{
对于（var i=prevrendedRange.top；i


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

我已经尝试过为div更新scrollTop值，但我无法实现这一点。你能不能请任何人对此进行调查。提供实现这一要求的建议
问候,，
Rajasekar
当你说虚拟化时，你的意思是只为可见的对象创建元素吗？我看到你的BG在WPF中-你是说像WPF虚拟化吗？在那个世界之外，这不是一个已知的术语。另外，您要解决的性能问题是什么？现代浏览器自己也做得很好。谢谢你的回复，是的，我想创建只出现在视图中的行，就像在WPF v中一样