登录/注册
    我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-问题求助 › 实现报表表格滚动

    [ABI 5.1] 实现报表表格滚动

    复制链接 | 收藏本帖
    11664
    8

    tyy__think 小试身手Lv3

    发表于2020-11-12 14:55

    悬赏1

    已解决

    楼主
    本帖最后由 tyy__think 于 2020-11-12 15:00 编辑

    请问报表设计页面能否实现列表内容自循环滚动呢？

    最近看过此主题的会员

    esen_4TU4L1BV1N

    fredfei

    xyr

    chenzy

    pandabuxizao

    esen_4XL2IVJCG8

    esen_55I6HYQMKG

    双眼皮爆炸熊

    esen_3H03HK78MGNH

    esen_50EOT2L3A3

    esen_50RKP6LVCNHQ

    最佳答案

    xxxl

    发表于2020-11-12 14:55

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    将需要滚动的表格放在容器中然后再客户端脚本中写以下代码


    2. /***
    3. **表格内容自动轮播脚本
    4. **@param tableDom内容滚动的表格，最好是表格的父DIV
    5. **@param visibleHeight 可视区的高度
    6. ***/
    7. function autoScrollTable(tableDom, visibleHeight) {
    8.     var marqueesHeight = visibleHeight;
    9.     var stopscroll = false;
    10.     var scrollElem = tableDom;
    11.         var freshScrollHeight = tableDom.firstElementChild.offsetHeight/4;
    12.     var preTop = 0;
    13.     var currentTop = 0;
    14.     var stoptime = 0;
    15.     with (scrollElem) {
    16.         style.height = parseFloat(marqueesHeight) + "px";
    17.         style.overflow = 'hidden';
    18.         noWrap = true;
    19.     }
    20.     var scrollUp = function () {
    21.         if (stopscroll) {
    22.             setTimeout(scrollUp, 50);
    23.             return;
    24.         }
    25.         currentTop += 1;
    26.         if (currentTop == (marqueesHeight + 1)) {
    27.             stoptime += 1;
    28.             currentTop -= 1;
    29.             if (stoptime == 1) {
    30.                 currentTop = 0;
    31.                 stoptime = 0;
    32.             }
    33.         } else {
    34.             preTop = scrollElem.scrollTop;
    35.             scrollElem.scrollTop += 1;
    36.             if (preTop == scrollElem.scrollTop) {
    37.                                 //console.log("preTop =" + preTop);
    38.                 scrollElem.scrollTop = freshScrollHeight + 2;
    39.                 scrollElem.scrollTop += 1;
    40.             }
    41.         }
    42.         setTimeout(scrollUp, 5);//控制速度 越大越慢
    43.     };
    44.     var restartScroll = function () {
    45.         scrollElem.scrollTop = 0;
    46.         setTimeout(scrollUp, 50);
    47.     };
    48.     jQuery(tableDom).hover(function () {
    49.         stopscroll = true;
    50.     }, function () {
    51.         stopscroll = false;
    52.     });
    53.     //控制开始是否延迟
    54. setTimeout(restartScroll, 0);
    55. }
    56. /*
    57. *复制表格每行内容
    58. */
    59. function copyTableRows(tableDom) {
    60.     var tBody = tableDom.firstElementChild.children[1];
    61.         var rowList = tBody.children;
    62.     var rowLength = rowList.length;
    63.     for(var i=0 ; i<rowLength ; i++){
    64.         var trow = rowList[i];
    65.         var newTR = tBody.insertRow(rowLength+i);
    66.                 newTR.style.height = trow.style.height;
    67.                 copyRowCells(trow , newTR);
    68.     }
    69. }
    70. /*
    71. *复制每行的列内容
    72. */
    73. function copyRowCells(trow , newTR) {
    74.     var cellList = trow.children;
    75.     var cellLength = cellList.length;
    76.     var cellHtml = "";
    77.     for(var i=0 ; i<cellLength ; i++){
    78.     var cell = cellList[i];
    79.         cellHtml += cell.outerHTML;
    80.     }
    81.     newTR.innerHTML = cellHtml;
    82. }
    83. //复制表格行内容
    84. copyTableRows(document.getElementById('GRID1'));//GRID1为表格代号
    85. autoScrollTable(document.getElementById('GRID1'),document.getElementById("HHH2").clientHeight);//HHH2为表格所在容器代号
    复制代码



    QQ空间 微信
    8个回答

    只看楼主

    xxxl 数据领袖Lv6

    发表于2020-11-12 14:55

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    沙发

    将需要滚动的表格放在容器中然后再客户端脚本中写以下代码



    2. /***
    3. **表格内容自动轮播脚本
    4. **@param tableDom内容滚动的表格，最好是表格的父DIV
    5. **@param visibleHeight 可视区的高度
    6. ***/
    7. function autoScrollTable(tableDom, visibleHeight) {
    8.     var marqueesHeight = visibleHeight;
    9.     var stopscroll = false;
    10.     var scrollElem = tableDom;
    11.         var freshScrollHeight = tableDom.firstElementChild.offsetHeight/4;
    12.     var preTop = 0;
    13.     var currentTop = 0;
    14.     var stoptime = 0;
    15.     with (scrollElem) {
    16.         style.height = parseFloat(marqueesHeight) + "px";
    17.         style.overflow = 'hidden';
    18.         noWrap = true;
    19.     }
    20.     var scrollUp = function () {
    21.         if (stopscroll) {
    22.             setTimeout(scrollUp, 50);
    23.             return;
    24.         }
    25.         currentTop += 1;
    26.         if (currentTop == (marqueesHeight + 1)) {
    27.             stoptime += 1;
    28.             currentTop -= 1;
    29.             if (stoptime == 1) {
    30.                 currentTop = 0;
    31.                 stoptime = 0;
    32.             }
    33.         } else {
    34.             preTop = scrollElem.scrollTop;
    35.             scrollElem.scrollTop += 1;
    36.             if (preTop == scrollElem.scrollTop) {
    37.                                 //console.log("preTop =" + preTop);
    38.                 scrollElem.scrollTop = freshScrollHeight + 2;
    39.                 scrollElem.scrollTop += 1;
    40.             }
    41.         }
    42.         setTimeout(scrollUp, 5);//控制速度 越大越慢
    43.     };
    44.     var restartScroll = function () {
    45.         scrollElem.scrollTop = 0;
    46.         setTimeout(scrollUp, 50);
    47.     };
    48.     jQuery(tableDom).hover(function () {
    49.         stopscroll = true;
    50.     }, function () {
    51.         stopscroll = false;
    52.     });
    53.     //控制开始是否延迟
    54. setTimeout(restartScroll, 0);
    55. }
    56. /*
    57. *复制表格每行内容
    58. */
    59. function copyTableRows(tableDom) {
    60.     var tBody = tableDom.firstElementChild.children[1];
    61.         var rowList = tBody.children;
    62.     var rowLength = rowList.length;
    63.     for(var i=0 ; i<rowLength ; i++){
    64.         var trow = rowList[i];
    65.         var newTR = tBody.insertRow(rowLength+i);
    66.                 newTR.style.height = trow.style.height;
    67.                 copyRowCells(trow , newTR);
    68.     }
    69. }
    70. /*
    71. *复制每行的列内容
    72. */
    73. function copyRowCells(trow , newTR) {
    74.     var cellList = trow.children;
    75.     var cellLength = cellList.length;
    76.     var cellHtml = "";
    77.     for(var i=0 ; i<cellLength ; i++){
    78.     var cell = cellList[i];
    79.         cellHtml += cell.outerHTML;
    80.     }
    81.     newTR.innerHTML = cellHtml;
    82. }
    83. //复制表格行内容
    84. copyTableRows(document.getElementById('GRID1'));//GRID1为表格代号
    85. autoScrollTable(document.getElementById('GRID1'),document.getElementById("HHH2").clientHeight);//HHH2为表格所在容器代号
    复制代码



    回复

    tyy__think 小试身手Lv3

    发表于2020-11-12 15:29

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    板凳

    xxxl 发表于 2020-11-12 15:07
    将需要滚动的表格放在容器中然后再客户端脚本中写以下代码

    好的 感谢

    回复

    xxxl 数据领袖Lv6

    发表于2020-11-12 15:35

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    地板

    tyy__think 发表于 2020-11-12 15:29
    好的 感谢

    嗯嗯 不客气

    回复

    tyy__think 小试身手Lv3

    发表于2020-11-13 10:33

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    5#

    xxxl 发表于 2020-11-12 14:55
    将需要滚动的表格放在容器中然后再客户端脚本中写以下代码

    打扰啦，这个表格的滚动有效果了，但是滚动有一点问题呢，这个脚本语言包含表头吗？而且一直滚动不完呢，卡在3这里就一直在跳，我看脚本也看不出到底要改哪里


    回复

    xxxl 数据领袖Lv6

    发表于2020-11-13 10:59

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    6#

    tyy__think 发表于 2020-11-13 10:33
    打扰啦，这个表格的滚动有效果了，但是滚动有一点问题呢，这个脚本语言包含表头吗？而且一直滚动不完呢， ...

    您是要固定表头不滚动吗，重新在一个帖子吧 我再给您找下改成不滚动表头的脚本

    回复

    tyy__think 小试身手Lv3

    发表于2020-11-13 11:00

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    7#

    xxxl 发表于 2020-11-13 10:59
    您是要固定表头不滚动吗，重新在一个帖子吧 我再给您找下改成不滚动表头的脚本 ...

    好的谢谢

    回复

    esen_50RKP6LVCN 数据小白Lv1

    发表于2024-8-20 16:02

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    8#

    滚的很快咋调呢

    回复

    esen_50RKP6LVCN 数据小白Lv1

    发表于2024-8-20 16:15

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    9#

    只能滚一次，刚写代码滚动，后面就不滚动了

    回复

    登录后可回答问题，请登录或注册

    有问题，来提问！
    我要发帖
    热门推荐
    热门视频
    热门产品推荐
    快速回复 返回顶部 返回列表

    小时

    全天响应

    分钟

    快速处理问题

    工程师强势助力

    明星产品
    一站式数据分析平台-亿信ABI
    智能数据治理平台-睿治
    解决方案
    大数据治理方案
    数据标准化及质量管控方案
    主数据管理方案
    数据资产盘点方案
    联系合作

    400咨询：400-0011-866

    技术支持QQ：400-0011-866(工作日9:00-18:00)

    产品建议邮箱yixin@esensoft.com

    关注我们

    扫TA学习更多干货

    一对一专家交流

    版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号