Js表格，万条数据瞬间加载

最新推荐文章于 2024-09-04 14:37:18 发布
最新推荐文章于 2024-09-04 14:37:18 发布
阅读量3.7k 收藏
点赞数
在Ajax动态加载数据的实际应用中，大家都习惯了一种思维方式：一条数据创建一行。 
于是如果数量大的时候，一次性要加载完数据的话，浏览器就会卡上半天 

受Flex的DataGrid控件的启发，在Flex的DataGrid控件中，展示数据的方法并不是有多少条数据就创建多少行，它最多只创建你在界面上所看到的十几二十行（假设为n行），如果数据多的话，在滚动过程中，会从数据中抽取你应该看到的这n行数据，重新展示在已经创建好的那n行控件中。 
也就是说，Flex的DataGrid控件中，我们实际上看到的仅仅是那n行控件，只是它们展示的数据是根据滚动条状态来筛选出来的。 

所以，如果在JS中，也用类似的方法实现，那么就是上万条数据，可能也只要创建几十个Dom而已，效率自然快得多了。 
废话不多说，上代码。首先，需要一个滚动条
JScript co de 
   
   

    
    function
    
     Scrollbar() {
    
    
    this
    
    .options 
    
    =
    
     {
        total: 
    
    0
    
    ,   
    
    //
    
    数据总数
    
    

    
            pos: 
    
    0
    
    ,     
    
    //
    
    当前滚动位置
    
    

    
            itemSize: 
    
    20
    
    ,  
    
    //
    
    单项尺寸
    
    

    
            size: 
    
    200
    
      
    
    //
    
    控件尺寸
    
    

    
        };
}
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
    
      
    
    //
    
    模拟滚动条事件
    
    

    
        };
})();

页面代码
HTML co de 
   
   

    
    <!
    
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    
    >
    
    

    
    <
    
    html 
    
    xmlns
    
    ="http://www.w3.org/1999/xhtml"
    
    >
    
    

    
    <
    
    head
    
    >
    
    
    
    
    <
    
    title
    
    >
    
    表格控件
    
    </
    
    title
    
    >
    
    

    
    
    <
    
    script 
    
    src
    
    ="Scrollbar.js"
    
     type
    
    ="text/javascript"
    
    ></
    
    script
    
    >
    
    

    
    <
    
    script 
    
    language
    
    ="javascript"
    
     type
    
    ="text/javascript"
    
    >
    
    
    
    
    var
    
     data 
    
    =
    
     [];
    
    
    //
    
    创建一万条示例数据
    
    

    
        
    
    for
    
     (
    
    var
    
     i 
    
    =
    
     
    
    0
    
    ; i 
    
    <
    
     
    
    10000
    
    ; i
    
    ++
    
    ) {
        
    
    var
    
     row 
    
    =
    
     { id: i, text: 
    
    "
    
    text
    
    "
    
     
    
    +
    
     i };
        data.push(row);
    }

    
    
    //
    
    创建滚动条
    
    

    
        
    
    var
    
     scrbar 
    
    =
    
     
    
    new
    
     Scrollbar();
    window.onload 
    
    =
    
     
    
    function
    
    () {
        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
    
    );   
    
    //
    
    从模板行复制新行
    
    

    
                list.appendChild(nr);
        }
        ShowData(scrbar.getPos());
    }
    
    
    
    //
    
    根据滚动条，展示数据
    
    

    
        
    
    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[
    
    "
    
    tdID
    
    "
    
    ].innerHTML 
    
    =
    
     item[
    
    "
    
    id
    
    "
    
    ];
            row.cells[
    
    "
    
    tdText
    
    "
    
    ].innerHTML 
    
    =
    
     item[
    
    "
    
    text
    
    "
    
    ];
        }
    }

    
    </
    
    script
    
    >
    
    

    
    </
    
    head
    
    >
    
    

    
    <
    
    body
    
    >
    
    
    
    
    <
    
    div 
    
    id
    
    ="divScroll"
    
     style
    
    ="float:right"
    
    >
    
    
    
    
    </
    
    div
    
    >
    
    
    
    
    <
    
    table 
    
    border
    
    ="1"
    
    >
    
    
        
    
    <!--
    
    行标题
    
    -->
    
    
        
    
    <
    
    thead
    
    ><
    
    tr
    
    >
    
    
            
    
    <
    
    th
    
    >
    
    ID
    
    </
    
    th
    
    >
    
    
            
    
    <
    
    th
    
    >
    
    Text
    
    </
    
    th
    
    >
    
    
        
    
    </
    
    tr
    
    ></
    
    thead
    
    >
    
    
        
        
    
    <!--
    
    数据展示区
    
    -->
    
    
        
    
    <
    
    tbody 
    
    id
    
    ="tblList"
    
    ><
    
    tr 
    
    id
    
    ="trTpl"
    
    >
    
    
            
    
    <
    
    td 
    
    id
    
    ="tdID"
    
    >
    
    &nbsp;
    
    </
    
    td
    
    >
    
    
            
    
    <
    
    td 
    
    id
    
    ="tdText"
    
    >
    
    &nbsp;
    
    </
    
    td
    
    >
    
    
        
    
    </
    
    tr
    
    ></
    
    tbody
    
    >
    
    
    
    
    </
    
    table
    
    >
    
    

    
    </
    
    body
    
    >
    
    

    
    </
    
    html
    
    >


转自：
http://fogandsun.blog.163.com/blog/static/36658874201029101414245

Timfeng冯
关注
Js表格，万条数据瞬间加载 .zip
10-08
Js表格，万条数据瞬间加载 Js表格，万条数据瞬间加载 Js表格，万条数据瞬间加载 Js表格，万条数据瞬间加载
JS表格，万条数据瞬间加载（转载）
mzllyl的专栏
06-13 1012
在Ajax动态加载数据的实际应用中，大家都习惯了一种思维方式：一条数据创建一行。于是如果数量大的时候，一次性要加载完数据的话，浏览器就会卡上半天受Flex的DataGrid控件的启发，在Flex的DataGrid控件中，展示数据的方法并不是有多少条数据就创建多少行，它最多只创建你在界面上所看到的十几二十行（假设为n行），如果数据多的话，在滚动过程中，会从数据中抽取你应该看到的这n行数据，重新展示在...
el-table 流加载
最新发布
weixin_53545517的博客
09-04 212
/ 获取当前滚动的节点，注意必须要有高度// 这个sign值，只是为了滚动到最底部3px的时候加载// 到这里 就会执行方法了})} else {console.log('没找到元素')},},<el-table-column fixed label="排名" width="50" prop="RowIndex" align="center"> </el-table-column>
JS封装的快速表格控件，上万数据瞬间加载完成
04-22
1.即使是上万条数据，也可以瞬间加载完成，绝对不卡。这是JS做的，不信？试试看 2.JS表格的标题行固定，一直是个头痛的问题，在这里得到完美解决 3.它的样式可不是写死的哦，完全可以由CSS来制定，方便实用 4.设计思路可参考我在CSDN的两个贴,你就明白原来就是这样：http://topic.csdn.net/u/20100302/13/dc1c3e79-800f-4f56-94fc-20d844bfede1.html http://topic.csdn.net/u/20100310/18/8bb1dd36-4b1c-480d-a89f-be302163dc57.html 5.如有BUG，或建议，欢迎指教
JavaScript 上万关键字瞬间匹配
Rainman的专栏
04-17 553
提到关键字搜索，首先联想到的无非就是使用一些indexOf，replace之类的字符函数，最多加上一些正则表达式而已.实现起来虽然很简单，但是这背后的效率问题可曾仔细考虑过？例如论坛中的关键字过滤，一般情况下需过滤的关键字数量及检测的文本长度都不大，所以这一瞬间的过程没有太多值得关注的地方。但若关键字数量不在是屈指可数，而是有成千上万， 并且待检测的文本也是一长篇大论，结果可不再是那么乐观了。大家
Js表格万条数据瞬间加载实现代码
01-19
Js表格，万条数据瞬间加载 在Ajax动态加载数据的实际应用中，大家都习惯了一种思维方式：一条数据创建一行。 于是如果数量大的时候，一次性要加载完数据的话，浏览器就会卡上半天 受Flex的DataGrid控件的启发，在Flex的DataGrid控件中，展示数据的方法并不是有多少条数据就创建多少行，它最多只创建你在界面上所看到的十几二十行（假设为n行），如果数据多的话，在滚动过程中，会从数据中抽取你应该看到的这n行数据，重新展示在已经创建好的那n行控件中。 也就是说，Flex的DataGrid控件中，我们实际上看到的仅仅是那n行控件，只是它们展示的数据是根据滚动条状态来筛选出来的。 所以，如果在
js实现数据导出为EXCEL（支持大量数据导出）
10-15
在前端开发中，数据导出到Excel是常见的需求，例如用户需要下载表格数据以便离线查看或进一步处理。 2. **ActiveXObject** - 在旧版本的Internet Explorer（IE）浏览器中，可以使用ActiveXObject来创建Excel应用...
js表格大数据量加载效率优化
赵晨的博客
03-23 1155
客户要求在一个页面中显示所有的dom信息，不能分页，导致页面有一些卡顿 之前的项目是用的jquery拼接的html字符串，表格改造起来很吃力 临时解决方案，以后会放弃使用jquery了，后期维护真是麻烦 表头固定采用css的position :sticky <div class="parentDiv" style="height: 426px; overflow-y: auto ; "> <div id="mylist" class="">
大数据量高性能前端表格grid 动态加载数据
07-14
大数据量高性能前端表格grid 动态加载数据 可以做到 一边滚动一边加载新的dom，并同时删除不可见的dom，防止因数据过大引起的dom卡顿
winfrom里面使用类似于table的合并的控件_JS开源免费的表格控件
weixin_39980353的博客
12-08 316
由于项目需要，最近搜集了一些表格控件，包括Fancygrid、handsontable等，这些是收费的下面推荐这3款，基本上能满足日常需求Element-ui 的Table表格控件w2ui表格vxe-table11. Element-ui The world's most popular Vue UI framework​element.eleme.cn我们做配载时用到了他自带的Table表格控件...
JS实现GridView式的数据加载（带滚动条）
Monkey_Coder的博客
03-18 627
JS实现GridView式的数据加载
树形table 10w+数据每次点击要十几秒 懒加载解决点击卡顿
weixin_43858851的博客
01-11 570
树形table 10w+数据每次点击要十几秒 懒加载解决点击卡顿
提高数据加载速度的常用方法
weixin_33719619的博客
07-13 1044
数据加载是数据库应用开发和测试中经常遇到的需求场景。如果要加载的数据量很大，加载的性能往往会成为瓶颈。最近又遇到了一个典型的数据加载场景，顺手总结一下相关的经验。 综合来看，提高加载速度的办法主要有： 1优化表结构和定义 1. 表定义中避免采用操作代价较高的数据类型，例如在允许的情况下用 INTEGER 或 DOUBLE 代替 DECI...
虚拟列表，我真的会了！
唐先森的博客
06-18 398
为什么要动态的改变呢？举个例子，我们向下滑动的时候会更换页面中要展示的数据列表，如果不改变原先的空白填充区域，那么随着滚动条的滚动，原先展示在可视区的第一条数据就会向上移动，虽然我们更新的数据是正确的，但并没有将它们展示在合适的位置。大多数展示图片的列表场景，其实都是提前确定要展示图片的尺寸的，比如微博，1张图片的尺寸是多少，2x2，3x3的尺寸是多少都是提前设计好的，只要我们给img标签加了固定高度，这样就算图片还没有加载出来，但是我们也能够准确的知道列表项的高度是多少。
js 函数 -- 节流 防抖 分时 惰性加载
weixin_43069018的博客
07-28 170
节流函数 由来 在某些场景下，函数可能被非常频繁地调用，而造成大的性能问题 window.onresize mousemove 等等 原理 当函数被频繁调用 需要我们按时间段忽略掉一些请求 coding // 实现一 function throttle(fn, interval = 300) { let canRun = true; return function () {...
原生 JavaScript 和 jQuery 的优劣比较
柠檬麻麻
08-08 7443
原生 JavaScript 和 jQuery 的优劣比较很多时候，我们经常听人说jquery有多快多快。在这个各种类库满天飞的时候，不得不说的是，能有原生JS快吗？是的，明显原生JS要更快，jq 速度再快，也无法与原生的js相比 因为类似JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西，考虑通用性必然会导致性能的损耗。当然，这也是jq相对js的劣势了。以下是一些简单的总结。JavaS
element 表格自动滚动加载数据_前端开发，原生 JS 实现最简单的图片懒加载
weixin_39994270的博客
11-30 356
懒加载什么是懒加载懒加载其实就是延迟加载，是一种对网页性能优化可方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。什么时候用懒加载当页面中需要一次性载入很多图片的时候，往往都是需要用懒加载的。懒加载原理我们都知道HTML中的 标签是代表文档中的一个图像。。说了个废话。。标签有一个属性是 src，用来表示图像的U...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值