layui 表格单元格自定义提示框

最新推荐文章于 2024-04-09 11:12:09 发布

曉儂

最新推荐文章于 2024-04-09 11:12:09 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web 文章标签： layui 表格单元格提示框

本文链接：https://blog.youkuaiyun.com/qq_24313643/article/details/93209276

web 专栏收录该内容

41 篇文章

订阅专栏

博客提及在layui表格单元格提示框实现中，需在css文件中添加相关内容，同时涉及js方面。围绕layui表格单元格提示框，从前端技术角度给出了实现的关键方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cols: [[ //表头
                    {
                       	field: 'Content', 
                       	title: '承诺内容',
                       	templet: '#ContentTipl',
                    },
                   ]]

css 文件中加

.layui-layer-tips {
		        word-break: break-all;
		    }

<script type="text/javascript">
//显示详情
	function show_shopm(t){
		var row=$(t).attr('data-d'); //获取显示内容
		//小tips
		layer.tips(row,t,{
			area: 'auto',
			tips:[1,'#3595CC'],
			time:4000
		})
	}
</script>


<script type="text/html" id="ContentTipl">
	{{# 
        var delhtml = function(str) {
              return str.replace(/<[^>].*?>/g, '');
				
          } 
   }}
  <a href="javascript:;" data-d="{{delhtml(d.Content)}}" onmouseover="show_shopm(this)">
     {{#  if(d.Content.length>20){ }}
     	{{d.Content.substr(0,20)}}...
     {{# } else { }}
     	{{d.Content}}
     {{#  } }}
  </a>
</script>