layui-table操作列绑定事件的方法

1、html准备

<div>
    <table id="demo" lay-filter="test"></table>
</div>

2、js渲染

<script src="${pageContext.request.contextPath }/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  //第一个实例
  table.render({
     elem: '#demo'
    ,height: 315
    ,url: '${pageContext.request.contextPath}/account/getMemberList.do' //数据接口
    ,page: true //开启分页
    ,limit: 10
    ,size: 'sm'
    ,limits: [10, 20, 30, 40, 50]
    ,loading: true
    ,cols: [[ //表头
        {field: 'userId',fixed: 'left',checkbox: true},
        {type:'numbers', title: '序号', width:50,templet:'#indexTpl'},
        {field: 'userRealName', title: '用户名', width:100},
        {field: 'userSex', title: '性别', width:80, sort: true,toolbar:"#sex"},
        {field: 'userPhone', title: '手机号', width:120}, 
        {field: 'userEmail', title: '邮箱', width: 150},
        {field: 'userAddressDivisions', title: '地址', width: 200, sort: true},
        {field: 'userRegisterTime', title: '注册时间', width: 150, sort: true},
        {field: 'userStatus', title: '状态', width: 80,toolbar:"#status"},
        {field: 'right', title: '操作', width: 135, toolbar:"#barDemo"}
    ]]
  });

</script>

3、列格式化以及操作列定义-这个代码不是写在js中，放在div中

<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
		
<script type="text/html" id="barDemo">
	        {{#  if(d.userStatus == '1'){ }}
	        <a lay-event="stop" style="text-decoration:none" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a> 
				&nbsp;
				<a lay-event="detail" title="详情" href="javascript:;" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe665;</i></a> 
				&nbsp;
				<a lay-event="changePwd" style="text-decoration:none" class="ml-5" onClick="change_password('修改密码','change-password.html','10001','600','270')" href="javascript:;" title="修改密码"><i class="Hui-iconfont">&#xe63f;</i></a>
				&nbsp; 
				<a lay-event="del" title="删除" href="javascript:;" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>
			{{# }else if(d.userStatus == '2'){ }}
				<a lay-event="start" style="text-decoration:none" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe615;</i></a>
				&nbsp;
				<a lay-event="detail" title="详情" href="javascript:;" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe665;</i></a> 
				&nbsp;
				<a lay-event="changePwd" style="text-decoration:none" class="ml-5" onClick="change_password('修改密码','change-password.html','10001','600','270')" href="javascript:;" title="修改密码"><i class="Hui-iconfont">&#xe63f;</i></a>
				&nbsp; 
				<a lay-event="del" title="删除" href="javascript:;" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>
			{{# }else{  }}
				<a lay-event="detail" title="详情" href="javascript:;" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe665;</i></a> 
				&nbsp;
				<a lay-event="changePwd" style="text-decoration:none" class="ml-5" onClick="change_password('修改密码','change-password.html','10001','600','270')" href="javascript:;" title="修改密码"><i class="Hui-iconfont">&#xe63f;</i></a> 
				&nbsp;
				<a lay-event="del" title="删除" href="javascript:;" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>	
			{{# } }}
</script>
<!-- 0 未激活，1已启用，2：禁用 -->
<script type="text/html" id="status">
			{{#  if(d.userStatus == '0'){ }}
				<span class="label radius">未激活</span>
			{{# }else if(d.userStatus == '1'){ }}
				<span class="label label-success radius">已启用</span>
			{{# }else{  }}
				<span class="label label-danger radius">禁用</span>
			{{# } }}
</script>
		
<!-- 0 未知，1男，2：女 -->
<script type="text/html" id="sex">
			{{#  if(d.userSex == '0'){ }}
				未知
			{{# }else if(d.userSex == '1'){ }}
				男
			{{# }else{  }}
				女
			{{# } }}
</script>

4、操作列监听

//监听工具条
  table.on('tool(test)', function(obj){
	    var data = obj.data;
	    //JSON.stringify(data);往后台传string
	    if(obj.event === 'stop'){
	      //layer.msg('ID：'+ data.id + ' 的查看操作');
	    	member_stop(data.userId);
	    } else if(obj.event === 'del'){
	      layer.confirm('是否确定删除 <span style="color:orange">【</span><span>'+data.userRealName+'</span><span style="color:orange">】</span>', function(index){
	    	  $.ajax({
	  			type: 'POST',
	  			url: '${pageContext.request.contextPath}/account/deleteMemberByUserId.do?userId='+data.userId,
	  			dataType: 'json',
	  			async:false,
	  			success: function(msg){
	  				console.log(msg);
	  				if(msg.key=='success'){
	  					obj.del();
	  					layer.msg('删除成功!',{icon:1,time:1000});
	  				}else{
	  					layer.msg('程序异常!',{icon:5,time:1000});
	  				}
	  			},
	  			error:function(msg) {
	  				layer.msg('程序异常!',{icon:5,time:1000});
	  			}
	  		});	
	    	  
	        
	        layer.close(index);
	      });
	    } else if(obj.event === 'detail'){
	    	member_show(data.userNickName,getPath()+'/video/account/toMemberShow.do?userId='+data.userId,data.userId,'360','400');
	    } else if(obj.event === 'changePwd'){
	      
	    }
	});

6、注意这些代码的位置

layui-table操作列绑定事件的方法

猜你喜欢