js table显示大量数据不卡

 

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML基本页面</title>
</head>

<body>
	<table id="tblList">
		<tr id="trTpl">
			<td>123456</td>
			<td>123789</td>
		</tr>
	</table>
	<div id="divScroll">
		
	</div>
<script>

function Scrollbar() {
    this.options = {
        total: 0,   //数据总数
        pos: 0,     //当前滚动位置
        itemSize: 20,  //单项尺寸
        size: 500  //控件尺寸
    };
}
Scrollbar.prototype = (function () {
    function setOptions(options) {
        for (var attr in options) {
            this.options[attr] = options[attr];
        }
        Refresh(this);
    }
    function Refresh(_this) {
        if (!_this.created) return;

        //设置控件高度
        _this.bar.style.height = _this.options.size + "px";

        //设置内容高度
        var ch = _this.options.total * _this.options.itemSize;
        _this.content.style.height = ch + "px";
    }
    //获取滚动位置
    function getPos() {
        var top = this.bar.scrollTop;
        var pos = parseInt(top / this.options.itemSize);
        return pos;
    }
    //每页可展示的数据数量
    function getPageItems() {
        return this.options.size / this.options.itemSize;
    }

    //滚动事件响应
    function OnScroll(_this) {
        var pos = _this.getPos();
        if (pos == _this.options.pos) return;
        _this.options.pos = pos;
        _this.onScroll(pos);
    }

    //滚动条创建
    function CreateAt(dom) {
        var _this = this;

        var bar = document.createElement("div");
        var content = document.createElement("div");
        bar.appendChild(content);

        bar.style.width = "19px";
        bar.style.overflowY = "scroll";
        bar.style.overflowX = "hidden";
        if (bar.attachEvent) {
            bar.attachEvent("onscroll", function () { OnScroll(_this); });
        }
        else {//firefox兼容
            bar.addEventListener("scroll", function () { OnScroll(_this); }, false);
        }
        content.style.backgroundColor = "white";
        content.style.width = "1px";

        this.bar = bar;
        this.content = content;

        if (typeof (dom) == "string") {
            dom = document.getElementById(dom);
        }
        dom.innerHTML = "";
        dom.appendChild(this.bar);
        this.created = true;
        Refresh(this);
    }

    return {
        setOptions: setOptions,
        CreateAt: CreateAt,
        getPos: getPos,
        getPageItems: getPageItems,
        onScroll: null  //模拟滚动条事件
    };
})();

//根据滚动条,展示数据
        function ShowData(pos) {
            var n = scrbar.getPageItems();
            var rows = document.getElementById("tblList").rows;
            for (var i = 0; i < n; i++) {
                var row = rows[i];
                var item = data[i + pos];
                row.cells[0].innerHTML = item["id"];
                row.cells[1].innerHTML = item["text"];
            }
        }
		
		 var rows = document.getElementById("tblList").rows;
		 console.log(rows.length);
		 console.log(rows[0].cells.length);
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
				console.log(rows[0].cells[0].innerHTML);
				console.log(rows[0].cells[1].innerHTML);
            }

		var data = [];
        //创建一万条示例数据
        for (var i = 0; i < 10000; i++) {
            var row = { id: i, text: "text" + i };
            data.push(row);
        }

        //创建滚动条
        var scrbar = new Scrollbar();
      
        scrbar.CreateAt("divScroll");
        scrbar.setOptions({ total: 10000, size: 300 });
            scrbar.onScroll = function (pos) {
                ShowData(pos);
            }

            //获取模板
            var items = scrbar.getPageItems();
            var tpl = document.getElementById("trTpl");
            tpl.parentNode.removeChild(tpl);

            //仅创建所看到的几十行表格,所以自然快得多
            var list = document.getElementById("tblList");
            for (var i = 0; i < data.length && i < items; i++) {
                var nr = tpl.cloneNode(true);   //从模板行复制新行
				//var nr  = document.createElement("tr");
                list.appendChild(nr);
            }
            ShowData(scrbar.getPos());
</script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值