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

如何修改layui数据表格绑定的开关事件？相关推荐

在layui数据表格中修改数据
一.修改layui表格中的数: 1.layui表格中开启输入框:edit:'text'; //渲染表格组件tableInsT = table.render({elem: '#tesc',url: '$ ...
layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上，鼠标悬浮，显示所有文字内容（修改源码）...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
Layui数据表格的绑定
<Layui数据表格的绑定> 开发工具与关键技术:Visual Studio /.NET /layui插件作者:肖春庆撰写时间:2019年06月17日在我们使用软件的过程当中有着许多 ...
在layui数据表格上直接修改数据的方法
首先我们要知道layui是什么? layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.(官方解释) 那么接 ...
LayUI数据表格的使用指南
LayUI是现在比较流行的一款前端框架,数据表格也是后台管理中很长用到的工具了. 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮.之后就写了一 ...
php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
Layui数据表格监听单元格编辑恢复原值
Layui数据表格监听单元格编辑,并获取原值 table.on('edit(test)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-fi ...

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

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

如何修改layui数据表格绑定的开关事件？相关推荐

最新文章

热门文章