需求1 在table中,如果表格資訊過長,顯示不美觀.這時就需要讓超出的部分省略號顯示

需求2 滑鼠移入,顯示完整省略的資訊

問題 - 1,bootstrap 表格寬度是有內容撐開的
- 2 , 表格資訊是動態載入的,如何獲得每一個單元格的內容
程式碼

// commom css中設定
.table{
   table-layout: fixed;
   word-break:break-all;
}
td{
   overflow: hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
} 

function
 
 tableOnload(){
    $('table').on('post-header.bs.table',function() {
        // console.log('載入完成')
        $("td").on("mouseenter",function() {
            if (this.offsetWidth < this.scrollWidth) {
                var that = this;
                var text = $(this).text();
                layer.
 
tips(text, that,{
                    tips: [3, '#428bca'],
                    time: 2000,
                    maxWidth: '300px'
                });
            }
        });
})

麻煩的一點是,需要手動分配每一個表格佔的寬,目前還沒找到更合適的方法.有更省事的方法,歡迎交流

columns: [
                            {field: 'xxxName', title: 'x'x名稱', align: '
 
center', valign: 'middle',width:20},
                            {field: 'xxxName', title: 'x'x名稱', align: 'center', valign: 'middle',width:20},
                            {field: 'xxxName', title: 'x'x名稱', align: 'center', valign: 'middle',width:20},
                            {field: 'xxxName', title: 'x'x名稱', align: 'center', valign: 'middle',width:20},
                            {field: 'xxxName', title: 'x'x名稱', align: 'center', valign: 'middle',width:20}
                 ]
                 // 按百分比分配表格的寬度