精华内容
下载资源
问答
  • 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
                }
            })
    展开全文
  • html代码实现方式(1)删除的实现逻辑:(1)在动态添加dom...实现方式(2)删除的实现逻辑:(1)在动态添加dom元素的时候,给每一个button添加一个del的点击事件。(2)并且把this传过去(3)执行点击事件。两个人写的代码第一...
    c96460dd7832699f4de198056ab17b60.gif

    html代码

    ecaca913a3d9e04a0fe373b12bc70947.png

    实现方式(1)

    26b6ab3f6088529df9d1214134c20378.png

    删除的实现逻辑:

    (1)在动态添加dom元素的时候,给每一个button添加一个clear的类名。

    (2)获取页面中带有clear类名的button按钮。

    (3)for循环遍历,添加onclick点击事件。

    实现方式(2)

    a9f33fc5b2942cb9c075aa228bdd429f.png

    删除的实现逻辑:

    (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:14
    layer.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);    //执行完后关闭
    	}
    	})
    }
    
    展开全文
  • 样式: 首先要为数据表格加载删除/编辑按钮 <... //barDemo是表头中‘操作’这一列的id <a class="layui-btn layui-btn-xs" lay-event="edit">编辑保存</a> <a class="...
  • layui confirm 取消事件

    2021-02-20 13:53:43
    layer.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:34
    js 部分 //头工具栏事件 table.on('toolbar(myorder)', function(){ var checkStatus = table.checkStatus('MyOrder'); var data = checkStatus.data; // 将id循环放入...
  • layui工具栏按钮监听事件给大家分享的功能是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加载表格,绑定新增,编辑删除,查看按钮事件的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用Layui数据表格实现行工具事件Layui表单弹框与数据回填具体步骤如下: 步骤一:布置行工具栏样式与数据表格初始化,代码如下: [removed] 编辑 删除 [removed] var listEnquiryQ
  • 删除行:obj.del(); 更新数据:obj.update({属性:更改后的值}); //监听工具条 table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var...
  • 一:监听复选框事件 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框架的时候,总会重复的写相关代码,感觉很是苦恼,所以进行分装,只需要关注业务方面即可如下图,提供新增,编辑,查看等功能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); ...
  • 一:监听复选框事件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表格里的监听行的单双击事件。 如上图所示:因为这...
  • 根据官方网站提供的文档中可以监听表格,监听自定义列事件(event事件),然后可以获取到当前事件行的数据,使用obj.del()即可。但是这种方式存在一个问题,页面上的行确实删除了,但是会留下空数据,这对后续提交...
  • 发现layui比较轻松,给刚开始写的留点思路,少踩点坑好了,直接上代码table.on('tool(users)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"...
  • LayUi展示并实现批量删除 提示:使用多选框checkbox进行勾选删除 文章目录前言一、在表格渲染中添加头部导航栏二、头部添加工具栏1.toolbar2.设置单击事件,也可写为头部导航栏事件题外话 前言 LayUi展示并实现...
  • 要实现的功能如下: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表格里的监听行的单双击事件。...
  • ![图片说明](https://img-ask.csdn.net/upload/202009/15/1600132709_102966.png) 怎么点击事件把id值传过去?我单纯js获取每次都是获取的第一个td的id值

空空如也

空空如也

1 2 3 4
收藏数 80
精华内容 32
关键字:

layui删除事件