你的位置:首页 > 网页设计

[网页设计]webix datatable 列头加tooltip


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 个字-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------