当前位置 : 主页 > 网络编程 > JavaScript >

bootstrap表格内容过长成省略号,鼠标悬停表格显示全部内容

来源:互联网 收集:自由互联 发布时间:2021-06-28
bootstrap表格内容过长成省略号 /**字符串过长 转化为 。。。**/table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */}td{ width:100%; word-break:keep
bootstrap表格内容过长成省略号
/**字符串过长 转化为 。。。**/
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;一起使用*/
    -o-text-overflow:ellipsis;
    -icab-text-overflow: ellipsis;
    -khtml-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
}
鼠标悬停表格显示全部内容
var defaults = {
        url: '',
        dataField: "rows",
        method: 'post',
        dataType: 'json',
        selectItemName: 'id',
        clickToSelect: true,
        pagination: false,
        smartDisplay: false,
        sidePagination: 'server',
        queryParamsType : null,
        columns: [],
        onLoadSuccess:function(){
            //鼠标悬停显示全部内容~
            $('.bootstrap-table tr td').each(function () {
                $(this).attr("title", $(this).text());
                $(this).css("cursor", 'pointer');
            });
        }
        // clickToSelect:false,//点击不选中~
    }
    var option = $.extend({}, defaults, opt);
    $(this).bootstrapTable(option);
网友评论