通用滚动 #
例如你的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
});