LayUI⑸：数据的增、删、改操作页面（数据处理PHP）

已于 2022-03-30 12:31:22 修改
阅读量3.7k 收藏 7
点赞数 1
分类专栏： LayUI 文章标签： LayUI PHP
于 2022-03-29 18:36:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dawn0718/article/details/123828443
版权

　　使用一段时间LayUI后，感觉LayUI并非开始接触的那样完美。

　　各种怪异的语法糖让人苦恼，但是可以理解和接受。

　　有时候觉得ASP和ASP.net挺好的，一个页面可以搞定数据的增、删、改、查，在LayUI中也可以，但如果页面中数据元素多的话代码段太长了，这让人很无奈。

　　一个程序完成，页面太多了，需要适当地精简一下。

　　对于一个数据表的记录增加、修改、删除、查询，两个文件可以完成所有的操作，一个前端页面和一个后台处理程序，前端页面上将列表和编辑页面合成在一起即可，但这样也有缺点，就是字段数多的时候，代码段会很长，看起来很不方便。

　　我的做法，前端分为两个：列表页面和编辑页面。

　　前端需要注意的问题：

　　1、如何判断是增加记录和修改记录？

　　　　通过设置op的值来判断。

　　2、子页面与父页面的参数传递

　　　　父页面一般在打开子页面成功后进行数据传递。关键在于获取子页面的引用

var iframe = layero.find('iframe')[0].contentWindow; //得到iframe页的窗口对象
let childBody = layer.getChildFrame('body', index);//找到它的子窗口的body

　　　　子页面访问父页面比较容易。如：

if(parent.selectRowObj){//如果是增加操作就跳过
	var Init_c01=parent.selectRowObj['data']['c01'];
	//......
}

　　3、提交前的数据检查。

　　这一部分是公用的，但是检查数据唯一性是编辑部分要单独检查的。

　　4、代码的组织

　　很多人喜欢写下面的代码段：

if (obj.event === 'edit') {
　　//......
}else if(obj.event === 'add'){
　　//......
}else if(obj.event === 'delete'){
　　//......
}else if(obj.event === 'search'){
　　//......
}else if(obj.event === '......'){
　　//......
}else if(obj.event === 'exit'){
　　//......
}

　　代码长了，缩进不明显的时候很容易搞混，我还是觉得下面的方式看得清楚：

if (obj.event === 'edit') {
　　//......
}
if(obj.event === 'add'){
　　//......
}
if(obj.event === 'delete'){
　　//......
}
if(obj.event === 'search'){
　　//......
}
if(obj.event === '......'){
　　//......
}
if(obj.event === 'exit'){
　　//......
}

　　5、数据的删除

　　一般情况下，重要的数据记录都不使用批量删除。

　　如果不使用批量删除，那么就需要将表格选择列置为单选，即radio。

　　后端需要注意的问题：

　　1、防止不经过系统直接访问，即通过地址栏直接访问。

　　2、就是防止非法访问，比如随意设置参数后的访问。

　　3、防止数据伪造，主要在SQL语句上，这个目前也比较好解决了，就是使用预处理语句。

　　前、后端的数据传递使用JSON格式，注意AJAX的同步与异步，比如检查数据唯一性的时候就不能异步，必须检查完了才能下一步。

　　效果图：

 　　前端页面（列表）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户信息〖编辑〗</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
	<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>	
    <style>
        body { background-color: #ffffff; }
    </style>
</head>
<body>
	
<div class="layui-form layuimini-form">
		<form class="layui-form login-bottom" lay-fiter="ZTBUserEdit">
				<input type="hidden" id="op" value="">
				<div class="layui-form-item">
					<label class="layui-form-label required">数据库ID</label>
					<div class="layui-input-block">
						<input type="text" name="Dc01" id="Dc01" lay-verify="required" lay-reqtext="数据库ID不能为空"  value="" class="layui-input" >
						<tip>YQCY-HT-000，更改000，注意数字不能重复。</tip>
					</div>
				</div>
			
				<div class="layui-form-item">
					<label class="layui-form-label required">用户类型</label>
					<div class="layui-input-block" id="UserType">
						<input type="radio" name="Dc04" id="Dc04_A" value="管理员" title="管理员" checked="">
						<input type="radio" name="Dc04" id="Dc04_B" value="文件审核" title="文件审核">
						<input type="radio" name="Dc04" id="Dc04_C" value="普通用户" title="普通用户">
					</div>
				</div>
			
				<div class="layui-form-item">
					<label class="layui-form-label required">用户名称</label>
					<div class="layui-input-block">
						<input type="text" name="Dc02" id="Dc02"  lay-verify="required" lay-reqtext="用户名称不能为空"  value="" class="layui-input">
					</div>
				</div>
			
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="text" name="Dc03"  id="Dc03" value="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label required">岗位名称</label>
					<div class="layui-input-block">
						<input type="text" name="Dc07" id="Dc07"  lay-verify="required" lay-reqtext="岗位名称不能为空"  value="" class="layui-input">
					</div>		
				</div>
			
				<div class="layui-form-item">
					<label class="layui-form-label">单位名称</label>
					<div class="layui-input-inline">
						<select name="Dc05" id="Dc05" lay-filter="Department">
							<option value=""></option>
						</select>
					</div>
					<label class="layui-form-label">单位编码</label>
					<div class="layui-input-inline">
						<input type="text" name="Dc06"  id="Dc06" value="" class="layui-input" disabled="disabled">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">邮件帐号</label>
					<div class="layui-input-block">
						<input type="text" name="Dc08"  id="Dc08" value="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
					</div>
				</div>		
		</form>	
</div>

<script>
	var DepartmentList=[];
	if(parent.selectRowObj){
		var Init_c01=parent.selectRowObj['data']['c01'];
		var Init_c02=parent.selectRowObj['data']['c02'];
		var Init_c03=parent.selectRowObj['data']['c03'];
		var Init_c04=parent.selectRowObj['data']['c04'];
		var Init_c05=parent.selectRowObj['data']['c05'];
		var Init_c06=parent.selectRowObj['data']['c06'];
		var Init_c07=parent.selectRowObj['data']['c07'];
		var Init_c08=parent.selectRowObj['data']['c08'];		
	}		
    layui.use(['layer','form'], function () {
        var form = layui.form;
		var layer = layui.layer;
        var $ = layui.$;
		//得到单位名称的列表
		$.ajax({
			url:'ZTBGetDepartmentList.php',
			type:'POST',
			async:false,
			success:function (JsonData) {
				DepartmentList=JsonData.data;
			}
		});						
		//监听下拉列表的点击事件
		 form.on('select(Department)', function(data){
			 var selectDepartmentName = data.value; //选择的单位名称
			 //在数组中找到对应的编码
			for(var i=0;i<DepartmentList.length;i++){
				if(DepartmentList[i].c02==selectDepartmentName){
					document.getElementById('Dc06').value=DepartmentList[i].c01;
				}
			}			 
		 });							
        //监听提交
        form.on('submit(saveBtn)', function (data) {
			var table = layui.table;
			//判断操作类型
			if(document.getElementById("op").value==='add'){				
						//检查数据
						var canContinue=true;
						var strFalse="";						
						var sTemp=null;
						sTemp=document.getElementById("Dc01").value;						
						if( trim(sTemp)=='' || sTemp==null || sTemp==undefined){
								canContinue=false;
								strFalse="数据库ID不能为空！";							
						}
						sTemp=document.getElementById("Dc02").value;						
						if( trim(sTemp)=='' || sTemp==null || sTemp==undefined){
								canContinue=false;
								strFalse="用户名称不能为空！";							
						}
						if(canContinue){
								$.ajax({//检查数据库ID是否存在
										url:'ZTBIsExist.php',
										data:{"where":"c01='"+document.getElementById("Dc01").value+"'"},
										type:'POST',
										datetype:'json',
										async:false,//不能异步
										success:function (data) {
												if(data=='OK'){ 
														canContinue=false;
														strFalse="数据库ID已经存在！";
												}
										}
								});
								$.ajax({//检查姓名是否重复
									url:'ZTBIsExist.php',
									data:{"where":"c02='"+document.getElementById("Dc02").value+"'"},
									type:'POST',
									datetype:'json',
									async:false,//不能异步
									success:function (data) {
										console.log(data);
										if(data=='OK'){ 
											canContinue=false;
											strFalse="用户姓名已经存在！";
										}
									}
								});							
						}
						if(canContinue){
								$.ajax({
									url:'ZTBUser.php',
									data:{"OP":"新增",
										  "C01":document.getElementById("Dc01").value,
										  "C02":document.getElementById("Dc02").value,
										  "C03":document.getElementById("Dc03").value,
										  "C04":$('#UserType input[name="Dc04"]:checked ').val(),
										  "C05":document.getElementById("Dc05").value,
										  "C06":document.getElementById("Dc06").value,
										  "C07":document.getElementById("Dc07").value,
										  "C08":document.getElementById("Dc08").value,
										  },
									type:'POST',
									async:true,
									success:function (JsonData) {
										if(JsonData['data']!='OK'){							
											layer.msg('插入记录失败！',{time:2000,icon:5});
										}else{
											// 关闭弹出层
											layer.close(index);
											var iframeIndex = parent.layer.getFrameIndex(window.name);
											parent.layer.close(iframeIndex);							
										}
									}
								});							 
						}else{
								layer.alert(strFalse);
						}				
			}
			if(document.getElementById("op").value==='edit'){
						//判断数据是否更改
						var strUpdate='';
						if(document.getElementById("Dc02").value != Init_c02){
							strUpdate=" c02='"+document.getElementById("Dc02").value+"'";
						}
						if(document.getElementById("Dc03").value != Init_c03){
							if(strUpdate==''){
								strUpdate=" c03='"+document.getElementById("Dc03").value+"'";
							}else{
								strUpdate=strUpdate+" , c03='"+document.getElementById("Dc03").value+"'";
							}
						}						
						var strUserType=$('#UserType input[name="Dc04"]:checked ').val();						
						if(!strUserType != Init_c04){
							if(strUpdate==''){
								strUpdate=" c04='"+strUserType+"'";
							}else{
								strUpdate=strUpdate+" , c04='"+strUserType+"'";
							}
						}						
						if(document.getElementById("Dc05").value != Init_c05){
							if(strUpdate==''){
								strUpdate=" c05='"+document.getElementById("Dc05").value+"'";
							}else{
								strUpdate=strUpdate+" , c05='"+document.getElementById("Dc05").value+"'";
							}
						}						
						if(document.getElementById("Dc06").value != Init_c06){
							if(strUpdate==''){
								strUpdate=" c06='"+document.getElementById("Dc06").value+"'";
							}else{
								strUpdate=strUpdate+" , c06='"+document.getElementById("Dc06").value+"'";
							}
						}
						if(document.getElementById("Dc07").value != Init_c07){
							if(strUpdate==''){
								strUpdate=" c07='"+document.getElementById("Dc07").value+"'";
							}else{
								strUpdate=strUpdate+" , c07='"+document.getElementById("Dc07").value+"'";
							}
						}
						if(document.getElementById("Dc08").value != Init_c08){
							if(strUpdate==''){
								strUpdate=" c08='"+document.getElementById("Dc08").value+"'";
							}else{
								strUpdate=strUpdate+" , c08='"+document.getElementById("Dc08").value+"'";
							}
						}									
						console.log(strUpdate);
						if(strUpdate ='123'){
								//提交更改	
								$.ajax({
									url:'ZTBUser.php',
									data:{
										"strSet":strUpdate,
										"strWhere":"c01='"+document.getElementById("Dc01").value+"'"
									},
									type:'POST',
									datetype:'json',
									success:function (data) {
										window.parent.location.reload();
									}
								});
							
						}
						var iframeIndex = parent.layer.getFrameIndex(window.name);
						parent.layer.close(iframeIndex);				
			}			
            return false;			
        });
    });
</script>
</body>
</html>

　　前端部分（编辑）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户信息〖编辑〗</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
	<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>	
    <style>
        body { background-color: #ffffff; }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
		<form class="layui-form login-bottom" lay-fiter="ZTBUserEdit">
				<input type="hidden" id="op" value="">
				<div class="layui-form-item">
					<label class="layui-form-label required">数据库ID</label>
					<div class="layui-input-block">
						<input type="text" name="Dc01" id="Dc01" lay-verify="required" lay-reqtext="数据库ID不能为空"  value="" class="layui-input" >
						<tip>YQCY-HT-000，更改000，注意数字不能重复。</tip>
					</div>
				</div>			
				<div class="layui-form-item">
					<label class="layui-form-label required">用户类型</label>
					<div class="layui-input-block" id="UserType">
						<input type="radio" name="Dc04" id="Dc04_A" value="管理员" title="管理员" checked="">
						<input type="radio" name="Dc04" id="Dc04_B" value="文件审核" title="文件审核">
						<input type="radio" name="Dc04" id="Dc04_C" value="普通用户" title="普通用户">
					</div>
				</div>			
				<div class="layui-form-item">
					<label class="layui-form-label required">用户名称</label>
					<div class="layui-input-block">
						<input type="text" name="Dc02" id="Dc02"  lay-verify="required" lay-reqtext="用户名称不能为空"  value="" class="layui-input">
					</div>
				</div>			
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="text" name="Dc03"  id="Dc03" value="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label required">岗位名称</label>
					<div class="layui-input-block">
						<input type="text" name="Dc07" id="Dc07"  lay-verify="required" lay-reqtext="岗位名称不能为空"  value="" class="layui-input">
					</div>		
				</div>			
				<div class="layui-form-item">
					<label class="layui-form-label">单位名称</label>
					<div class="layui-input-inline">
						<select name="Dc05" id="Dc05" lay-filter="Department">
							<option value=""></option>
						</select>
					</div>
					<label class="layui-form-label">单位编码</label>
					<div class="layui-input-inline">
						<input type="text" name="Dc06"  id="Dc06" value="" class="layui-input" disabled="disabled">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮件帐号</label>
					<div class="layui-input-block">
						<input type="text" name="Dc08"  id="Dc08" value="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
					</div>
				</div>		
		</form>	
</div>
<script>
	var DepartmentList=[];
	if(parent.selectRowObj){
		var Init_c01=parent.selectRowObj['data']['c01'];
		var Init_c02=parent.selectRowObj['data']['c02'];
		var Init_c03=parent.selectRowObj['data']['c03'];
		var Init_c04=parent.selectRowObj['data']['c04'];
		var Init_c05=parent.selectRowObj['data']['c05'];
		var Init_c06=parent.selectRowObj['data']['c06'];
		var Init_c07=parent.selectRowObj['data']['c07'];
		var Init_c08=parent.selectRowObj['data']['c08'];		
	}		
    layui.use(['layer','form'], function () {
        var form = layui.form;
		var layer = layui.layer;
        var $ = layui.$;
		//得到单位名称的列表
		$.ajax({
			url:'ZTBGetDepartmentList.php',
			type:'POST',
			async:false,
			success:function (JsonData) {
				DepartmentList=JsonData.data;
			}
		});						
		//监听下拉列表的点击事件
		 form.on('select(Department)', function(data){
			 var selectDepartmentName = data.value; //选择的单位名称
			 //在数组中找到对应的编码
			for(var i=0;i<DepartmentList.length;i++){
				if(DepartmentList[i].c02==selectDepartmentName){
					document.getElementById('Dc06').value=DepartmentList[i].c01;
				}
			}			 
		 });							
        //监听提交
        form.on('submit(saveBtn)', function (data) {
			var table = layui.table;
			//判断操作类型
			if(document.getElementById("op").value==='add'){				
						//检查数据
						var canContinue=true;
						var strFalse="";						
						var sTemp=null;
						sTemp=document.getElementById("Dc01").value;						
						if( trim(sTemp)=='' || sTemp==null || sTemp==undefined){
								canContinue=false;
								strFalse="数据库ID不能为空！";							
						}
						sTemp=document.getElementById("Dc02").value;						
						if( trim(sTemp)=='' || sTemp==null || sTemp==undefined){
								canContinue=false;
								strFalse="用户名称不能为空！";							
						}
						if(canContinue){
								$.ajax({//检查数据库ID是否存在
										url:'ZTBIsExist.php',
										data:{"where":"c01='"+document.getElementById("Dc01").value+"'"},
										type:'POST',
										datetype:'json',
										async:false,//不能异步
										success:function (data) {
												if(data=='OK'){ 
														canContinue=false;
														strFalse="数据库ID已经存在！";
												}
										}
								});
								$.ajax({//检查姓名是否重复
									url:'ZTBIsExist.php',
									data:{"where":"c02='"+document.getElementById("Dc02").value+"'"},
									type:'POST',
									datetype:'json',
									async:false,//不能异步
									success:function (data) {
										console.log(data);
										if(data=='OK'){ 
											canContinue=false;
											strFalse="用户姓名已经存在！";
										}
									}
								});							
						}
						if(canContinue){
								$.ajax({
									url:'ZTBUser.php',
									data:{"OP":"新增",
										  "C01":document.getElementById("Dc01").value,
										  "C02":document.getElementById("Dc02").value,
										  "C03":document.getElementById("Dc03").value,
										  "C04":$('#UserType input[name="Dc04"]:checked ').val(),
										  "C05":document.getElementById("Dc05").value,
										  "C06":document.getElementById("Dc06").value,
										  "C07":document.getElementById("Dc07").value,
										  "C08":document.getElementById("Dc08").value,
										  },
									type:'POST',
									async:true,
									success:function (JsonData) {
										if(JsonData['data']!='OK'){							
											layer.msg('插入记录失败！',{time:2000,icon:5});
										}else{
											// 关闭弹出层
											layer.close(index);
											var iframeIndex = parent.layer.getFrameIndex(window.name);
											parent.layer.close(iframeIndex);							
										}
									}
								});							 
						}else{
								layer.alert(strFalse);
						}				
			}
			if(document.getElementById("op").value==='edit'){
						//判断数据是否更改
						var strUpdate='';
						if(document.getElementById("Dc02").value != Init_c02){
							strUpdate=" c02='"+document.getElementById("Dc02").value+"'";
						}
						if(document.getElementById("Dc03").value != Init_c03){
							if(strUpdate==''){
								strUpdate=" c03='"+document.getElementById("Dc03").value+"'";
							}else{
								strUpdate=strUpdate+" , c03='"+document.getElementById("Dc03").value+"'";
							}
						}						
						var strUserType=$('#UserType input[name="Dc04"]:checked ').val();						
						if(!strUserType != Init_c04){
							if(strUpdate==''){
								strUpdate=" c04='"+strUserType+"'";
							}else{
								strUpdate=strUpdate+" , c04='"+strUserType+"'";
							}
						}						
						if(document.getElementById("Dc05").value != Init_c05){
							if(strUpdate==''){
								strUpdate=" c05='"+document.getElementById("Dc05").value+"'";
							}else{
								strUpdate=strUpdate+" , c05='"+document.getElementById("Dc05").value+"'";
							}
						}						
						if(document.getElementById("Dc06").value != Init_c06){
							if(strUpdate==''){
								strUpdate=" c06='"+document.getElementById("Dc06").value+"'";
							}else{
								strUpdate=strUpdate+" , c06='"+document.getElementById("Dc06").value+"'";
							}
						}
						if(document.getElementById("Dc07").value != Init_c07){
							if(strUpdate==''){
								strUpdate=" c07='"+document.getElementById("Dc07").value+"'";
							}else{
								strUpdate=strUpdate+" , c07='"+document.getElementById("Dc07").value+"'";
							}
						}
						if(document.getElementById("Dc08").value != Init_c08){
							if(strUpdate==''){
								strUpdate=" c08='"+document.getElementById("Dc08").value+"'";
							}else{
								strUpdate=strUpdate+" , c08='"+document.getElementById("Dc08").value+"'";
							}
						}									
						console.log(strUpdate);
						if(strUpdate ='123'){
								//提交更改	
								$.ajax({
									url:'ZTBUser.php',
									data:{
										"strSet":strUpdate,
										"strWhere":"c01='"+document.getElementById("Dc01").value+"'"
									},
									type:'POST',
									datetype:'json',
									success:function (data) {
										window.parent.location.reload();
									}
								});
							
						}
						var iframeIndex = parent.layer.getFrameIndex(window.name);
						parent.layer.close(iframeIndex);				
			}			
            return false;			
        });
    });
</script>
</body>
</html>

　　PHP部分：

<?php
require 'ZTBlinkConfig.php';
$strFalse="";
$continue=true;
$srcAddr="http://XX.XX.XX.XX";
$returnArr=[];//准备返回的数组

//获取访问IP
if (array_key_exists('HTTP_ORIGIN',$_SERVER)) {
	$origin = $_SERVER['HTTP_ORIGIN'];
}else if (array_key_exists('HTTP_REFERER',$_SERVER)) {
	$origin = $_SERVER['HTTP_REFERER'];
}else {
	$origin = $_SERVER['REMOTE_ADDR'];
}
if(substr($origin,0,15)!=substr($srcAddr,0,15)){
	$continue=false;
	$strFalse="拒绝访问".substr($origin,0,15)."!";
}
if(!$_SESSION['ZTBUser']){
	$continue=false;
	$strFalse="请登录!";	
}
if($continue){
		$OP=!empty($_POST['OP']) ? $_POST['OP'] : '';//得到操作类型
		switch($OP){
			case '列表':
					//获取具体的页数
					$page  = isset($_POST['page']) ? intval($_POST['page']) : 1;
					//获取每页的行数
					$limit = isset($_POST['limit']) ? intval($_POST['limit']) : 15;
					//计算偏移值
					$offset = ($page-1)*$limit;
					$sql1 = "select count(*) from htuser";
					$res = $ZTBConn->query($sql1);
					$rows = $res->fetch();
					$rowCount = $rows[0];
					$returnArr['code']=0;
					$returnArr['msg']="";
					$returnArr['count']=$rowCount;
					//提取要返回的值
					$sql2="SELECT TOP $limit * FROM htuser WHERE c01 NOT IN ( SELECT TOP $offset c01 FROM htuser ORDER BY c01 ) ORDER BY c01";
					$result=$ZTBConn->query($sql2);
					$rows=$result->fetchAll(PDO::FETCH_ASSOC);
					$returnArr['data']=$rows;	
				break;
			case '增加':
					//获取post的数据
					$C01 = $_POST['c01'];
					$C02 = $_POST['c02'];
					$C03 = $_POST['c03'];
					$C04 = $_POST['c04'];
					$C05 = $_POST['c05'];
					$C06 = $_POST['c06'];
					$C07 = $_POST['c07'];
					$C08 = $_POST['c08'];
					//准备插入数据
					$sql = "insert into htuser(c01,c02,c03,c04,c05,c06,c07,c08) values('$C01','$C02','$C03','$C04','$C05','$C06','$C07','$C08')";
					$result =$ZTBConn->query($sql);
					$rows = $result->fetch();
					$rowCount = $rows[0];	
					if ( !$rowCount ) {
						$returnArr['data']="OK";	
					}else{
						$returnArr['data']="数据插入错误！";	
					}	
					break;
			case '修改':
					$Where=$_POST['strWhere'];
					$Set=$_POST['strSet'];
					//连接数据库
					$sql = "UPDATE htuser SET $Set WHERE $Where";
					$result =$ZTBConn->query($sql);
					$rows = $result->fetch();
					$rowCount = $rows[0];	
					if ( $rowCount ) {
						$returnArr['data']='OK';
					}else{
						$returnArr['data']="数据修改错误！";
					}	
					break;
			case '删除':
					//获取post的数据
					$C01 = $_POST['C01'];
					//连接数据库
					$sql = "delete from htuser where c01='$C01'";
					$result =$ZTBConn->query($sql);
					$rows = $result->fetch();
					$rowCount = $rows[0];
					if ( $rowCount>0 ) {
						$returnArr['data']='OK';
					}else{
						$returnArr['data']="删除失败！";	
					}						
					break;
			default:
					$returnArr['data']="不支持的操作！";
					break;
		}
}else{
	$returnArr=$strFalse;
}
header('Content-type:text/json');
//返回JSON格式的数据
echo json_encode($returnArr,JSON_UNESCAPED_UNICODE);
?>

　　PHP文件可以写一个common.php，用于处理通用的功能。

dawn
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带增减按钮的输入框
03-20
带增减按钮的输入框 含有输入范围（范围最好再自己用js控制一下，因为直接输入的值可能超过你预设的范围，本例范围0-30 ） jquery
springboot+mybatis+mysql+layUI+thymeleaf实现增删改查
04-04
在本项目中，我们利用了SpringBoot、MyBatis、MySQL、LayUI和Thymeleaf这五种核心技术，构建了一个完整的Web应用程序，实现了学生信息管理系统的增删改查功能。下面将对这些技术及其在项目中的应用进行详细解释。 *...
LayUi之数据表格的增删改查（内含完整源代码）
m0_74315688的博客
07-14 6001
关于使用layui进行增删改查的一整套流程清晰明了的编写出来啦！！感兴趣的话就点进来看看呢！！！
LayUI实现数据的增删改查功能
沐小侠
03-30 2458
Laiui数据表的使用，实现增删改查功能。 主要使用Layui的数据表格 - layui.table 用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
spring boot+layui实现增删改查实战
老徐的博客只有干货
12-24 1万+
说明： 最近在做一个后台，希望用一个现成的前端模板，找了一圈发现Layui比较合适。我知道很多人都有这个需求，为了使大家快速上手，我把自己写的最实用的增删改查案例完整的展示出来。 需要源码的请留下邮箱！ Layui官网：https://www.layui.com/doc/ 后台：spring boot2.0，数据的话用的list没连接数据库。 前端：layui-...
Layui 数据表格 table 行数据修改 edit:text/edit:true
夏已微凉、
07-03 4994
Layui 数据表格 table 行数据修改 edit:text/edit:true
layui+SpringBoot实现表格增删改查
云深不知处
07-27 2万+
前文演示了如何后端数据渲染在前端表格，接下来本文将演示如何在前端增加、删除和编辑数据。 本文使用的是通过按钮点击事件弹出
Layui(4) 增删改查 完整案例
郑清
12-24 3万+
分享一下最近花了2天时间来做的一个layui前端的CURD，先来看看效果是不是自己想要的吧... 【代码放最后了】 因为每天还要上课，所以虽然花了2天时间来弄，但实际上写的时间比较少，有些功能做的不是很好，还请大佬见谅 可参考layui官方开发文档：https://www.layui.com/doc/ 以及在线示例：https://www.layui.com/demo/ lay...
Layui hint: is not a valid module
热门推荐
dongsir
06-26 6万+
在用layui引入第三方插件或者自定义模块时报此错误，找到原因是引入的模块没有遵循模块规范，记得检查一下最后有没有 exports 暴露模块。 扩展一个 layui 模块 第一步：确认模块名，假设为：mymod，然后新建一个mymod.js文件放入项目任意目录下（注意：不用放入layui目录） 第二步：编写test.js 如下： /** 扩展一个test模块 **/ ...
最新Springboot整合Thymeleaf、layui实现简单的增删改查
weixin_43440301的博客
11-14 2万+
Springboot整合Thymeleaf、layui实现简单的增删改查 主页面列表分页显示 搜索功能 添加用户 编辑用户 Mapper映射 Controller层 list.html初始化加载表格数据 搜索重载表格数据 Springboot整合Thymeleaf和Layui。目前已实现简单的增删改查功能、批量删除功能、以及Echart报表显示与后台的数据交互功能。后面会不断完善。...
python+Django+layui 实现web 列表增删改查
04-30
在本项目中，我们利用Python的Web框架Django和前端组件库layui来构建一个功能完备的Web应用，...通过以上各个组件的配合，我们可以构建出一个功能完善的Web应用，用户可以通过界面方便地对文章数据进行增删改查操作。
利用layui框架实现数据的显示，增删改查等一系列操作.zip
11-10
在本项目中，我们将重点讨论如何利用layui框架，结合Java后端和jQuery库，来实现数据的显示、导入、导出以及增删改查等基本操作。 首先，layui的数据表格组件是实现数据展示的核心。它支持分页、排序、过滤等多种...
layui数据表格显示增删查改.zip
07-23
总结来说，"layui数据表格显示增删查改.zip"项目涵盖了前后端交互、数据库操作和业务逻辑处理等多个方面，展示了如何使用layui构建具有CRUD功能的数据管理界面，并结合jsp、servlet和DAO实现了完整的数据操作流程。...
spring+spring Mvc+mybatis+layui实现数据表格的增删改查
05-13
这是通过ssm+layui 实现的简单的对数据表格的增删改查，所有页面纯由layui实现。如果你是新手学习layui，那这个绝对会对你有很大的帮助； 如果你之前已经学过甚至已经使用过,那这个可以当做一个参考
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
Objective-C语言的基础教程.md
最新发布
07-31
Objective-C是一种面向对象的编程语言，是C语言的扩展。它主要用于苹果的iOS和macOS应用程序开发。
layui优美的增删改查页面
07-14
对于Layui来说，构建优美的增删改查页面可以通过以下步骤实现： 1. 引入Layui的相关文件：在HTML页面中引入Layui的CSS和JS文件。 ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 2. 创建HTML页面结构：根据需求设计页面布局，可以使用Layui提供的Grid、Form等组件进行页面布局。 ```html <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md12"> <!-- 查询表单 --> <form class="layui-form" lay-filter="searchForm"> <!-- 表单内容 --> </form> </div> </div> <div class="layui-row"> <div class="layui-col-md12"> <!-- 数据展示表格 --> <table class="layui-table" lay-filter="dataTable"> <!-- 表格内容 --> </table> </div> </div> </div> ``` 3. 编写JavaScript代码：使用Layui的表单、表格等组件，结合AJAX请求进行数据的增删改查操作。 ```javascript // 初始化Layui组件 layui.use(['form', 'table'], function() { var form = layui.form; var table = layui.table; // 监听查询表单提交 form.on('submit(search)', function(data) { // 发起AJAX请求，根据查询条件获取数据并渲染表格 table.reload('dataTable', { where: data.field }); return false; }); // 监听表格工具栏操作 table.on('tool(dataTable)', function(obj) { var data = obj.data; if (obj.event === 'edit') { // 编辑操作 // 弹出编辑框，填充数据 // 发起AJAX请求，保存编辑后的数据 // 刷新表格 } else if (obj.event === 'delete') { // 删除操作 // 弹出确认框，确认删除 // 发起AJAX请求，删除数据 // 刷新表格 } }); // 渲染表格 table.render({ elem: '#dataTable', url: 'api/getData', // 数据接口 method: 'GET', page: true, limit: 10, cols: [[ // 表格列定义 ]] }); }); ``` 以上是一个简单的示例，根据实际需求可以进一步完善页面布局和功能实现。希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值