-
LayUI tab 删除事件回调
2017-08-21 23:02:01$(".layui-tab").on("click",function(e){ if($(e.target).is(".layui-tab-close")){ console.log($(e.target).parent().attr("lay-id"))// 输出哪个tab被点击,没有值时返回undefined$(".layui-tab").on("click",function(e){
if($(e.target).is(".layui-tab-close")){
console.log($(e.target).parent().attr("lay-id"))// 输出哪个tab被点击,没有值时返回undefined
}
}) -
button layui 点击事件_Web前端《~~js动态添加删除元素,点击一行、删除一行》
2021-01-07 05:05:20html代码实现方式(1)删除的实现逻辑:(1)在动态添加dom...实现方式(2)删除的实现逻辑:(1)在动态添加dom元素的时候,给每一个button添加一个del的点击事件。(2)并且把this传过去(3)执行点击事件。两个人写的代码第一...html代码
实现方式(1)
删除的实现逻辑:
(1)在动态添加dom元素的时候,给每一个button添加一个clear的类名。
(2)获取页面中带有clear类名的button按钮。
(3)for循环遍历,添加onclick点击事件。
实现方式(2)
删除的实现逻辑:
(1)在动态添加dom元素的时候,给每一个button添加一个del的点击事件。
(2)并且把this传过去
(3)执行点击事件。
两个人写的代码
第一种方式@前端菜鸟的进阶之路
function add(){ var input = document.getElementById('input').value; var tableBody= document.getElementById('table-body'); var list = ""+ input +" 删除" tableBody.innerHTML += list; let clear = document.getElementsByClassName('clear'); console.log(clear); for(let i = 0; i < clear.length; i++ ){ clear[i].onclick = function () { console.log(this.parentNode.parentNode); tableBody.removeChild(this.parentNode.parentNode); } } }
第一种方式@前端大肥肥
var tableBody = document.getElementById('table-body'); function add(){ var input = document.getElementById('input').value; if(!input) return false; var list = ""+ input +" 删除 " tableBody.innerHTML += list; } function del(_this) { tableBody.removeChild(_this.parentNode.parentNode); }
-
Layui批量删除
2019-08-16 18:32:17监听复选框 监听点击事件 两个按钮放在<script>中 <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container demoTable"> <button class="layui-btn layui-btn-sm" ...监听复选框 监听点击事件
- 两个按钮放在<script>中
<script type="text/html" id="toolbarDemo"> <div class="layui-btn-container demoTable"> <button class="layui-btn layui-btn-sm" lay-event="add" ><i class="layui-icon layui-icon-add-circle-fine" style="font-size:20px;font-weight:bold"></i> 新增班级</button> <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchdel" data-type="getCheckData"><i class="layui-icon layui-icon-delete" style="font-size:20px;"></i> 批量删除</button> </div> </script>
- 在生成表格的js中 使用了toolbar:"#toolbarDemo",使按钮加载到表格上
- JS实现批量删除(首先开启复选框监听,接着监听点击,active中获取选中数据,通过遍历数据,将班级id存储在delList数组中,通过var strify = JSON.stringify(delList);将数组转为JSON字符串)
//批量删除 active = { getCheckData: function(){ //获取选中数据 var checkStatus = table.checkStatus('tableAll') ,checkData = checkStatus.data, delList=[]; for (var i = 0; i < checkData.length; i++) { delList.push(checkData[i].classid); } var strify = JSON.stringify(delList); console.log(strify); $.ajax({ url:"../../ClassesDeleteBatchServlet", dataType:'json', data:{ datas:strify }, type:'post', success:function(data){ if (data == 0) { layer.msg('删除失败!',{icon:5,offset:"auto",time:2000});//提示框 }else{ layer.msg('删除成功!',{icon:6,offset:"auto",time:2000});//提示框 } setTimeout(function(){ location.reload();//重新加载页面表格 }, 2100); } }) } }; //监听点击 $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); //监听表格复选框选择 table.on('checkbox(table1)', function(obj){ console.log(obj); })
-
layui回车确定事件
2020-11-03 16:13:14layer.confirm('确定要删除选中的记录?', { btn : [ '确定', '取消' ], success:function(){ this.enterEsc = function (event) { if (event.keyCode === 13) { $(".layui-layer-btn0").click(); ...function remove(id) { layer.confirm('确定要删除选中的记录?', { btn : [ '确定', '取消' ], success:function(){ this.enterEsc = function (event) { if (event.keyCode === 13) { $(".layui-layer-btn0").click(); return false; //阻止系统默认回车事件 }else if(event.keyCode == 27){ $(".layui-layer-btn1").click(); return false; } }; $(document).on('keydown', this.enterEsc); //监听键盘事件,关闭层 }, end:function(){ $(document).off('keydown',this.enterEsc); //解除键盘关闭事件 } }, function() { layer.close(index); //执行完后关闭 } }) }
-
layui工具条事件绑定后端数据(删除,编辑)
2019-04-16 11:43:07样式: 首先要为数据表格加载删除/编辑按钮 <... //barDemo是表头中‘操作’这一列的id <a class="layui-btn layui-btn-xs" lay-event="edit">编辑保存</a> <a class="... -
layui confirm 取消事件
2021-02-20 13:53:43layer.confirm('确定要删除吗?', { icon:3, title:"提示", btn: ['确定', '取消'], submit:function(index){ layer.close(index); console.log("提交... -
layui常用的事件
2018-02-01 09:45:00等待效果 index = layer.load(2, {shade: false}); 关闭等待效果 layer.close(index) 提示信息错误信息 layer.msg('请填写完整内容', { icon : 2, ...layer.msg('删除成功', { icon:... -
layui实现单个删除和批量删除
2019-12-05 16:32:17文章目录layui实现单个删除和批量删除先获得表格数据一、单个删除1、在js文件中绑定操作工具栏的删除操作2、domain层:3、controller层:4、service层:5、dao层:二、批量删除1、首先在页面上定义批量删除按钮2、在... -
PHP Layui批量删除
2020-09-09 07:37:11// 头工具栏事件 table.on('toolbar(myorder)', function(){ var checkStatus = table.checkStatus('MyOrder'); var data = checkStatus.data; // 将id循环放入数组 var ids = []; data.forEach(function... -
php layui 批量删除
2020-01-09 13:37:34js 部分 //头工具栏事件 table.on('toolbar(myorder)', function(){ var checkStatus = table.checkStatus('MyOrder'); var data = checkStatus.data; // 将id循环放入... -
layui table工具栏点击时间_layui工具栏按钮监听事件
2021-01-12 02:45:57layui工具栏按钮监听事件给大家分享的功能是layui工具栏按钮监听事件Layui工具栏按钮监听事件:点击头部工具栏区域设定了属性为lay-event="" 的元素时触发关键属性为lay-event=""效果图: 图一是查询按钮的监听事件... -
layui中删除与批量删除(二)
2018-08-27 19:22:08页面展示: jsp文件中批量删除按钮及table: 这个table的id可以直接写在table标签中,...在监听工具条的function中判断所选按钮的event来确定某个事件 controller: service: mapper: SQL: ... -
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2020-10-16 10:53:37今天小编就为大家分享一篇layui加载表格,绑定新增,编辑删除,查看按钮事件的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
Layui表格行工具事件与数据回填方法
2020-12-02 17:36:09使用Layui数据表格实现行工具事件与Layui表单弹框与数据回填具体步骤如下: 步骤一:布置行工具栏样式与数据表格初始化,代码如下: [removed] 编辑 删除 [removed] var listEnquiryQ -
layui学习之数据表格事件、删除、更新数据
2020-01-09 15:28:50删除行:obj.del(); 更新数据:obj.update({属性:更改后的值}); //监听工具条 table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var... -
LayUI表格批量删除方法
2020-12-12 19:59:38一:监听复选框事件 var checkedArr=[]; table.on('checkbox(demo)', function(obj){ if (obj.type=='all') return; if (obj.checked){ checkedArr.push(obj.data.LAY_TABLE_INDEX); //checkedArr[obj.data.id] =... -
layui加载表格,绑定新增,编辑删除,查看按钮事件
2018-05-19 17:24:44使用layui框架的时候,总会重复的写相关代码,感觉很是苦恼,所以进行分装,只需要关注业务方面即可如下图,提供新增,编辑,查看等功能js方法/** * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件 * @... -
LayUI表格批量删除
2018-03-28 17:31:38一:监听复选框事件 var checkedArr=[]; table.on('checkbox(demo)', function(obj){ if (obj.type=='all') return; if (obj.checked){ checkedArr.push(obj.data.LAY_TABLE_INDEX); ... -
layui表格使用复选框批量删除_LayUI表格批量删除方法
2021-01-27 04:30:09一:监听复选框事件var checkedArr=[];table.on('checkbox(demo)', function(obj){if (obj.type=='all')return;if (obj.checked){checkedArr.push(obj.data.LAY_TABLE_INDEX);//checkedArr[obj.data.id] = obj.data.... -
Layui(table删除行)
2019-07-27 09:16:51视图层的数据删除很容易的,监听自定义列事件(event事件),然后可以获取到当前事件行的数据,包括dom对象然后是obj.del()就可以了。 这样的方式有点问题,dom数据删除一行后,他会留下一行空数... -
Layui表格监听行单双击事件讲解
2020-12-13 04:59:14比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改、删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单双击事件。 如上图所示:因为这... -
Layui table删除行出现的空数据
2020-10-17 22:15:49根据官方网站提供的文档中可以监听表格,监听自定义列事件(event事件),然后可以获取到当前事件行的数据,使用obj.del()即可。但是这种方式存在一个问题,页面上的行确实删除了,但是会留下空数据,这对后续提交... -
layui关闭表格编辑_layui数据表格删除、编辑和查看
2020-12-23 05:44:56发现layui比较轻松,给刚开始写的留点思路,少踩点坑好了,直接上代码table.on('tool(users)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"... -
LayUi展示并实现批量删除
2020-10-21 14:15:24LayUi展示并实现批量删除 提示:使用多选框checkbox进行勾选删除 文章目录前言一、在表格渲染中添加头部导航栏二、头部添加工具栏1.toolbar2.设置单击事件,也可写为头部导航栏事件题外话 前言 LayUi展示并实现... -
layui可以动态添加div吗_layui 动态添加的元素事件无响应解决方案
2020-12-19 11:17:34要实现的功能如下:image.png点击‘add’,添加一行test元素点击‘del’,删除此行部分代码如下:testtest:layui.use('layer', function(){var $ = layui.jquery, layer = layui.layer;var active = {addInput: ... -
Layui表格监听行单双击事件
2019-07-27 14:31:49比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改、删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单双击事件。... -
使用layui实现 AJax删除?
2020-09-15 09:20:04 怎么点击事件把id值传过去?我单纯js获取每次都是获取的第一个td的id值
收藏数
80
精华内容
32