表格显示后的单元格事件

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

dongsdh

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

阅读量177

点赞数

分类专栏：第三方-layer

本文链接：https://blog.csdn.net/dongsdh/article/details/100003529

版权

第三方-layer 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前言：
表格显示后的单元格事件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>1开始使用Layui组件</title>
		<link rel="stylesheet" href="css/layui.css">
		<style>
			.box{
				width: 400px;
				height: 400px;
				border: 1px solid #ddd;
			}
			.box table{
				height: 100%;
			}
		</style>
	</head>

	<body>
		<table class="layui-hide" id="test" lay-filter="test"></table>
		<script src="jquery-3.1.1.min.js"></script>
		<script src="layui.all.js"></script>
		<script>
			layui.use('table', function(){
			  var table = layui.table;
			  
			  table.render({
			    elem: '#test'
			    ,url:'table.json'
			    ,toolbar: '#toolbarDemo'
			    ,title: '用户数据表'
			    ,cols: [[
			      {type: 'checkbox', fixed: 'left'}
			      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
			      ,{field:'username', title:'用户名', width:120, edit: 'text'}
			      ,{field:'logins', title:'ip', width:150,event: 'emailxia',style:'cursor: pointer;color:blue',templet: function(res){
			        return '<span>'+ res.logins +'</span>'
			      }}
			      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
			      ,{field:'city', title:'城市', width:100}
			      ,{field:'sign', title:'签名'}
			      ,{field:'experience', title:'积分', width:80, sort: true}
			      ,{field:'ip', title:'IP', width:120}
			      ,{field:'logins', title:'登入次数', width:100, sort: true}
			      ,{field:'joinTime', title:'加入时间', width:120}
			      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
			    ]]
			    ,page: true
			  });
			  //监听单元格事件
			  table.on('tool(test)', function(obj){
			    var data = obj.data;
			    if(obj.event === 'emailxia'){
			    	console.log(data);
			    	if(data.logins<1){
			    		layer.msg("暂无数据",{icon:0,time:900}); 
			    		return false;
			    	}
			    	console.log('跳转');
			    }
			  });
			});
		</script>

	</body>

</html>