LayUI批量删除用户

需要加载LayUI的table模块 

var table = layui.table;
	  //监听表格复选框选择
	  table.on('checkbox(demo)', function(obj){
	    var checkStatus = table.checkStatus('idTest');
	     data=checkStatus.data;
	     ids=[];
	     data.forEach(function(n,i){
	          ids.push(n.id);
	        });
	        console.log(ids);  
	    $('.delete-many-btn').off("click").on("click",function(){
	        if(ids!=null){
	          layer.confirm('确定要删除选中的用户吗?', function(index){
	            $.ajax({
	               url:'/why123/user/deleteUsers?ids='+ids,
	               type:'post',
	               dataType:'json',
	               success:function(result){
	                if(result.y=="y"){           	
	                	layer.alert('删除成功', {
	                	  icon: 1,
	                	  skin: 'layer-ext-moon'
	                	});	
	                   window.location.reload();
	                }else{
	                 alert("删除出错");
	               }          
	               },
	               error:function(){
	                  alert("删除时发生了错误");
	               }          
	            });
	            
	          });
	          }      
	    }); 
	 
	  });

 

### Layui 实现批量上传附件的方法 以下是基于 Layui批量上传附件功能的实现方式,通过结合 HTML 和 JavaScript 来完成此需求。 #### HTML 结构 HTML 提供了一个用于展示文件列表和按钮的操作界面: ```html <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> <button type="button" class="layui-btn" id="testListAction">开始上传</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr> <th>文件名</th> <th>大小</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody id="demoList"></tbody> </table> </div> </div> ``` --- #### JavaScript 初始化代码 JavaScript 使用 Layui 的 `upload` 模块来初始化批量上传的功能。以下是一个完整的示例代码: ```javascript layui.use(['upload', 'table'], function() { var upload = layui.upload; var table = layui.table; // 创建一个上传组件实例 var uploadInst = upload.render({ elem: '#testList' // 绑定触发元素 , url: '/upload/' // 文件上传接口地址 , accept: 'file' // 允许上传的文件类型 , multiple: true // 支持多文件上传 , auto: false // 不自动上传 , bindAction: '#testListAction' // 开始上传绑定的动作按钮 , choose: function(obj) { // 当选择文件时执行回调函数 var files = obj.pushFile(); // 获取选中的文件对象 renderTable(files); // 渲染表格数据 } , done: function(res, index, upload) { // 单个文件上传完成后执行 console.log('文件上传成功:', res); updateTableRow(index, 'success'); // 更新对应行的状态为成功 } , error: function(index, upload) { // 单个文件上传失败时执行 updateTableRow(index, 'error'); // 更新对应行的状态为错误 } }); // 表格渲染逻辑 function renderTable(files) { var html = ''; Object.keys(files).forEach(function(key) { var file = files[key]; html += '<tr>'; html += `<td>${file.name}</td>`; html += `<td>${formatSize(file.size)}</td>`; // 格式化文件大小 html += '<td><span class="layui-badge layui-bg-gray">等待上传</span></td>'; html += '<td><button class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteRow(this)">删除</button></td>'; html += '</tr>'; }); document.getElementById('demoList').innerHTML += html; } // 删除某一行的数据 window.deleteRow = function(el) { el.parentElement.parentElement.remove(); }; // 更新表格中某一行的状态 function updateTableRow(index, status) { var rows = document.querySelectorAll('#demoList tr'); if (rows[index]) { var badgeEl = rows[index].querySelector('.layui-badge'); if (status === 'success') { badgeEl.className = 'layui-badge layui-bg-green'; badgeEl.textContent = '已上传'; } else if (status === 'error') { badgeEl.className = 'layui-badge layui-bg-red'; badgeEl.textContent = '上传失败'; } } } // 格式化文件大小 function formatSize(size) { if (size < 1024) return size + ' B'; if (size < Math.pow(1024, 2)) return (size / 1024).toFixed(2) + ' KB'; if (size < Math.pow(1024, 3)) return (size / Math.pow(1024, 2)).toFixed(2) + ' MB'; return (size / Math.pow(1024, 3)).toFixed(2) + ' GB'; } }); ``` --- #### 功能说明 1. **多文件选择** 用户可以通过点击“选择多文件”按钮一次性选择多个文件[^2]。 2. **手动控制上传** 设置 `auto: false` 后,用户可以选择文件而不立即上传,直到点击“开始上传”按钮才发起请求[^3]。 3. **实时反馈** 在文件上传过程中,会更新表格中的每一行状态,显示当前文件的上传进度或结果[^1]。 4. **自定义样式与交互** 利用了 Layui 的徽章 (`badge`) 和按钮组件,提供直观的视觉效果以及便捷的操作体验。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_39098505

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值