bootStrap Table 鼠標懸浮顯示詳細信息

bootStrap Table 鼠標懸浮顯示詳細信息

• bootStrap Table 單元格內容較多時，顯示會不完整 如下圖：
  

---

• 故有鼠標懸浮顯示詳細內容的需求
• 難點：bootStrap Table 被封裝不好修改樣式 寫鼠標懸浮事件 離開事件太麻煩了
• 要求的效果如下：
  

---

直接上代碼：

	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拉