smartchart多功能表格

发表评论
6696 views

smartchart多功能表格
大家在使用smartchart的过程中, 如果使用图形会非常方便, 因为可以直接使用echarts的配置项, 但是如果使用表格就稍微有些麻烦, 因为echarts没有相关的功能
所以我们会在3.9.9.10的版本中内置多功能表格的实现, 可以实现滚动, 及点击响应效果, 也能够快速生成常规的表格
你需要做的是复制以下代码到图形中, 按要求修改就可以了
let dataset=__dataset__;
let rowhead = dataset[0];
let dataObj = ds_createMap_all(dataset);

let tbstyle = "border: 0.06rem solid #364a5f;"
let tbheadstyle = "position:absolute;width:98%;background-color:black;"
let tbbody = '';

/*
//可选表格的body自定义生成
for(let i=1; i<dataObj.length; i++){
tbbody += `<li>
<div class="tb-baseStyle" name="${rowhead[0]}" style="width: 10rem;">${dataObj[i][rowhead[0]]}</div>
</li>`
}
*/

//字段与div中name属性对应，自行修改
let table = `
        <div class="tb-scroll-sty" id="myscroll__name__" style="${tbstyle}">
        <div class="tb-scroll-head" style="${tbheadstyle}">
            <div class="tb-baseStyle" name="${rowhead[0]}" style="width: 10rem;">${rowhead[0]}</div>
            <div class="tb-baseStyle" name="${rowhead[1]}" style="width: 10rem;">${rowhead[1]}</div>
            <div class="tb-baseStyle" name="${rowhead[2]}">${rowhead[2]}</div>
            <div class="tb-baseStyle" name="${rowhead[3]}" style="width: 10rem;">${rowhead[3]}</div>
        </div>
        <ul class="tb-scroll-body" style="">${tbbody}</ul>
    </div> `;

dom__name__.innerHTML=table;


$('#myscroll__name__').initTable({
    speed:100,  //滚动速度,值越大越慢, null不滚动
    rowHeight:16, //每行的高度
    dataObj: dataObj,//自动生成表格, null不生成
    ClassForEven: 'tb-evenRowStyle', //偶数行样式
    ClassForHover: 'tb-rowhover',  //鼠标放上时样式
    ClassForOdd: null  //奇数行样式
});
$('#myscroll__name__').rowOnclick(function(rowobj){
   //rowobj为所点击行的数据, 格式如 {''name1": "xx",...}
    console.log(rowobj); //响应点击动作
});
当然你也可以使用css来方便的定义表格的样式,新版本中你将可以直接在DIV编辑器修改css, 建意放在第一个数据集的DIV中, 以下为供参考的CSS代码
<style>
.tb-scroll-sty {
    height: 100%;
    margin: 0 auto;
    border: 0.06rem solid #364a5f;
    line-height: 1.8rem;
    font-size: 1rem;
    overflow: hidden;
}
.tb-scroll-sty>ul{
    list-style-type: none;
    margin:0;
    padding:0;
    background-color: #ffffff;
}
.tb-scroll-sty>ul>li{
    color: #393939;
}
.tb-scroll-sty li {
    height: 2.5rem;
}

.tb-scroll-head{
    height:2.5rem;
    background-color: #364a5f;
    color:#FFF;
    font-size: 1.2rem;
    font-weight: 800;
    z-index: 998;
}

.tb-baseStyle{
    display: inline-block;
    text-align: center;
    width:8rem;
    height:3.5rem;
}

.tb-evenRowStyle{
    background-color: yellow;
}

.tb-rowhover{
background-color: #52c1a1;
color: #FFF;
font-weight: bold;
}
</style>