layui修改、删除

最新推荐文章于 2022-05-18 10:50:57 发布
最新推荐文章于 2022-05-18 10:50:57 发布
阅读量3.3k 收藏 5
点赞数
分类专栏： 小白叶 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KidShmily/article/details/84777310
版权

jsp前端

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  <%      
String path = request.getContextPath();      
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
 
%>     
 
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<base href="<%=basePath%>">
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>layui在线调试</title>
	<link rel="stylesheet" href="<%=basePath%>js/layui/css/layui.css"  media="all">  
	<style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body>
 
<table class="layui-hide" id="test" lay-filter="demo"></table>
 
	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 
 
 
  
<script src="<%=basePath%>js/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
 

layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
  		var laydate = layui.laydate //日期
 		,laypage = layui.laypage //分页
  		,layer = layui.layer //弹层
  		,table = layui.table //表格
  		,carousel = layui.carousel //轮播
  		,upload = layui.upload //上传
  		,element = layui.element; //元素操作 
  		//监听Tab切换
  		element.on('tab(demo)', function(data){
    		layer.msg('切换了：'+ this.innerHTML);
    		console.log(data);
   	 	});
  
  		//执行一个 table 实例
  		table.render({
    		elem: '#test'
    		,page: true //开启分页
    		,url:'/lightnote/informa/findallEmp'  //数据请求路径
            ,cellMinWidth: 80
            ,cols: [[
      			{field:'id', width:200, title: 'ID', sort: true}
      			,{field:'enterprise', width:180, title: '企业名称'}
      			,{field:'establishment', width:120, title: '成立时间', sort: true}
     			,{field:'registration', width:100, title: '注册地'}
      			,{field:'registered', width:100, title: '注册资金', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      			,{field:'number', width:100, title: '总人数', sort: true}
      			,{field:'socialSecurity', width:100, title: '社保人数', sort: true}
      			,{field:'research', width:100, title: '研发人数'}
      			,{field:'registrationType', width:150, title: '注册类型', sort: true}
      			,{field:'operation', width:200, title: '经营范围'}
      			,{field:'product',  width:200, title: '主营产品', sort: true}
      			 ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    		]]
    		
 		 });
  		//监听工具条
  		table.on('tool(demo)', function(obj){
    		var data = obj.data;
    		if(obj.event === 'detail'){
    			layer.msg('ID：'+ data.id + ' 的查看操作');
    		} else if(obj.event === 'del'){
      			layer.confirm('真的删除行么', function(index){
        			//obj.del();
        			console.log(obj);
        	 		console.log(data);
        			//layer.close(index);
         			$.ajax({
                		url: "/lightnote/informa/informationDelete",
                		type: "POST",
                		data:{'id':data.id},
                		dataType: "json",
               			success: function(data){            
                    		if(data==null){
                     			layer.msg("删除失败", {icon: 5});                        
                    		}else{                      
                       			//删除这一行
                        		obj.del();
                       			//关闭弹框
                        		layer.close(index);
                        		layer.msg("删除成功", {icon: 6});
                        		  layer.closeAll();
			                    parent.location.reload();
                        		Load(); //删除完需要加载数据
                   			 }
                		},
                		error:function(){
                			alert(data);
                		},
 
            		});
      			});
    		} else if(obj.event === 'edit'){
    			console.log(data);
    			console.log(obj);
      			//layer.alert('编辑行：<br>'+ JSON.stringify(data))
      			layer.open({
      			 	shadeClose: true,
    				shade: false,
    				maxmin: true, //开启最大化最小化按钮
    				area: ['700px', '550px'],
        			type: 1,
        			closeBtn: false,
        			shift: 25,       		
        			content: '<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>' +
			       	'<form class="layui-form"> ' +
			        '<div class="layui-form-item">' +
			        '<div class="layui-inline">' +
			        '<label class="layui-form-label">id</label>' +
			        '<div class="layui-input-inline">' +
			        '<input type="text"  required lay-verify="required" name="id"  class="layui-input" value="'+data.id+'" >' +
			        '</div></div>' +
			        '<div class="layui-inline">' +
			        '<label class="layui-form-label">企业名称</label>' +
			        '<div class="layui-input-inline">' +
			        '<input type="text"  required lay-verify="required" name="enterprise"  class="layui-input" value="'+data.enterprise+'" >' +
			        '</div></div>' +
			        '<div class="layui-inline">' +
			        '<label class="layui-form-label">成立时间</label>' +
			        '<div class="layui-input-inline">' +
			        '<input type="text"  required lay-verify="required" name="establishment"  class="layui-input" value="'+data.establishment+'" >' +
			        '</div></div>' +
			        '</div>' +
			        '<div class="layui-form-item">' +
			        '<div class="layui-inline">' +
			        '<label class="layui-form-label">注册地</label>' +
			        '<div class="layui-input-inline">' +
			        '<input type="text"  required lay-verify="required" name="registration"  class="layui-input" value="'+data.registration+'" >' +
			        '</div></div>' +
			        '<div class="layui-inline">' +
			        '<label class="layui-form-label">注册资金</label>' +
			        '<div class="layui-input-inline">' +
			        '<input type="text"  required lay-verify="required" name="registered"    class="layui-input" value="'+data.registered+'" >' +
			        '</div></div>' +
			        '</div>' +
			        '<div class="layui-form-item">' +
			        '<div class="layui-inline">' +
			        '<label class="layui-form-label">总人数</label>' +
			        '<div class="layui-input-inline">' +
			        '<input type="text"  required lay-verify="required" name="number"  class="layui-input" value="'+data.number+'" >' +
			        '</div></div>' +
			        '<div class="layui-inline">' +
			        '<label class="layui-form-label">社保人数</label>' +
			        '<div class="layui-input-inline">' +
			        '<input type="text"  required lay-verify="required" name="socialSecurity"    class="layui-input" value="'+data.socialSecurity+'" >' +
			        '</div></div>' +
			        '</div>' +
			        '<div class="layui-form-item">' +
			        '<div class="layui-inline">' +
			        '<label class="layui-form-label">研发人数</label>' +
			        '<div class="layui-input-inline">' +
			        '<input type="text"  required lay-verify="required" name="research"  class="layui-input" value="'+data.research+'" >' +
			        '</div></div>' +
			        '<div class="layui-inline">' +
			        '<label class="layui-form-label">注册类型</label>' +
			        '<div class="layui-input-inline">' +
			        '<input type="text" required lay-verify="required" name="registrationType"  class="layui-input" value="'+data.registrationType+'" >' +
			        '</div></div>' +
			        '</div>' +
			        '<div class="layui-form-item">' +
			        '<div class="layui-inline">' +
			        '<label class="layui-form-label">经营范围</label>' +
			        '<div class="layui-input-inline">' +
			        '<input type="text"  required lay-verify="required" name="operation"  class="layui-input" value="'+data.operation+'" >' +
			        '</div></div>' +
			        '<div class="layui-inline">' +
			        '<label class="layui-form-label">主营产品</label>' +
			        '<div class="layui-input-inline">' +
			        '<input type="text"  required lay-verify="required" name="product"    class="layui-input" value="'+data.product+'" >' +
			        '</div></div>' +
			        '</div>' +			      
			        '</form>',
			        btnAlign: 'c',
        			btn: ['确定', '取消'],
			         yes: function (index, layero) {
			            /* var str = $("input[name=isIndividual]").val();
			            if (str == "on") {
			                str = "1";
			            } else {
			                str = "0";
			            }
			
			            if ($("input[name=siteName]").val() == null || $("input[name=siteName]").val() == "") {
			                layer.msg('请输入站点名称', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
			                    $("input[name=siteName]").focus();
			                });
			                return false;
			            } else if ($("input[name=fileRecord]").val() == null || $("input[name=fileRecord]").val() == "") {
			                layer.msg('请输入备案号', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
			                    $("input[name=fileRecord]").focus();
			                });
			                return false;
			            } else if ($("input[name=type]").val() == null || $("input[name=type]").val() == "") {
			                layer.msg('请输入平台信息', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
			                    $("input[name=type]").focus();
			                });
			                return false;
			            } else if ($("input[name=sitePhone]").val() == null || $("input[name=sitePhone]").val() == "") {
			                layer.msg('请输入联系电话', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
			                    $("input[name=sitePhone]").focus();
			                });
			                return false;
			            } */
			            var formData = {
			              	id: $("input[name='id']").val(),
			                enterprise: $("input[name='enterprise']").val(),
			                establishment: $("input[name='establishment']").val(),
			                registration: $("input[name='registration']").val(),
			                registered: $("input[name='registered']").val(),
			                number: $("input[name='number']").val(),
			                socialSecurity: $("input[name='socialSecurity']").val(),
			                research: $("input[name='research']").val(),
			                registrationType: $("input[name='registrationType']").val(),
			                operation: $("input[name='operation']").val(),
			                product: $("input[name='product']").val()	   
			            };
			            console.log(formData);
			            $.post('${basePath}informa/informationedit', formData, function (data) {
			            
			            console.log(window.location.href);
			                //判断是否发送成功
			                if (data.code == 200) {
			                    layer.msg("保存失败...", {type: 1});
			                   
			                } else {			                   
			                    
			                    layer.close(index);
			                    layer.closeAll();
			                    parent.location.reload();
			                }
			            })
			        }, btn2: function (index, layero) {
			            layer.msg("取消");
			            //return false 开启该代码可禁止点击该按钮关闭
			        }, cancel: function () {
			            layer.msg("关闭窗口");
			            //右上角关闭回调
			            //return false 开启该代码可禁止点击该按钮关闭
			        },
			        
			        success: function () {
			            layui.use('form', function () {
			                var form = layui.form; //只有执行了这一步，部分表单元素才会修饰成功
			         form.render('checkbox');
			                form.on('checkbox(istrue)', function (data) {
			                    /* if(data.elem.checked){
			                     emailConfig['isenterprise']=1;
			                     }; //是否被选中，true或者false*/
			                });
			            });
        }
        		
  });
  
 };
  
  
  
  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页');
      }
    }
   });
   })
  });
</script>
</body>
</html>
KidShmily
关注
专栏目录
laydate控件清空内容
eqizhihui的博客
08-21 1627
需求说明：选择开始时间，结束时间（不论先后），判断条件：结束时间不能早于开始时间，如果不符条件则提示弹窗以及清空当前时间。2.使用日期选择器的done回调，通过.value赋值。最后解决方法：先清除组件再渲染。3.手动执行清空按钮。
layui 日期重置_layui日历组件，点击清空按钮，让日期插件选中的值清空
weixin_39976951的博客
12-18 1635
问题描述写了两个日历组件用于前后对应，控制时间区间，后不能比前小之类的。现在我先选择后一个时间，点击清空，然后再次打开，选择第一个时间，发现第二个时间还是影响着第一个时间的选择。此时便想有什么方法能将选中的值清空掉问题出现的环境背景及自己尝试过哪些方法写了两个input日历，相互对应传值给后台，现在设置时间区间，就是后面不能比前面小之类的，然后点击清空下次再点不会被上一次设的时间影响，现在是不设e...
layui 日期重置_layui清空,重置表单数据的实例
weixin_39692253的博客
12-18 1495
最近在使用layui框架，在页面进行表单数据提交后，要是页面表单数据清空，依是有下面方法表单：主题内容jquery：//监听提交form.on('submit(upGoodsBtn)', function(data){var formDate = data.field;console.log(formDate);$.ajax({url: '/goods/saveGoodInfos',type: '...
layui 时间控件二次渲染，点击一个自定义按钮清空/重置时间控件
Start2019
05-10 6529
二、时间控件二次渲染的3种方法：2.1 直接删除原来绑定时间控件的DOM，再重新渲染；2.2 使用 `clone()` ，并且改变 `lay-key`；2.3 使用 `clone()` ，并且删除 `lay-key 三、通过一个按钮清空时间限制：不通过二次渲染清空时间控件的时间限制 四、清空 range:true 的日期范围控件； 五、使用 laydate 过程中需要注意的地方
layui 日期重置_layui框架，点击某个按钮，让layui的日期插件选中的值清空
weixin_39847722的博客
12-18 1090
利用layui的layDate控件，在一个弹窗里面用的，弹窗和当前页面同为一个页面，在点击关闭弹窗时要让layDate之前选的值清空掉相当与把这个控件刷新了一次大神们该怎么做？用来约束选择时间的范围var start = laydate.render({elem: '#test-out-start',format: 'yyyy-MM-dd',isInitValue: false,done: fun...
layui添加修改删除
05-13
在“layui添加修改删除”这个主题中，我们将深入探讨如何使用layui实现数据表格中的基本操作：添加、修改和删除。 一、layui数据表格（layui table） layui的数据表格组件是其核心功能之一，它可以方便地展示复杂的...
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
10-15
在本文中，我们将深入探讨如何使用layui table进行数据的新增、修改、删除和查询，以及如何通过双击获取行数据。 1. 表格数据的新增： layui table 提供了便利的方法来动态添加数据。在示例代码中，`addRowItem` ...
LayUI表格批量删除方法
10-18
在LayUI的表格组件中，批量删除的操作可以通过结合复选框（checkbox）和JavaScript脚本来实现。复选框通常放置在表格的每一行，用户可以通过勾选复选框来选择需要批量删除的行。实现批量删除功能的关键步骤可以分为...
layui中table表头样式修改方法
12-10
layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , url: '${ctx}/alarm/queryEventShowScatter' , even: true , page: { //支持传入 laypage 组件的所有参数...
layui 时间选择器 laydate 设置了默认值时 无法清空
夏已微凉、
06-09 2722
一、场景二、部分代码 一、场景 我们给时间选择器默认时间时，清除 操作不能清空数据，在done中加上下面几行即可： ,done: function (data) { this.value = data; this.elem.val(data); } 二、部分代码 <div class="layui-inline"> <input class="layui-input" type="text" id="create_date" name="create_tim.
解决layui追加或者动态修改的表单元素“没效果”的问题
10-16
今天小编就为大家分享一篇解决layui追加或者动态修改的表单元素“没效果”的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaWeb——LayUi 时间选择器重载清空值
weixin_45803109的博客
12-28 2399
需求说明： 说明： 选择开始时间，结束时间，判断开始时间不可大于结束时间，如果大于提示弹窗+清空当前时间选择器的值。 过程： 去网上找了大半天，什么赋值什么的，由于我这个是多个选择器，导致大都不行，尝试了一堆方法无用后，想到一个解决办法。 解决： 构思：无法在选择后回调清空值，那就移除内容进行再次渲染操作，可以达到清空效果。 代码： 以下是装载代码： //设置时间选择器 var child=$('.layer...
layui 时间选择器 laydate 设置默认值，最大选择区间，清空默认值
AnnaYaya的博客
05-18 8952
layui 时间选择器 laydate 设置默认值，最大选择区间，清空默认值
layui怎么动态修改表单元素的属性，jQuery的attr()方法，无法使用，有别的方法实现吗
hantanxin的专栏
06-15 4247
在 js 的最上面添加一行 var $ = layui.jquery;
清除Div元素
xiaodongry8的专栏
11-20 751
$("#div1").empty();
关于layui的laydate控件的清空回调
qq_32004911的博客
01-17 2万+
引言：不知道大家有没有碰到使用laydate时间控件的时候需要的一些指定的回调，比如laydate已有的选择回调。我就碰到了清空时需要回调的需求，网上也找了很多，但是csdn上大多需要C币，我就很纳闷，可能是别人写的太好了，所以需要回报吧，然后我就只能自己动手丰衣足食了，于是laydata.js被我仔仔细细看了一遍，终于功夫不负有心人，找到了一种超级简单的办法，当然，和大家分享欢乐多，同时也记录一...
layui 动态表格移除复选框以及某个元素
zhangxy
07-11 2328
表格是动态生成的，我这里是需要移除第一条数据的删除功能，所以我将删除的复选框和删除图片隐藏，我这里采用了最直接的方法，js移除元素，但是会有一点小bug，移除或者改变元素后反选不能使用了，非动态表格可以直接使用。 //表格 layui.use('table', function(){ var table = layui.table; //移除超级管理员的删除按钮 $...
layui中laydate的使用——设置动态时间范围限制、重置时间范围（清空动态限制）
热门推荐
十七的博客
09-03 9万+
如果使用layui插件，然后在时间设置上，有范围限制的需求时，可以直接使用range，这里主要讲，不用range，而是用两个独立的时间选项，如何做时间范围的控制！！！   目录 应用场景 需求分析 前端代码 js代码 注意事项： 最终实现： 应用场景 需求分析 发起时间的默认最大可选值为当前日期 发起时间从，的最大可选日期为，发起时间至选中的日期 发起时间至，的最小可...
laydate插件清除事件
gqz_的博客
10-15 2344
可以根据 done: function(value, date){ } 的 value 来判断 是否为 清空事件 if(!value) { console.log("清空") }
layui表格删除行
最新发布
09-18
### 回答1： 要删除layui表格中的行，可以使用`table.reload()`方法重新加载数据，包括删除行后的数据。具体实现步骤如下： 1. 获取表格对象和表格数据。 ```javascript var table = layui.table; var data = [{ id: 1, name: '张三', age: 18 }, { id: 2, name: '李四', age: 20 }]; ``` 2. 渲染表格。 ```javascript table.render({ elem: '#demo', cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'}, {fixed: 'right', title: '操作', toolbar: '#barDemo'} ]], data: data }); ``` 这里在表格的最后一列添加了一个操作栏，用于删除行。 3. 监听操作栏中的删除按钮。 ```javascript // 监听表格中的工具条 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('真的删除行么？', function(index){ // 删除行 var newData = []; for(var i=0;i<data.length;i++){ if(data[i].id != obj.data.id){ newData.push(data[i]); } } table.reload('demo', {data: newData}); layer.close(index); }); } }); ``` 这里通过监听表格中的工具条，判断点击的是删除按钮，然后弹出确认框，确认后删除行。 4. 删除指定行。 ```javascript // 删除指定行 var newData = []; for(var i=0;i<data.length;i++){ if(data[i].id != 1){ newData.push(data[i]); } } table.reload('demo', {data: newData}); ``` 这里删除id为1的行，可以根据需求修改。 ### 回答2： 在layui表格中删除行，需要先获取到要删除的行的索引，然后使用layui表格的API方法进行删除操作。 首先，在表格中设置一个删除按钮，绑定点击事件，并传递要删除的行的索引作为参数： ```html <table id="test"> <!-- 表格内容省略 --> <tbody> <tr> <td>1</td> <td>John</td> <td><button class="layui-btn layui-btn-danger" onclick="deleteRow(0)">删除</button></td> </tr> <tr> <td>2</td> <td>Mike</td> <td><button class="layui-btn layui-btn-danger" onclick="deleteRow(1)">删除</button></td> </tr> <!-- 更多行省略 --> </tbody> </table> ``` 然后，在JavaScript中定义一个deleteRow函数来处理删除行的逻辑： ```javascript function deleteRow(index) { layui.use('table', function(){ var table = layui.table; // 获取表格对象 var tableIns = table.render({ elem: '#test' }); // 获取当前数据表格的所有数据 var data = tableIns.config.data; // 删除指定索引的行数据 data.splice(index, 1); // 更新数据表格 tableIns.reload({ data: data }); }); } ``` 在函数中，首先获取到表格对象tableIns，然后通过config.data属性获取到当前表格中的所有数据，并使用splice方法删除指定索引的行数据。最后，调用reload方法重新加载数据，传递更新后的数据给data参数。 这样，当点击删除按钮时，对应的行数据将会被从表格中删除。 ### 回答3： 在Layui表格中删除行的操作是比较简单的。下面我就具体的步骤进行介绍。 首先，我们需要先获得表格实例对象，可以通过Layui提供的 table.render() 方法来实现。这个方法的参数一般是一个对象，包含了一些配置和回调函数。 在获取到表格实例对象后，我们可以使用实例对象的方法 table.on(event, callback) 来实现行的删除操作。其中，event 是事件类型，我们可以使用 "row(multiple)" 来实现行的多选删除，也可以使用 "row(single)" 来实现行的单选删除，callback 是回调函数，表示执行删除操作后的处理逻辑。 接下来，我们在回调函数中实现删除的具体逻辑。使用 table.checkStatus(id) 方法获取当前选中的行数据，返回的是一个对象，其中 data 属性包含了当前选中的行数据。然后，我们可以遍历选中的数据，获取到行对应的索引值，再通过实例对象的方法 table.trDel(index) 来删除行。 最后，为了使删除操作生效，我们还需要引入一些必要的样式和库文件，如 layui.css、layui.js 等。 这样，我们就可以使用Layui表格删除行了。需要注意的是，删除行的操作是基于实例对象进行的，所以要确保在操作前已经成功获取到表格实例对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值