webix的表格，頭部沒有tooltip的屬性支持 onmousemove只監聽了數據部分，對列頭沒有監聽。官網上演示的是在header屬性上寫個span 加個title的屬性，但是樣式不好看。然後我就直接參照寫了個。用的是監聽載入完成後的事件。用於載入後確定列的情況。 1、效果如下 代碼如下，拷貝 ...
webix的表格，頭部沒有tooltip的屬性支持 onmousemove只監聽了數據部分，對列頭沒有監聽。官網上演示的是在header屬性上寫個span 加個title的屬性，但是樣式不好看。然後我就直接參照寫了個。用的是監聽載入完成後的事件。用於載入後確定列的情況。
1、效果如下
代碼如下，拷貝到html文件下直接執行科看到效果
<!DOCTYPE html> <html> <head> <title> Loading data in the 'select' editor</title> <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css" media="screen" charset="utf-8"> <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript" charset="utf-8"></script> </head> <body> <script type="text/javascript" charset="utf-8"> webix.ready(function () { webix.ui({ view: "datatable", on: { onAfterRender: function () { var columns = this.config.columns; for (var i = 0; i < columns.length; i++) { var t = webix.ui({ view: "tooltip", template: "#value#", height: 100 }) this.getHeaderNode(columns[i].id).addEventListener('mousemove', function (e) { t.hide(); clearTimeout(this.timeout); t.value = this.firstChild.textContent; this.timeout = setTimeout(function (value) { t.show({value: t.value}, {x: e.clientX + 3, y: e.clientY}) }, 500); }); this.getHeaderNode(columns[i].id).addEventListener('mouseout', function (e) { clearTimeout(this.timeout); t.hide(); }) } } }, tooltip: true, type: "editIcon", columns: [ {id: "rank", editor: "text", header: "", css: "rank", width: 50}, {id: "title", editor: "text", header: "Film title ++++++++++++++", width: 80}, { id: "cat_id", editor: "select", options: "data/options.json", header: "Category", width: 110 }, {id: "votes", editor: "text", header: "Votes", width: 100} ], data: [ {id: 1, title: "The Shawshank Redemption", cat_id: "1", votes: 678790, rating: 9.2, rank: 1}, {id: 2, title: "The Godfather", cat_id: "2", votes: 511495, rating: 9.2, rank: 2} ] }); }); </script> </body> </html>
紅色部分為列頭tooltip的代碼
湊150 個字-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
