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

    [ABI 5.1] 固定表头不滚动的脚本

    复制链接 | 收藏本帖
    15923
    8

    tyy__think 小试身手Lv3

    发表于2020-11-13 11:03

    悬赏10

    已解决

    楼主
    请问有固定表头不滚动，表格内容循环滚动的脚本吗

    最佳答案

    xxxl

    发表于2020-11-13 11:03

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    可以试下这个脚本
    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.         scrollElem.lastt = scrollElem.scrollTop;
    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.   
    37.             if (preTop == scrollElem.scrollTop) {
    38.                                 //console.log("preTop =" + preTop);
    39.                // scrollElem.scrollTop = freshScrollHeight + 2;
    40.               //  scrollElem.scrollTop += 1;
    41.        scrollElem.scrollTop =0;
    42.             }
    43.         }
    44.         setTimeout(scrollUp, 50);
    45.     };
    46.     var restartScroll = function () {
    47.         scrollElem.scrollTop = 0;
    48.         setTimeout(scrollUp, 50);
    49.     };

    51.     jQuery(tableDom).hover(function () {
    52.         stopscroll = true;
    53.     }, function () {
    54.         stopscroll = false;
    55.     });
    56.    setTimeout(restartScroll, 2000);
    57. }
    58. /*
    59. *复制表格每行内容
    60. */
    61. function copyTableRows(tableDom) {
    62.     var tBody = tableDom.firstElementChild.children[1];
    63.    //额外的增加一个标题行
    64.    //生成一个标题行放在tableDom平级上
    65.     titleTable(tableDom);
    66.    //复制多余的行
    67.     var rowList = tBody.children;
    68.     var rowLength = rowList.length;
    69.     for(var i=0 ; i<rowLength ; i++){
    70.         var trow = rowList[i];
    71.         var newTR = tBody.insertRow(rowLength+i);
    72.                 newTR.style.height = trow.style.height;
    73.                 copyRowCells(trow , newTR);
    74.     }
    75. }

    77. function titleTable(tableDom){
    78.    var div = document.createElement("div");
    79.    div.style.cssText=tableDom.style.cssText;
    80.    div.style.overflow = 'hidden';
    81.    var temptable = tableDom.firstElementChild.cloneNode(true);
    82.    var tBody = temptable.children[1];
    83.     var rowList = tBody.children;
    84.     var rowLength = rowList.length;
    85.     for(var i=rowLength-1 ; i>1; i--){
    86.         var trow = rowList[i];
    87.         tBody.removeChild(trow);
    88.     }
    89.    
    90.     temptable.style.cssText+=";position:absolute;top:0px;";
    91.     temptable.id=tableDom.id;
    92.      div.appendChild(temptable);
    93.     tableDom.parentElement.appendChild(div);
    94.     tableDom.parentElement.style.overflow="hidden";
    95.    var spans = $(tBody.children[1]).find("span");
    96.      tBody.children[1].style.height="0px";
    97.    for(var i = 0,cnt = spans.length;i<cnt;i++){
    98.                  spans[i].innerText="";
    99.    }
    100.     //获取标题行的高度
    101.     var h = tBody.rows[0].offsetHeight;
    102.     titleheight = h;
    103.     tableDom.style.cssText+=";top:"+h+"px;position:relative;";
    104.     //删除标题行
    105.     var tsrcBody = tableDom.children[0].children[1];
    106.     var rowListsrc= tsrcBody.children;
    107.     tsrcBody .removeChild(rowListsrc[0]);
    108.    //重新调整div高度
    109.    div.style.height=titleheight+1+"px"; //1为边框的高度
    110.      
    111. }
    112. /*
    113. *复制每行的列内容
    114. */
    115. function copyRowCells(trow , newTR) {
    116.     var cellList = trow.children;
    117.     var cellLength = cellList.length;
    118.     var cellHtml = "";
    119.     for(var i=0 ; i<cellLength ; i++){
    120.     var cell = cellList[i];
    121.         cellHtml += cell.outerHTML;
    122.     }
    123.     newTR.innerHTML = cellHtml;
    124. }
    125. //复制表格行内容
    126. var griddom = document.getElementById('GRID1');
    127. var titleheight;
    128. //由于客户端脚本是复制的表格，所以选中效果应该是不正确的，表格组件已经生成了，绑定也生成了，故这里只能去掉选中效果
    129. g_rptpage.getGridById("GRID1").setEnabled(false);
    130. var srccontainerheight = document.getElementById("HHH2").clientHeight;
    131. var girdheight =griddom.clientHeight;
    132. if(girdheight>srccontainerheight){
    133.       copyTableRows(griddom);
    134.      autoScrollTable(griddom,document.getElementById("HHH2").clientHeight-titleheight);
    135. }
    复制代码
    这里有一个报表样例 表头固定的表格轮播.rar (3.41 KB, 下载次数: ) ，解压后直接在这里装入就行

    QQ空间 微信
    8个回答

    只看楼主

    xxxl 数据领袖Lv6

    发表于2020-11-13 11:03

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    沙发

    可以试下这个脚本

    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.         scrollElem.lastt = scrollElem.scrollTop;
    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.   
    37.             if (preTop == scrollElem.scrollTop) {
    38.                                 //console.log("preTop =" + preTop);
    39.                // scrollElem.scrollTop = freshScrollHeight + 2;
    40.               //  scrollElem.scrollTop += 1;
    41.        scrollElem.scrollTop =0;
    42.             }
    43.         }
    44.         setTimeout(scrollUp, 50);
    45.     };
    46.     var restartScroll = function () {
    47.         scrollElem.scrollTop = 0;
    48.         setTimeout(scrollUp, 50);
    49.     };

    51.     jQuery(tableDom).hover(function () {
    52.         stopscroll = true;
    53.     }, function () {
    54.         stopscroll = false;
    55.     });
    56.    setTimeout(restartScroll, 2000);
    57. }
    58. /*
    59. *复制表格每行内容
    60. */
    61. function copyTableRows(tableDom) {
    62.     var tBody = tableDom.firstElementChild.children[1];
    63.    //额外的增加一个标题行
    64.    //生成一个标题行放在tableDom平级上
    65.     titleTable(tableDom);
    66.    //复制多余的行
    67.     var rowList = tBody.children;
    68.     var rowLength = rowList.length;
    69.     for(var i=0 ; i<rowLength ; i++){
    70.         var trow = rowList[i];
    71.         var newTR = tBody.insertRow(rowLength+i);
    72.                 newTR.style.height = trow.style.height;
    73.                 copyRowCells(trow , newTR);
    74.     }
    75. }

    77. function titleTable(tableDom){
    78.    var div = document.createElement("div");
    79.    div.style.cssText=tableDom.style.cssText;
    80.    div.style.overflow = 'hidden';
    81.    var temptable = tableDom.firstElementChild.cloneNode(true);
    82.    var tBody = temptable.children[1];
    83.     var rowList = tBody.children;
    84.     var rowLength = rowList.length;
    85.     for(var i=rowLength-1 ; i>1; i--){
    86.         var trow = rowList[i];
    87.         tBody.removeChild(trow);
    88.     }
    89.    
    90.     temptable.style.cssText+=";position:absolute;top:0px;";
    91.     temptable.id=tableDom.id;
    92.      div.appendChild(temptable);
    93.     tableDom.parentElement.appendChild(div);
    94.     tableDom.parentElement.style.overflow="hidden";
    95.    var spans = $(tBody.children[1]).find("span");
    96.      tBody.children[1].style.height="0px";
    97.    for(var i = 0,cnt = spans.length;i<cnt;i++){
    98.                  spans[i].innerText="";
    99.    }
    100.     //获取标题行的高度
    101.     var h = tBody.rows[0].offsetHeight;
    102.     titleheight = h;
    103.     tableDom.style.cssText+=";top:"+h+"px;position:relative;";
    104.     //删除标题行
    105.     var tsrcBody = tableDom.children[0].children[1];
    106.     var rowListsrc= tsrcBody.children;
    107.     tsrcBody .removeChild(rowListsrc[0]);
    108.    //重新调整div高度
    109.    div.style.height=titleheight+1+"px"; //1为边框的高度
    110.      
    111. }
    112. /*
    113. *复制每行的列内容
    114. */
    115. function copyRowCells(trow , newTR) {
    116.     var cellList = trow.children;
    117.     var cellLength = cellList.length;
    118.     var cellHtml = "";
    119.     for(var i=0 ; i<cellLength ; i++){
    120.     var cell = cellList[i];
    121.         cellHtml += cell.outerHTML;
    122.     }
    123.     newTR.innerHTML = cellHtml;
    124. }
    125. //复制表格行内容
    126. var griddom = document.getElementById('GRID1');
    127. var titleheight;
    128. //由于客户端脚本是复制的表格，所以选中效果应该是不正确的，表格组件已经生成了，绑定也生成了，故这里只能去掉选中效果
    129. g_rptpage.getGridById("GRID1").setEnabled(false);
    130. var srccontainerheight = document.getElementById("HHH2").clientHeight;
    131. var girdheight =griddom.clientHeight;
    132. if(girdheight>srccontainerheight){
    133.       copyTableRows(griddom);
    134.      autoScrollTable(griddom,document.getElementById("HHH2").clientHeight-titleheight);
    135. }
    复制代码
    这里有一个报表样例 表头固定的表格轮播.rar (3.41 KB, 下载次数: ) ，解压后直接在这里装入就行

    回复

    tyy__think 小试身手Lv3

    发表于2020-11-13 11:10

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    板凳

    xxxl 发表于 2020-11-13 11:08
    可以试下这个脚本
    这里有一个报表样例，解压后直接在这里装入就行

    好的 我试试 非常感谢

    回复

    xxxl 数据领袖Lv6

    发表于2020-11-13 11:12

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    地板

    tyy__think 发表于 2020-11-13 11:10
    好的 我试试 非常感谢

    嗯嗯 不客气

    回复

    tyy__think 小试身手Lv3

    发表于2020-11-13 11:24

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    5#

    xxxl 发表于 2020-11-13 11:12
    嗯嗯 不客气

    请问这个脚本设置了按照高度滚动吗，不知道是不是因为数据比较少的问题，没有滚动效果呢，请问在哪里控制展示高度的呢

    回复

    xxxl 数据领袖Lv6

    发表于2020-11-13 11:29

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    6#

    tyy__think 发表于 2020-11-13 11:24
    请问这个脚本设置了按照高度滚动吗，不知道是不是因为数据比较少的问题，没有滚动效果呢，请问在哪里控制 ...

    将表格外的容器调小一点就行了吧

    回复

    tyy__think 小试身手Lv3

    发表于2020-11-13 11:44

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    7#

    xxxl 发表于 2020-11-13 11:29
    将表格外的容器调小一点就行了吧

    我想了一下，要是数据是浮动的，那样式改变了，你知道在脚本语言里面直接调整样式该怎么做吗？就是这种斑纹，我看也没法直接写表格的css代码



    回复

    xxxl 数据领袖Lv6

    发表于2020-11-13 11:49

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    8#

    本帖最后由 xxxl 于 2020-11-13 11:54 编辑

    tyy__think 发表于 2020-11-13 11:44
    我想了一下，要是数据是浮动的，那样式改变了，你知道在脚本语言里面直接调整样式该怎么做吗？就是这种斑 ...

    哦哦 我知道了 您这里是固定表元对吧，然后滚动的效果不行要改成浮动表但是还需要表格背景颜色根据奇偶行相异。浮动块的奇偶行颜色不同可以在这里设置if(mod(self.index,2)=0,"#bb2ef1","#f0f0f0")

    参考这个帖子https://bbs.esensoft.com/thread-137256-1-1.html

    回复

    tyy__think 小试身手Lv3

    发表于2020-11-13 12:16

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    9#

    xxxl 发表于 2020-11-13 11:49
    哦哦 我知道了 您这里是固定表元对吧，然后滚动的效果不行要改成浮动表但是还需要表格背景颜色根据奇偶行 ...

    好的 非常感谢 已经解决了

    回复

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

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

    小时

    全天响应

    分钟

    快速处理问题

    工程师强势助力

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

    400咨询：400-0011-866

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

    产品建议邮箱yixin@esensoft.com

    关注我们

    扫TA学习更多干货

    一对一专家交流

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