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

    [ABI 5.1] 表格滚动

    复制链接 | 收藏本帖
    12230
    4

    changmingming 初学数据Lv2

    发表于2021-1-19 14:16

    悬赏1

    已解决

    楼主
    ABI产品 的 分析区表格， 浮动维 类型的，怎么实现 数据滚动，且没有滚动条，也可以控制滚动的速度

    最近看过此主题的会员

    esen_5J3HPAXDRS

    esen_5IQ8U2IGSW

    jiangqiao

    shujm

    esen_4TU4L1BV1N

    xyr

    fredfei

    esen_51JBYX12HL

    esen_54D7NRP5OOAT

    esen_54OBLDW4NX

    esen_55I6HYQMKG

    esen_4XL2IVJCG8

    刘玉胜

    linuo

    15521158376

    最佳答案

    xxxl

    发表于2021-1-19 14:16

    丨

    只看该作者

    丨

    取消 关注该作者的回复

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

    复制代码
    这里提供一个表样，解压后这里装入 轮换组件内表格轮播.rar (3.17 KB, 下载次数: )


    QQ空间 微信
    4个回答

    只看楼主

    xxxl 数据领袖Lv6

    发表于2021-1-19 14:16

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    沙发

    有容器内的表格自动轮播的脚本

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

    复制代码
    这里提供一个表样，解压后这里装入 轮换组件内表格轮播.rar (3.17 KB, 下载次数: )


    回复

    changmingming 初学数据Lv2

    发表于2021-1-19 14:56

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    板凳

    脚本写到哪里啊~~没找到

    回复

    xxxl 数据领袖Lv6

    发表于2021-1-19 15:14

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    地板

    changmingming 发表于 2021-1-19 14:56
    脚本写到哪里啊~~没找到sweat.gif

    这里写

    回复

    abi_hl 数据小白Lv1

    发表于2021-3-24 08:48

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    5#

    老师厉害

    回复

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

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

    小时

    全天响应

    分钟

    快速处理问题

    工程师强势助力

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

    400咨询：400-0011-866

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

    产品建议邮箱yixin@esensoft.com

    关注我们

    扫TA学习更多干货

    一对一专家交流

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