zoukankan      html  css  js  c++  java
  • layui 表格toolTip

    ## 表格鼠标移入弹出显示
    
    ##### 使用方法
    
    1、在layui 的table中的cols使用templet并在templet中使用tooltip包裹实际的内容
    
    ```
    {field: 'startTime', align:'left',title: '发起时间','12%',templet:function(d){
        return '<tooltip>' + createTime(d.startTime) + '</tooltip>'
    }}
    ```
    
    2、在table.render的down中添加renderTooltip()方法
    
    ```
    // 渲染表格
        var tableResult = table.render({
            elem: '#' + orderProperty.tableId,
            url: ,
            method:'POST',
            contentType: 'application/json',
            //toolbar: '#toolbar', 
            where:{
                param:{
                    flowType:flowType,
                    workcardType:workcardType,
                    workcardTypes:workcardTypes
                }
            },
            defaultToolbar: false,
            request: {
                pageName: 'pageNum', //页码的参数名称,默认:page
                limitName: 'pageSize' //每页数据量的参数名,默认:limit
               },
            parseData: function(res){ //res 即为原始返回的数据
                if(res.code == 200) res.code = 0;
                return {
                  "code": res.code, //解析接口状态
                  "msg":  res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.list //解析数据列表
                };
            },
            page: true,
    //        height: tableHeight,
            cellMinWidth: 100,
            cols: orderProperty.initColumn(),
            done: function (res, curr, count) {
    //            $('tr > td').css({'height':'95px'});
    //            $('.layui-table-page').css({'border-width':'0px'});
                $('.layui-table-page').attr("align","right");
                console.info("============activiti/queryMyWorkFlowLists========done========");
                renderTooltip()
            }
        });
    ```
    
    ##### 页面取消原生展开
    
    css中加入
    
    ```
    [lay-id="orderTable"] .layui-table-grid-down{
        display: none
    }
    ```
    
    其中orderTable为表格id
    
    ##### 生成代码
    
    位于js/utils.js中
    
    ```
    function renderTooltip(){
        var tooltip 
        $("tooltip").each(function(index,element){
            var parent = element.parentElement
            element.onmouseenter = function(){
                if(parent.offsetWidth - 30 < element.offsetWidth){
                    tooltip = layer.open({
                        type: 4,
                        content: [element.innerText, element], //数组第二项即吸附元素选择器或者DOM
                        shade: 0,
                        tips: 1
                      });
                }
            }
            parent.onmouseleave = function(){
                layer.close(tooltip);
            }
         });
    }
    ```
  • 相关阅读:
    使用ZeroMQ(clrzmq)实现异步通信
    WCF扩展之实现ZeroMQ绑定和protocolBuffer消息编码(一)概要设计
    .net 数据缓存(二)之Redis部署
    .net 数据缓存(一)之介绍
    如果css足够强大了,你还会用编程的方式实现去实现css已有的功能吗?
    我想做一个合格的工程师
    当新手使用JS库遇到问题怎么办
    JS(JavaScript)脚本库的积累
    ASP.NET MVC 必备开发环境
    z-albert之开启博文之路
  • 原文地址:https://www.cnblogs.com/zkx4213/p/14604830.html
Copyright © 2011-2022 走看看