如何修改layui数据表格绑定的开关事件?

首先搭建layui 数据表格实例,由于篇幅有限,以下只展示局部关键的代码信息

tableCols = [[
			      {field: 'id', title: 'ID', width:80,align:'center', sort: true}
			      ,{field: 'linkName', title: '站点名称',align:'center',edit: 'text'}
			      ,{field: 'linkUrl', title: '站点链接', align:'center',edit: 'text'}
			      ,{field: 'descript', title: '站点描述',align:'center',edit: 'text'}
			      ,{field: 'imgUrl', title: '站点图标', align:'center',edit: 'text'}
			      ,{field: 'createTime', title: '创建日期 ', align:'center',sort: true}
			      ,{field: 'status', title: '链接状态 ', align:'center',templet:       
                   '#typeConvert',sort: true}
			      ,{fixed: 'right',title:'操作', align:'center', toolbar: '#barDemo'}
			  ]];

在下面这里需要注意的是:如果要控制开关,必须要把监听行的ID值赋值给它,否则在后面修改开关状态的时候,会显得非常的困难。在这里是是给它加了一个属性 mid 

	<script type="text/html" id="typeConvert">
		<input type="checkbox"  name = "status"   value = {{d.status}} lay-skin="switch" lay-text="显示中|待审核"  mid={{d.id}}  lay-filter="status" {{ d.status == '01' ? 'checked' : '' }}>
	</script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

大致效果图如下:

如何和使用ajax来修改开关的状态呢?

             //开关事件(status是lay-filter中的status,注意区别)
		 form.on('switch(status)', function(obj){
                // 通过属性获取绑定的id值
				var id = $(this).attr('mid');
                // 判断开关的状态
				var status=obj.elem.checked?"01":"00";
                // 构造请求参数对象
				var data=new Object();
				data.status=status;
				data.id=id;
                //ajax请求方法
				 $.ajax({
						url :"/link/update",
						type : "post",
						dataType : "json",
						data : JSON.stringify(data),
						async : false,
						contentType : "application/json;charset=UTF-8",
						success : function(data) {
							if(data.code=="100"){
								 layer.msg("修改成功", {icon: 6});
							}else{
								 layer.msg("修改失败", {icon: 6});
							}
						}
					}); 
			});
	 

 

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Roc-xb

真诚赞赏,手留余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值