jQuery实现的增删改查_jquery ajax增删改查-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38921377/article/details/74519298
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="resource/css/easyui.css">
		<link rel="stylesheet" type="text/css" href="resource/css/icon.css">
		<script type="text/javascript" src="resource/js/jquery.min.js"></script>
		<script type="text/javascript" src="resource/js/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="resource/js/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript">
		
			$(function(){
				$('#w').window({
					modal:true,
				 	closed:true
					}	
				);
			
				$("#windowCenter").hide();
			
					
					//初始化树
					$("#myTree").tree({
						lines:true,
	       				url:'../deptQuery',
	       				onClick: function(node){
	       					// 在用户点击的时候提示
							if(node.text=="EMP2"){
								queryEmp2();
							}
						},
	       				
	       				loadFilter: function(data){  
					        if (data.d){ 
					            return data.d;    
					        } else {  
					            return data;    
					        }    
				   		 },
				   		 onBeforeLoad:function(node,param){
				        
				        },
						onBeforeExpand:function(node){
						//在展开之前把他的url给改掉
						  $("#myTree").tree("options").url='../deptFindQuery?pdeptno='+node.id;
						  return true;
						}
				   		 
					})
			});
			
			function myFormatter(value,row,index){
				return "<input type='image' src='resource/image/update.ico'/><input type='image' src='resource/image/delete.ico'/>";
			}
			
			/*
				点击查询触发事件
				让table自动发起一个ajax请求查询
			*/
			function submitForm(){
				var val = $("#email").textbox("getValue");
				$("#empTable").datagrid("load",{ename:val});
			}
			
			//ajax请求
			function ajax(url,param,callback){
				$.ajax({
						url:url,	//	表示请求的路径
						data:param,
						dataType:"json",	// 表示响应的数据类型 json的方式传参
						success:callback,
						/*异常的处理*/
						error:function(XMLHttpRequest, textStatus, errorThrown){
							alert("调用服务器失败--"+XMLHttpRequest.status+"--"+errorThrown);
						}
					});
			}
			
			//保存按钮
			function save(){
			
				var eno = $("#wEno").val();
				var url;
				
				if(eno==""){
					url = "../ajaxAdd";
				}else{
					url = "../ajaxUpdate";
				}
			
				
				var param=$("#myForm").serialize();
				ajax(url,param,function(text){
						if(text==1){
							//alert("添加成功");
							$('#empTable').datagrid('reload');
							$('#w').window('close');
							clearMyForm();
						}else{
							alert("添加失败");
						}
				})

			}
			
			//清除div的数据
			function clearMyForm(){
				$("#wEno").val("");
				$("#wEname").val("");
				$("#wSal").val("");
				$('#w').window('close');
			}
			
			function queryEmp2(){
				
				$("#windowCenter").show();
				//初始化表格对象
				$("#empTable").datagrid({
					url:'../ajaxQuery',
					method:'get',
					singleSelect:false,
					collapsible:true,
					rownumbers:true,
					pagination:true,
					pageList: [10,15,20,50,100],
					toolbar: [{
							iconCls: 'icon-reload',
							text:'刷新',
							handler: function(){
								$('#empTable').datagrid('reload');
							}
							},{
							iconCls: 'icon-add',
							text:'添加',
							handler: function(){
								$('#w').window('open');
							}
							},{
							iconCls: 'icon-edit',
							text:'修改',
							handler: function(){
								
								//getSelections：取得所有选中行数据，返回元素记录的数组数据。
								var row = $('#empTable').datagrid('getSelections');
								if(row && row.length==0){
									alert("未选择数据行");
								}else if(row.length==1){
									$("#wEno").val(row[0].ENO);
									$("#wEname").val(row[0].ENAME);
									$("#wSal").val(row[0].SAL);
									
									$('#w').window('open');
									$("#aSave").css("onclick","update()");
								}else{
									alert("不能同时修改多行");
								}
							}},{
							iconCls: 'icon-remove',
							text:'删除',
							handler: function(){
									//获取当前页的页码
									var p=$('#empTable').datagrid("getPager").data("pagination" ).options;;
									var page = p.pageNumber;
									
									//getSelections：取得所有选中行数据，返回元素记录的数组数据。
									var row = $('#empTable').datagrid('getSelections');
									if(row && row.length==0){
										alert("未选择数据行");
									}else if(row.length>0){
										for(var i=0; i<row.length; i++){
											var param = "eno="+row[i].ENO+"&"+"page="+page;
											var url = "../ajaxDelete";
											ajax(url,param,function(text){
												if(text==1){
													//alert("删除成功");
													$('#empTable').datagrid('reload');
												}else{
													alert("删除失败");
												}
											});
										}
									}
								}
							}]
					});
				}
			
		</script>
	</head>
	<body>
	
			<div class="easyui-layout" style="width:100%;height:100%;">
				<div data-options="region:'west',split:true" title="导航菜单" style="width:210px;">
					 <ul id="myTree" class="easyui-tree" style="width:80%;heigth:100%">
					 	
					 </ul> 
				</div>
				<div id="windowCenter" data-options="region:'center',iconCls:'icon-ok'" style="padding:8px;">
				
		
		
				 雇员名称：<input class="easyui-textbox" type="text" id="email" data-options="required:false"></input>
			    <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()">查询</a>
				<!-- 
					所有easyui控件必须引用一个独立的样式
					data-options表示控件选项  所有的api查询的属性，都应该配置在该选项  该选项其实就是一个json对象
				-->
				<!--
					表格分页：
		     		  1 表格分页工具栏   pagination:true 会自动添加一个分页工具栏
		     		  2 设置url属性为 后台请求路径
		     		  3 pagination将发送两个参数到服务器：page：页码，起始值 1。rows：每页显示行。
				      4 返回的json格式中要有total和rows属性  {total:总条数 ,rows:查询数据行 []}
						total查询的数据总条数，然后自动去计算一共多少页
						rows属性就是查询所有数据行的属性
				 -->
				<table id="empTable" class="easyui-datagrid" title="EMP员工表" style="width:600px;height:380px"
					data-options="">
					<thead>
						<tr>
							<th data-options="field:'ENO',width:'33%'">ENO</th>
							<th data-options="field:'ENAME',width:'33%'">ENAME</th>
							<th data-options="field:'SAL',width:'34%',align:'right'">SAL</th>
							<!-- 这个方案是在表格添加一个操作的列，对单行进行修改和删除 -->
							<!-- th data-options="field:'status',width:'25%',align:'center',formatter:myFormatter">操作</th -->
						</tr>
					</thead>
				</table>
			
				<div style="margin:20px 0;">
				</div>
				<div id="w" class="easyui-window" title="保存" data-options="iconCls:'icon-save'" style="width:300px;height:250px;padding:10px;">
					<form id="myForm">
							<div style="margin-bottom:20px">
								<div>ENAME:</div>
								<input id="wEno" name="eno" type="hidden" >
								<input id="wEname" name="ename" data-options="validType:'email'" style="width:100%;height:32px">
							</div>
							<div style="margin-bottom:20px">
								<div>SAL:</div>
								<input id="wSal" name="sal" style="width:100%;height:32px">
							</div>
							<div>
								<a id="aSave" href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:49%;height:32px" οnclick="save()">保存</a>
								<a href="#" class="easyui-linkbutton" iconCls="icon-no" style="width:49%;height:32px" οnclick="clearMyForm()">关闭</a>
							</div>
						</form>
				</div>
			</div>
		</div>	
	</body>
</html>