bootstrap当鼠标停留时显示全部名称

谁践踏了优雅 2023-06-12 08:41 16阅读 0赞

/**字符串过长 转化为 。。。**/
    table{
       width:100px;
       table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
    }
    td{
       width:100%;
       word-break:keep-all;/* 不换行 */
       white-space:nowrap;/* 不换行 */
       overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
       text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
    }

dataTabl = $('#dataTable').bootstrapTable({
        url: '${base}/weipu/presale/shopPriceStock/ajax?t='+Math.random(),
        toolbar: '#toolbar', //工具按钮用哪个容器
        striped: true, //是否显示行间隔色
        cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true, //是否显示分页（*）
        contentType: "application/x-www-form-urlencoded",
        sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
        totalRows: 0,
        pageNumber: 1,
        pageList: [10, 25, 50, 100],
        smartDisplay: false,//智能显示分页按钮
        paginationPreText: "上一页",
        paginationNextText: "下一页",
        showRefresh: true, //是否显示刷新按钮
        minimumCountColumns: 2, //最少允许的列数
        clickToSelect: true, //是否启用点击选中行
        showToggle: true, //是否显示详细视图和列表视图的切换按钮
       cardView: false, //是否显示详细视图
       sortable: true, //是否启用排序
       sortName : 'createDate',
       sortOrder : 'desc',
       onLoadSuccess:function(){
          //鼠标悬停显示全部内容~
          $('.bootstrap-table tr td').each(function () {
             $(this).attr("title", $(this).text());
             $(this).css("cursor", 'pointer');
          });
       },
        columns: [
           {field:"check",checkbox: true,title:"选择",class:"tablebody",align:"center",valign:"middle"
           },
           {
            field: 'id',
            title: '系统编号',
            visible: false
           },
          
           { 
            field: 'goodsName', 
            title: '商品名'
           }
          },
       ]
    });