bootStrap Table 鼠标悬浮显示详细信息

古城微笑少年丶 2022-03-20 07:18 1641阅读 0赞

# bootStrap Table 鼠标悬浮显示详细信息 #

*  bootStrap Table 单元格内容较多时，显示会不完整 如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5nZmVuZzE4NQ_size_16_color_FFFFFF_t_70]

--------------------

*  故有鼠标悬浮显示详细内容的需求
 *  难点：bootStrap Table 被封装不好修改样式 写鼠标悬浮事件 离开事件太麻烦了
 *  要求的效果如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5nZmVuZzE4NQ_size_16_color_FFFFFF_t_70 1]

--------------------

直接上代码：

function load(data) { 
        $('#exampleTable')
            .bootstrapTable(
                { 
                    // method : 'get', // 服务器数据的请求方式 get or post
                    // url : prefix + "/list", // 服务器数据的加载地址
                    iconSize: 'outline',
                    toolbar: '#exampleToolbar',
                    striped: true, // 设置为true会有隔行变色效果
                    data: data,
                    dataType: "json", // 服务器返回的数据类型
                    pagination: true, // 设置为true会在底部显示分页条
                    singleSelect: false, // 设置为true将禁止多选
                    pageSize: 4, // 如果设置了分页，每页数据条数
                    pageNumber: 1, // 如果设置了分布，首页页码
                    search: true, // 是否显示搜索框
                    showColumns: false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination: "client", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                    columns: [
                       
                        { 
                            field: 'code',
                            title: '数据项编码',
                            cellStyle:formatTableUnit,
                            formatter:paramsMatter
                        },
                        { 
                            field: 'name',
                            title: '数据项名称',
                            cellStyle:formatTableUnit,
                            formatter:paramsMatter
                        },
                   
                            field: 'descInfo',
                            title: '描述',
                            width: '150px',
                            cellStyle:formatTableUnit,
                            formatter:paramsMatter
                        },
                        { 
                            title: '操作',
                            field: 'fieldId',
                            width: '110px',
                            align: 'center',
                        }]
                });
    };
    
    function paramsMatter(value,row,index) { 
        var span=document.createElement('span');
        span.setAttribute('title',value);
        span.innerHTML = value;
        return span.outerHTML;
    }
    
    function formatTableUnit(value, row, index) { 
        return { 
        css: { 
            "white-space": 'nowrap',
            "text-overflow": 'ellipsis',
            "overflow": 'hidden'
        }
    }
    }

*  O拉

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5nZmVuZzE4NQ_size_16_color_FFFFFF_t_70]: /images/20220320/09737556f15f4e248390a6a3d75a5992.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5nZmVuZzE4NQ_size_16_color_FFFFFF_t_70 1]: /images/20220320/a6680fa008c74c2b85ec5f179282e2a9.png

发表评论取消回复

表情：

评论列表（有 1 条评论，1641人围观）

蒲公英云C7FCFFV铁粉 2022-09-26 08:14

我想请问，怎么展示html结构

相关阅读

相关 table表格信息过长显示省略，悬停显示详细信息；表格添加细边框

一、table表格信息过长显示省略...，悬停显示详细信息需求：表格td宽度设置百分比或者固定宽度，如果内容过长自动截掉并在文本末尾显示...，鼠标移动到文字上面显示全

╰半夏微凉°/ 2024年02月19日 19:21/ 0 赞/ 79 阅读

相关 bootstrap-table 内容超出鼠标悬浮显示全部

[https://www.cnblogs.com/tongsi/p/12703047.html][https_www.cnblogs.com_tongsi_p_12703047

梦里梦外;/ 2023年02月24日 15:29/ 0 赞/ 61 阅读

相关鼠标悬浮导航栏显示下拉菜单

在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。 1、原生js <script> // window.

布满荆棘的人生/ 2022年10月27日 05:24/ 0 赞/ 430 阅读

相关 jquery实现鼠标悬浮显示图片

实现鼠标悬浮显示图片图片跟随鼠标 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

桃扇骨/ 2022年06月04日 05:50/ 0 赞/ 426 阅读

相关 css样式实现td显示字体超长显示...鼠标悬浮显示全部

虽然我的是超链接，字体name 也是动态查询出来的，目的是，如果查询出来的这个字体太长，会影响我的展示效果，所以需要影藏超过固定长度的字体；![2018052420055672

系统管理员/ 2022年05月24日 09:39/ 0 赞/ 573 阅读

相关 html table td 固定长度隐藏文字鼠标进入显示悬浮文字

一.在td的长度范围内要显示大量内容时，为了不破坏布局，只能显示该长度的文字，超过的的文字隐藏。 1.table 表中一定要设置 style="table-la

骑猪看日落/ 2022年04月15日 06:29/ 0 赞/ 973 阅读

相关鼠标悬浮提示

鼠标悬浮提示需求：添加一个帮助悬浮说明 css代码： .question { width: 20px;

短命女/ 2022年03月25日 13:10/ 0 赞/ 382 阅读

相关 bootStrap Table 鼠标悬浮显示详细信息

bootStrap Table 鼠标悬浮显示详细信息 bootStrap Table 单元格内容较多时，显示会不完整如下图： ![在这里插入图片描述]

古城微笑少年丶/ 2022年03月20日 07:18/ 0 赞/ 1642 阅读

相关 ubuntu鼠标悬浮设置

Simulate clicking by hovering You can click or drag simply by hovering your mouse poi

叁歲伎倆/ 2022年02月25日 00:14/ 0 赞/ 589 阅读

相关 vue使用echart 鼠标悬浮时显示的标题

1.首先我们要导入echart ![在这里插入图片描述][20190803162238263.png] 2.绑定js代码 div的id绑定 ![在这里插入图片描述]

心已赠人/ 2021年11月10日 16:58/ 0 赞/ 983 阅读