maven云笔记之修改笔记本

最新推荐文章于 2024-06-18 19:02:44 发布

家懿

最新推荐文章于 2024-06-18 19:02:44 发布

阅读量137

点赞数

分类专栏： maven JavaScript 文章标签： js maven

本文链接：https://blog.csdn.net/weixin_43376497/article/details/106228066

版权

maven 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

想法：点击所要修改项，弹出对话层，并且原信息要显示在输入框中，修改后，数据同步更新。

1.弹出层HTML5页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
<title>Insert title here</title>
</head>
<body>
   <div class="layui-form-item" style="margin-top:20px">
<label class="layui-form-label">id</label>
<div class="layui-input-block">
  <input type="text" id = "id" name="id"autocomplete="off" placeholder="请输入id" class="layui-input"  style="width:80%">
</div>
  </div>
  
   <div class="layui-form-item">
<label class="layui-form-label">笔记本名称</label>
<div class="layui-input-block">
  <input type="text" id ="name" name="name"autocomplete="off" placeholder="请输入标题" class="layui-input"  style="width:80%">
</div>
  </div>
  <button id ="editnotebook" data-method="offset" data-type="auto" class="layui-btn layui-btn-normal" style="margin-left:112px">立即提交</button>
  <button id ="reset" data-method="offset" data-type="auto" class="layui-btn layui-btn-normal" style="margin-left:112px">立即重置</button>
  
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/editNoteBook.js"></script>
</body>
</html>

2.监听行事件

//监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;

if(obj.event === 'edit'){
    	 layer.open({
   		  type: 2,
   		  area: ['500px', '300px'],
   		  content:'edit_notebook.html?id='+data.id, //根据id找信息
   		  cancel: function(index, layero){ 
   			  table.reload('test', {
   				page: {
   				    curr: 1 //重新从第 1 页开始
   				  }
   				}); //只重载数据
   				layer.close(index)      
   			  return false; 
   			}    
   			     
   		}); 
    }
	});

3.根据id，通过getdetail，查找单个信息，取名为editNoteBook.js的javascript文件

layui.use(['jquery','layer'], function(){
	  var layer = layui.layer
	  ,$ = layui.jquery
	  
	  console.log("edit:"+getQueryValue("id"));
	  
	  var sendData={"id":getQueryValue("id")};
		$.ajax({
			type:"post",
			url:"notebook/getdetail.do",//路径不要错
			data:sendData,
			datatype:"json",
			success:function(msg){
				if(msg.state==1){
					//根据id获取笔记本信息成功
					$('#name').val(msg.data.name);
					$('#id').val(msg.data.id);
					console.log("edit:"+msg.data.name);
				}else{
					//根据id获取笔记本信息失败
					layer.msg(msg.message);
				}
				
			},
			error:function(msg){
				alert("通信失败");
			}
		});
		
     $("#editnotebook").on("click",function(){
    	 //首先判断id号或者笔记本名称是否为空
    	 if($('#name').val() =="" || $('#id').val() == "")
    	 {   
    		 layer.msg("id号或者笔记本名称不能为空");	
    		 return;
    	 }
    	 //然后在传数据
    	 var sendData={"id":$('#id').val(),"name":$('#name').val()};
 		$.ajax({
 			type:"get",
 			url:"notebook/updatenotebook.do",
 			data:sendData,
 			datatype:"json",
 			success:function(msg){
 				if(msg.state == 1)
 				{
 					//更新成功
 				    layer.msg(msg.message);	
 				}else
 				{
 					//更新失败
 					layer.msg(msg.message);	
 				}
 			},
 			error:function(msg){
 				alert("通信失败");
 			}	
 		});
     });
	});
//获取url参数值
function getQueryValue(queryName) {
    var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if ( r != null ){
       return decodeURI(r[2]);
    }else{
       return null;
    }
 }

在这里插入图片描述

家懿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
maven云笔记之修改笔记本

想法：点击所要修改项，弹出对话层，并且原信息要显示在输入框中，修改后，数据同步更新。1.弹出层HTML5页面<!DOCTYPE html><html><head><meta charset="UTF-8"> <link rel="stylesheet" href="./layui/css/layui.css" media="all"><title>Insert title here</title></
复制链接

扫一扫