ajax获取json layui_layui表格中监听开关并拿到该行id和开关状态

最新推荐文章于 2022-06-08 15:13:21 发布

吴亦渊

最新推荐文章于 2022-06-08 15:13:21 发布

阅读量740

点赞数 2

文章标签： ajax获取json layui

本文链接：https://blog.csdn.net/weixin_34640051/article/details/112377290

版权

本文介绍了如何在layui数据表格中利用ajax获取json数据，并详细讲解了如何配置表格内的开关以及监听开关状态变化，同时获取当前行的id和开关状态。

摘要由CSDN通过智能技术生成

layui表格中监听开关并拿到该行id和开关状态 - Fly社区fly.layui.com

HTML: table - 数据表格和 templet - 自定义列模板

<div class="layui-tab-item layui-show">
	<table class="layui-table" id="projectSet" lay-filter="projectSet">
	</table>
	<script type="text/html" id="switchTpl">
  	        <!-- 这里的 checked 的状态只是演示 -->
  		<input type="checkbox" name="isShow" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="isShow" {{ d.isShow == 1 ? 'checked' : '' }}>
	</script>
</div>

js: 配置‘开关’

,{title: '是否设置新生注册显示',field: 'isShow', width:180, align:'center', templet: '#switchTpl'}

js: 开关监听

//监听'是否设置新生注册显示'操作
form.on('switch(isShow)', function(obj){
	var id = this.value; // 当行ID
	var isShow = this.checked ? '1' : '0'; // 选中状态
	var llo = layer.load(2,{shade:[0.001,'#fff']}); //layer.load() - 加载层
        $.ajax({
	       url: ctx+'/be/setup/setProjectIsShow',
	       cache: false,
	       type: "post",
	       dataType: "json",
	       data: {id: id ,isShow: isShow}, // 参数
	       boforeSend: function() {},
	       success: function(data) {
	                layer.close(llo); //layer.close(index) - 关闭特定层
	                msgcode(data, function() {
	                    	layer.close(llo)
	                    	layer.msg(data.data);
	                    	window.parent.tableList.reload({
    					where :{},// 设定异步数据接口的额外参数，任意设
    				}, 'data'); //只重载数据
	                    });
	                },
	       error: function(xhr) {
	                layer.close(llo); //关闭特定层
	                    layer.msg('系统错误，请联系管理员');
	                }
	        });
	layer.close(llo);
});