无缝滚动

通用滚动 #

例如你的html如下

<div id="smtid" style="height:100%">
    <ul>
        <li>smartchart</li>
        <li>bigdata</li>
        <li>echarts</li>
        <li>make it great</li>
    </ul>
</div>

你只需要在图形中使用以下函数, 即可实现在无缝滚动

//smtid是滚动容器的ID
ds_liMarquee('#smtid')
//如果 class="smtclass", 那么也可以使用类选择器
ds_liMarquee('.smtclass')

我们也可以使用更多的配置方法

 marconfig={
    playtime: 3000, //滚动3秒
    pausetime: 3000, //停3秒
    config:{
        direction: 'up',//向上滚动
        runshort: false,//内容不足时不滚动
        scrollamount: 20//速度
    }
 }
//传入自定义配置 
ds_liMarquee('#smtid', marconfig)

更多config说明:

名称 类型 默认值 说明
direction 字符串 left 滚动方向，可选 left / right / up / down
loop 整数 -1 循环次数，-1 为无限循环
scrolldelay 整数 0 每次重复之前的延迟
scrollamount 整数 50 滚动速度，越大越快
circular 布尔值 true 无缝滚动，如果为 false，则和 marquee 效果一样
drag 布尔值 true 鼠标可拖动
runshort 布尔值 true 内容不足是否滚动
hoverstop 布尔值 true 鼠标悬停暂停
xml 布尔值 false 加载xml 文件
inverthover 布尔值 false 反向，即默认不滚动，鼠标悬停滚动

内置滚动表格 #

smartchart内置了滚动表格, 可以一键生成

样式自定义 #

如需修改表格的样式, 如字体,颜色等, 可以在模板中重定义样式 具体样式写法, 参考 样式快速入门

/*表头样式*/
.smtlisthead{
    background: #fff2cc;
    color: red;
    height: 5rem;
}

.smtlisthead span{
    height: 5rem;
}

/*表格本体样式*/
.smtlistnav{
    height: calc(100% - 5rem);
    color: red;
    overflow: auto;
}

.smtlistnav li span{
    height: 3rem;
}

/*修改奇数行背景,偶数行将odd改为even*/
.smtlistnav ul li:nth-child(odd){ background: rgba(100,100,100,.1);}

指定某单元格宽度对齐 # 

<span>
  <span style="width:32rem;height:100%;flex-shrink:0;justify-content:left"><span>
</span>

单元格点击响应 # 

let lastClickDom;
let lastDomColor;
$('#smtlist__name__ li').unbind('click').click(function(params){
    try{lastClickDom.css('background', lastDomColor)}catch{}
    lastDomColor = $(this).css('background');
    $(this).css('background', 'yellow');
    lastClickDom = $(this);
    let myparam = $(this).children('span').eq(0).text(); //获取点击的参数
    //以下加入你的action
    
});

此方法也适应于常规表格,如可改写

$('#container___name__ tr').unbind('click').click(function(params){
    try{lastClickDom.css('background', lastDomColor)}catch{}
    lastDomColor = $(this).css('background');
    $(this).css('background', 'yellow');
    lastClickDom = $(this);
    let myparam = $(this).children('td').eq(0).text(); //获取点击的参数
    //以下加入你的action
    
});
Edit Edit this page