蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 45|回复: 0

Js表格万条数据瞬间加载实现代码

[复制链接]

1979

主题

1

好友

1609

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 2017-10-12 07:40:38 |显示全部楼层
    Js表格万条数据瞬间加载实现代码
    Js表格,万条数据瞬间加载 在Ajax动态加载数据的实际应用中,大家都习惯了一种思维方式:一条数据创建一行。 于是如果数量大的时候,一次性要加载完数据的话,浏览器就会卡上半天 受Flex的DataGrid控件的启发,在Flex的DataGrid控件中,展示数据的方法并不是有多少条数据就创建多少行,它最多只创建你在界面上所看到的十几二十行(假设为n行),如果数据多的话,在滚动过程中,会从数据中抽取你应该看到的这n行数据,重新展示在已经创建好的那n行控件中。 也就是说,Flex的DataGrid控件中,我们实际上看到的仅仅是那n行控件,只是它们展示的数据是根据滚动条状态来筛选出来的。 所以,如果在JS中,也用类似的方法实现,那么就是上万条数据,可能也只要创建几十个Dom而已,效率自然快得多了。 废话不多说,上代码。首先,需要一个滚动条 Scrollbarjs 复制代码 代码如下: function Scrollbar() { thisoptions = { total : 0, //数据总数 pos : 0, //当前滚动位置 itemSize : 20, //单项尺寸 size : 200 //控件尺寸 }; } Scrollbarprototype = (function () { function setOptions(options) { for (var attr in options) { thisoptions[attr] = options[attr]; } Refresh(this); } function Refresh(_this) { if (!_thiscreated) return; //设置控件高度 _thisbarstyleheight = _thisoptionssize + "px"; //设置内容高度 var ch = _thisoptionstotal * _thisoptionsitemSize; _thiscontentstyleheight = ch + "px"; } //获取滚动位置 function getPos() { var top = thisbarscrollTop; var pos = parseInt(top / thisoptionsitemSize); return pos; } //每页可展示的数据数量 function getPageItems() { return thisoptionssize / thisoptionsitemSize; } //滚动事件响应 function OnScroll(_this) { var pos = _thisgetPos(); if (pos == _thisoptionspos) return; _thisoptionspos = pos; _thisonScroll(pos); } //滚动条创建 function CreateAt(dom) { var _this = this; var bar = documentcreateElement("div"); var content = documentcreateElement("div"); barappendChild(content); barstylewidth = "19px"; barstyleoverflowY = "scroll"; barstyleoverflowX = "hidden"; if (barattachEvent) { barattachEvent("onscroll", function () { OnScroll(_this); }); } else { //firefox兼容 baraddEventListener("scroll", function () { OnScroll(_this); }, false); } contentstylebackgroundColor = "white"; contentstylewidth = "1px"; thisbar = bar; thiscontent = content; if (typeof(dom) == "string") { dom = documentgetElementById(dom); } dominnerHTML = ""; domappendChild(thisbar); thiscreated = true; Refresh(this); } return { setOptions : setOptions, CreateAt : CreateAt, getPos : getPos, getPageItems : getPageItems, onScroll : null //模拟滚动条事件 }; })();  页面代码: 复制代码 代码如下: lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"gt; lt;html xmlns="w3org/1999/xhtml"gt; lt;headgt; lt;titlegt; 表格控件 lt;/titlegt; lt;script src="Scrollbarjs" type="text/javascript"gt; lt;/scriptgt; lt;script language="javascript" type="text/javascript"gt; var data = []; //创建一万条示例数据 for (var i = 0; i lt; 10000; i++) { var row = { id: i, text: "text" + i }; datapush(row); } //创建滚动条 var scrbar = new Scrollbar(); windowonload = function() { scrbarCreateAt("divScroll"); scrbarsetOptions({ total: 10000, size: 300 }); scrbaronScroll = function(pos) { ShowData(pos); } //获取模板 var items = scrbargetPageItems(); var tpl = documentgetElementById("trTpl"); tplparentNoderemoveChild(tpl); //仅创建所看到的几十行表格,所以自然快得多 var list = documentgetElementById("tblList"); for (var i = 0; i lt; datalength  i lt; items; i++) { var nr = tplcloneNode(true); //从模板行复制新行 listappendChild(nr); } ShowData(scrbargetPos()); } //根据滚动条,展示数据 function ShowData(pos) { var n = scrbargetPageItems(); var rows = documentgetElementById("tblList")rows; for (var i = 0; i lt; n; i++) { var row = rows[i]; var item = data[i + pos]; rowcells["tdID"]innerHTML = item["id"]; rowcells["tdText"]innerHTML = item["text"]; } } lt;/scriptgt; lt;/headgt; lt;bodygt; lt;div id="divScroll" style="float:right"gt; lt;/divgt; lt;table border="1"gt; lt;!--行标题- lt;theadgt; lt;trgt; lt;thgt; ID lt;/thgt; lt;thgt; Text lt;/thgt; lt;/trgt; lt;/theadgt; lt;!--数据展示区- lt;tbody id="tblList"gt; lt;tr id="trTpl"gt; lt;td id="tdID"gt; lt;/tdgt; lt;td id="tdText"gt; lt;/tdgt; lt;/trgt; lt;/tbodygt; lt;/tablegt; lt;/bodygt; lt;/htmlgt;
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-23 06:50

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部