Loading

如何修改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});
							}
						}
					}); 
			});
	 

 

posted @ 2022-03-28 18:33  Roc-xb  阅读(48)  评论(0)    收藏  举报

易微帮源码


易微帮官网