webix datatable 列头加tooltip

最新推荐文章于 2020-06-16 14:41:13 发布

ancuosu0220

最新推荐文章于 2020-06-16 14:41:13 发布

阅读量202

点赞数

文章标签： ui javascript json ViewUI

原文链接：http://www.cnblogs.com/lijinxin/p/6068226.html

版权

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

转载于:https://www.cnblogs.com/lijinxin/p/6068226.html

ancuosu0220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webix datatable 列头加tooltip

webix的表格，头部没有tooltip的属性支持 onmousemove只监听了数据部分，对列头没有监听。官网上演示的是在header属性上写个span 加个title的属性，但是样式不好看。然后我就直接参照写了个。用的是监听加载完成后的事件。用于加载后确定列的情况。1、效果如下代码如下，拷贝到html文件下直接执行科看到效果<!DOCTYPE html...
复制链接

扫一扫