bootstrap table单元格内容超出部分鼠标悬浮提示所有内容

最新推荐文章于 2024-05-21 14:15:14 发布

weixin_42491847

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量1.4k

点赞数

文章标签： bootstrap javascript 前端

本文链接：https://blog.csdn.net/weixin_42491847/article/details/127417583

版权

<body>
    <div class="table-demo">
        <table id="table" class="table table-striped"></table>
    </div>
    <script>
        let data= [              
                {
                "param_name":"0.00%",
                "param_name_full": "Item 3",
                "time_resolution": "2220",
                "data_delay": "222",
                "data": "3333"
                },
                {
                "param_name": "nanddd",
                "param_name_full": "Item 3",
                "time_resolution": "wwsssssssssww",
                "data_delay": "3666663",
                "data": "33rtttttttttttttttttttttttttttttttttttt33"
                },
                {
                "param_name":"0.00%",
                "param_name_full": "Item 3",
                "time_resolution": "222ssssssssssss0",
                "data_delay": "222",
                "data": "3333"
                },
                {
                "param_name": "nanddd",
                "param_name_full": "Itessssssssssssssssssssssssssm 3",
                "time_resolution": "wwww",
                "data_delay": "3666663",
                "data": "33gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg33"
                }]
        //设置需要显示的列
    
        $('#table').bootstrapTable('destroy').bootstrapTable({
            data: data, 
            pagination: true,//开启分页
            striped: true, //是否显示行间隔色
            pageNumber : 1, //初始化加载第一页        
            search:true,          
            height:300, //可以设置滚动条
            pagination : false,//是否分页
            // sidePagination : 'server',//server:服务器端分页|client：前端分页
            pageSize : 5,//单页记录数
            pageList : [5,10,15,20,30],//可选择单页记录数
            showRefresh : true,//刷新按钮
            clickToSelect:true,
            checkBox:true,
            columns: [{
            field: 'param_name',
            title: 'param_name<br /> (参数名称)',                  
        }, {
            field: 'param_name_full',
            title: 'param_name_full<br />',
            cellStyle:formatTableUnit,
            formatter:paramsMatter,              
        }, {
            field: 'time_resolution',
            title: 'time_resolution',
             
        },{
            field: 'data_delay',
            title: 'data_delay)',        
        },
        {
            field: 'data',       
            title: 'data',
            cellStyle:formatTableUnit,
            formatter:paramsMatter,           
        },
    ]    
        });
        function formatTableUnit(value, row, index) {
    return {
            css: {
            "white-space": 'nowrap',
            "text-overflow": 'ellipsis',
            "overflow": 'hidden',
            "max-width":"100px",
            "cursor":"pointer",
            }
        }
    }
   function paramsMatter(value,row,index,field){
       var span=document.createElement('span');
       span.setAttribute('title',value);
       span.innerHTML=value;
       return span.outerHTML;
   }
    </script>
</body>

页面效果：