AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

长列表优化之滚动替换数据方案小记

2017-11-24 1378
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

　　最近项目中要用到比较长的列表，在浏览器中打开渲染时比较慢，并占用了较多内存，于是就同事就建议尽量减少节点，在滚动时只是替换数据，于是就决定试试这种方法。

　　首先要做的就是添加拖动滚动条时的事件，另外由于UE要求对滚动条进行美化，于是就选用了jscrollpane这个jQuery滚动条插件，主页是：http://jscrollpane.kelvinluck.com/

　　基本要求是表头固定，内容可滚动，滚动时只是替换数据，不增减节点。由于要出现滚动条，所以要添加一个空的节点来占位，所以DEMO的HTML结构如下：

<h3>DEMO</h3>
<div class="bookList">
    <table class="bookList_head">
        <thead>
            <tr>
                <th class="book_title">Title</th>
                <th class="book_time">Time</th>
                <th class="book_author">Author</th>
                <th class="book_prize">Prize</th>
            </tr>
        </thead>
    </table>
    <div class="scroll-pane">
        <div id="emptyContainer" class="emptyContainer"></div>
        <table class="bookList_body">
            <tbody id="bookContent">
            </tbody>
        </table>
    </div>
</div>

　　然后要做的就是用测试数据填充列表，并给占位节点设置高度，JS代码如下：

    var bookData = [],
        bookMap = [],
        bookCount = 1000,
        showCount = 10,
        bookListBodyNode = $(".bookList_body"),
        bookContentNode = $("#bookContent"),
        itemHeight = 0,
        oFragment = document.createDocumentFragment();

    var emptyContainerNode = $("#emptyContainer");
    for(var i=0;i<bookCount;i++){
        bookData.push({
            "title":"JavaScript高级程序设计第"+(i+1)+"版",
            "time":"2013-1-27",
            "author":"佚名"+i,
            "prize":(i%50+1)+".00"
        });
    }
    
    for(i=0;i<showCount;i++){
        var bookItem = $("<tr></tr>"),
            bookItem_title = $("<td class=\"book_title\">" + bookData[i].title + "</td>"),
            bookItem_time = $("<td class=\"book_time\">" + bookData[i].time + "</td>"),
            bookItem_author = $("<td class=\"book_author\">" + bookData[i].author + "</td>"),
            bookItem_prize = $("<td class=\"book_prize\">" + bookData[i].prize + "</td>");
        bookItem.append(bookItem_title)
            .append(bookItem_time)
            .append(bookItem_author)
            .append(bookItem_prize);
        bookMap[i] = bookItem;
        oFragment.appendChild(bookItem[0]);
    }
    bookContentNode[0].appendChild(oFragment);
    itemHeight = parseInt(bookMap[0].height());
    emptyContainerNode.css("height", bookCount * itemHeight);

　　下一步就是给class为scroll-pane的节点应用jScrollPane插件添加滚动条，同是要添加滚动条滚动时的事件，代码如下：

$('.scroll-pane').bind('jsp-scroll-y',function(event, scrollPositionY, isAtTop, isAtBottom){
        bookListBodyNode.css("top",scrollPositionY);
        replaceBooklistData(scrollPositionY);
    }
).jScrollPane();

function replaceBooklistData(scrollPositionY){
    var beginIndex = Math.round(scrollPositionY / itemHeight);
    for(var i=0;i<showCount;i++){
        var bookItem = bookMap[i],
            bookItem_title = bookItem.find(".book_title"),
            bookItem_time = bookItem.find(".book_time"),
            bookItem_author = bookItem.find(".book_author"),
            bookItem_prize = bookItem.find(".book_prize");
        bookItem_title.html(bookData[i+beginIndex].title);
        bookItem_time.html(bookData[i+beginIndex].time);
        bookItem_author.html(bookData[i+beginIndex].author);
        bookItem_prize.html(bookData[i+beginIndex].prize);
    }
}

　　最后还要引入一个鼠标滚动时的插件mousewheel，全部代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Table Body Scroll Demo</title>
        <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
        <link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
        <script type="text/javascript" src="script/jquery.js"></script>
        <script type="text/javascript" src="script/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
    </head>
    <body>
        <h3>DEMO</h3>
        <div class="bookList">
            <table class="bookList_head">
                <thead>
                    <tr>
                        <th class="book_title">Title</th>
                        <th class="book_time">Time</th>
                        <th class="book_author">Author</th>
                        <th class="book_prize">Prize</th>
                    </tr>
                </thead>
            </table>
            <div class="scroll-pane">
                <div id="emptyContainer" class="emptyContainer"></div>
                <table class="bookList_body">
                    <tbody id="bookContent">
                    </tbody>
                </table>
            </div>
        </div>
        <script type="text/javascript" id="sourcecode">
            var bookData = [],
                bookMap = [],
                bookCount = 1000,
                showCount = 10,
                bookListBodyNode = $(".bookList_body"),
                bookContentNode = $("#bookContent"),
                itemHeight = 0,
                oFragment = document.createDocumentFragment();
                
            $(function(){
                $('.scroll-pane').bind('jsp-scroll-y',
                    function(event, scrollPositionY, isAtTop, isAtBottom){
                        bookListBodyNode.css("top",scrollPositionY);
                        replaceBooklistData(scrollPositionY);
                    }
                ).jScrollPane();
            });

            loadData();

            function replaceBooklistData(scrollPositionY){
                var beginIndex = Math.round(scrollPositionY / itemHeight);
                for(var i=0;i<showCount;i++){
                    var bookItem = bookMap[i],
                        bookItem_title = bookItem.find(".book_title"),
                        bookItem_time = bookItem.find(".book_time"),
                        bookItem_author = bookItem.find(".book_author"),
                        bookItem_prize = bookItem.find(".book_prize");
                    bookItem_title.html(bookData[i+beginIndex].title);
                    bookItem_time.html(bookData[i+beginIndex].time);
                    bookItem_author.html(bookData[i+beginIndex].author);
                    bookItem_prize.html(bookData[i+beginIndex].prize);
                }
            }

            function loadData(){
                var    emptyContainerNode = $("#emptyContainer");
                for(var i=0;i<bookCount;i++){
                    bookData.push({
                        "title":"JavaScript高级程序设计第"+(i+1)+"版",
                        "time":"2013-1-27",
                        "author":"佚名"+i,
                        "prize":(i%50+1)+".00"
                    });
                }
                
                for(i=0;i<showCount;i++){
                    var bookItem = $("<tr></tr>"),
                        bookItem_title = $("<td class=\"book_title\">" + bookData[i].title + "</td>"),
                        bookItem_time = $("<td class=\"book_time\">" + bookData[i].time + "</td>"),
                        bookItem_author = $("<td class=\"book_author\">" + bookData[i].author + "</td>"),
                        bookItem_prize = $("<td class=\"book_prize\">" + bookData[i].prize + "</td>");
                    bookItem.append(bookItem_title)
                        .append(bookItem_time)
                        .append(bookItem_author)
                        .append(bookItem_prize);
                    bookMap[i] = bookItem;
                    oFragment.appendChild(bookItem[0]);
                }
                bookContentNode[0].appendChild(oFragment);
                itemHeight = parseInt(bookMap[0].height()) || 34;//FOR IE7
                emptyContainerNode.css("height", bookCount * itemHeight);
            }
        </script>
    </body>
</html>

　　代码中的CSS（除了demo.css）和JS都可以在这里找到：https://github.com/vitch/jScrollPane

 　　demo.css代码如下：

.bookList{
    width:520px;
    height:364px;
}
.scroll-pane
{
    height:330px;
    overflow: auto;
}
.bookList .bookList_head,.bookList .bookList_body{
    width:100%;
    border-collapse:collapse;
}
.bookList .bookList_body{
    z-index:999;
    position:absolute;
    top:0;
    left:0;
}
.bookList .bookList_head thead{
    background-color:#F2F4F6;
}
.bookList th,.bookList td{
    padding:8px 0px 8px 5px;
    text-align:left;
    border-bottom:1px solid #CCC;
    font-size:14px;
}
.bookList .bookList_body tr:nth-child(even){
    background-color:#F0F0F0;
}
.bookList .bookList_body tr:hover{
    background-color:#CCC;
}
.book_title{
    width:250px;
}
.book_time{
    width:100px;
}
.book_author{
    width:80px;
}
.book_prize{
} 
.emptyContainer{
    width:100%;
    z-index:-1;
}

　　初步测试，在IE6/7/8/9、chrome、firefox下均正常显示，如果大家有更好方案，欢迎分享。



本文转自Artwl博客园博客，原文链接：http://www.cnblogs.com/artwl/，如需转载请自行联系原作者

文章标签：
前端开发
Web App开发
JavaScript
技术mix呢
目录
相关文章
游客mldfis24krfue
|
4月前
|
Kubernetes 监控 安全
在K8S中，滚动更新的过程？
在K8S中，滚动更新的过程？
游客mldfis24krfue
136 0
游客mldfis24krfue
|
4月前
|
Kubernetes 监控 API
在K8S中，滚动更新的过程是什么？
在K8S中，滚动更新的过程是什么？
游客mldfis24krfue
138 0
魏红斌
|
7月前
|
存储 弹性计算 运维
自动文档生成
【4月更文挑战第30天】
魏红斌
62 0
蒾酒
|
7月前
|
JavaScript
vue列表信息展示中新增数据，与编辑数据页面复用，降低重复代码
vue列表信息展示中新增数据，与编辑数据页面复用，降低重复代码
蒾酒
291 2
晚来南风晚相识
|
7月前
原生表格-滚动-合并功能
原生表格-滚动-合并功能
晚来南风晚相识
75 0
兜里只有三分钱~
jshtml滚动时间横向显示demo效果示例（整理）
jshtml滚动时间横向显示demo效果示例（整理）
兜里只有三分钱~
128 0
断墨寻径
ookie 值的修改方案
ookie 值的修改方案
断墨寻径
97 0
楚国玉
|
数据采集 JavaScript Python
python爬虫示例，获取主页面链接，次级页面链接通过主页面元素获取从而避免js生成变动的值，保存数据分批次避免数据丢失
python爬虫示例，获取主页面链接，次级页面链接通过主页面元素获取从而避免js生成变动的值，保存数据分批次避免数据丢失
楚国玉
114 0
1924133573907542
|
存储 开发框架 前端开发
ModStartCMS v5.5.0 页面标签支持，用户逻辑优化
ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用，支持后台一键快速安装，让开发者能快的实现业务功能开发。
1924133573907542
286 0
游客g2r3yknu46ngq
|
XML JavaScript 前端开发
App自动化之dom结构和元素定位方式（包含滑动列表定位）
App自动化之dom结构和元素定位方式（包含滑动列表定位）
游客g2r3yknu46ngq
188 0

热门文章

最新文章

  • 1
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 2
    Maven 3.6.3 的下载、安装、配置、检测（详细讲解）
  • 3
    基于区块链的机器学习模型创建方案
  • 4
    WPF listview item mouse enter/over popup
  • 5
    DevExpress 10.2.4系列-ASPxListBox根据列值不同设置不同图标
  • 6
    [Spring]支持注解的Spring调度器
  • 7
    红帽7.4新增的安全特性
  • 8
    hdu 1800 Flying to the Mars
  • 9
    研究 flex 4 开发后台管理项目（1）
  • 10
    Error: XML response that was returned...
  • 1
    HelloMeme：开源的面部表情与姿态迁移框架，将视频中的人物表情迁移到静态图像中生成动态视频
    98
  • 2
    VSI-Bench：李飞飞谢赛宁团队推出视觉空间智能基准测试集，旨在评估多模态大语言模型在空间认知和理解方面的能力
    30
  • 3
    CLEAR：新加坡国立大学推出线性注意力机制，使8K图像的生成速度提升6.3倍，显著减少了计算量和时间延迟
    30
  • 4
    Kheish：开源的多智能体开发框架，通过 YAML 配置工作流和多个 Agent 共同协作解决复杂任务
    38
  • 5
    Bamba-9B：基于 Mamba2 架构的仅解码语言模型，旨在提高大型语言模型在推理时的效率
    32
  • 6
    DisPose：清华北大等多所高校联合推出基于人物图像增强视频生成技术，实现对人物动画的准确控制和一致性
    29
  • 7
    InvSR：开源图像超分辨率生成模型，提升分辨率，修复老旧照片为超清图像
    26
  • 8
    Univer：开源全栈 AI 办公工具，支持 Word、Excel、PPT 等文档处理和多人实时协作
    24
  • 9
    《人工智能：驱散新材料数据噪声与填补缺失值的曙光》
    20
  • 10
    《人工智能：解锁新材料最佳掺杂元素及比例的密码》
    14

    • 相关课程

    更多
  • 如何使用Kubernetes监控定位慢调用

    • 相关电子书

    更多
  • 动态、高效，蚂蚁动态卡片的内核逻辑
  • 4个迭代，从批量交...1573957773.pdf
  • 《开放搜索查询分析服务架构分享》

    • 相关实验场景

    更多
  • 使用交互方式实现数据查询、插入、修改和删除操作
  • 使用Count功能批量创建资源
  • ROS模板参数动态展示
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS