自定义分页增删改查

怼烎@ 2022-05-29 08:15 251阅读 0赞

循环：

自定义分页增删改查：

<div class="main_right">
    
    				
    				<div id='inputbox' class="box">
    					<a class='x' href=''  onclick="msgbox(0); return false;">关闭</a>
    					<form method="post" class="addform">
    						<input type="text" name="code" placeholder="请输入用户编号" id="code" />
    						<input type="text" name="name" placeholder="请输入用户姓名" id="name" v-model="name"/>
    
    						<select id="sex">
    							<option>男</option>
    							<option>女</option>
    						</select> <input type="password" name="pwd" placeholder="请输入用户密码" id="pwd" v-model="pwd"/>
    						<input type="text" name="sid" placeholder="请输入系统编号" id="sid" v-model="sid"/> <input
    							type="text" name="school" placeholder="请输入学校" id="school" v-model="school"/> <input
    							type="submit" value="提交" />
    					</form>
    				</div>
    				
    				<div id='inputbox1' class="box1">
    					<a class='x' href=''  v-on:click="msgbox1(0); return false;">关闭</a>
    					<form method="post" class="addform1">
    
    						<input type="hidden" name="beid" id="beid" /> <input type="text"
    							name="upname" placeholder="请输入姓名" id="upname" v-model="upname"/>
    
    						
    						<div class="rolebox" id="rolebox"></div>
    						<input type="text" name="upsex" placeholder="请输入性别" id="upsex" v-model="upsex" />
    						<select id="upsexselect" class="upsexselect" v-model="upsex">
    							<option  v-for="option in options" v-bind:value="option">
    							{
       {option}}
    							</option>
    						</select> <input type="text" name="upschool" placeholder="请输入学校"
    							id="upschool" v-model="upschool"/> <input type="submit" value="提交" />
    					</form>
    				</div>
    
    				
    				<div id='pwdbox' class="pwdbox">
    					<a class='x' href='' ; onclick="uppwdbox(0); return false;">关闭</a>
    					<form method="post" class="uppwdform">
    						<table>
    							<tr>
    								<td>请输入原密码</td>
    								<td><input type="password" id="bepwd" class="bepwd"
    									name="bepwd"></td>
    							</tr>
    
    							<tr>
    								<td>请输入新密码</td>
    								<td><input type="password" id="newpwd" class="newpwd"
    									name="newpwd"></td>
    							</tr>
    
    							<tr>
    								<td>请确认密码</td>
    								<td><input type="password" id="newpwd1" class="newpwd1"
    									name="newpwd1"></td>
    							</tr>
    						</table>
    
    						<input type="submit" value="提交" />
    					</form>
    				</div>
    
    
    				
    				<div class="tablediv">
    					<form method="post" class="form1">
    
    						<div>
    
    							<input type="text" placeholder="请输入角色" name="findrole"
    								id="findrole" v-model="role" /> <input type="text"
    								placeholder="请输入学校" name="findschool" id="findschool"
    								v-model="school" /> <input type="text" placeholder="请输入性别"
    								name="findsex" id="findsex" v-model="sex" /> <select
    								class="findsexselect" id="findsexselect">
    								<option value="男">男</option>
    								<option value="女">女</option>
    							</select> <input type="button" value="搜索" v-on:click="fun" /><br> <input
    								type="button" value="新增" v-on:click="box(1)" />
    						</div>
    						
    						<div class="usertablediv">
    							<table border='1'>
    								<tr>
    									<th>姓名</th>
    									<th>性别</th>
    									<th>学校</th>
    									<th>操作</th>
    								</tr>
    								<tr v-for="(todo,index) in datas" :key="index" >
    
    								
    										<td class="'addresstab'+index">{
       {todo.name}}</td>
    										<td class="'classfiytab'+index">{
       {todo.sex}}</td>
    										<td class="'phonetab'+index">{
       {todo.school}}</td>
    
    										<td><input type='button' value='删除'
    											v-on:click="deleteuser(index)" /> <input type='button'
    											value='修改' v-on:click='updateuser(index)' /></td>
    									
    
    
    								</tr>
    							</table>
    						</div>
    						当前第<input type="text" name="page" class="page" />页   共<input
    							type="text" name="sumpage" class="sumpage" />页    
    						<input type="button" v-on:click="firstpage" value="第一页" class="hi" />
    						<input type="button" v-on:click="prepage" value="上一页" class="hi" />
    						<input type="button" v-on:click="nextpage" value="下一页" class="hi" />
    						<input type="button" v-on:click="lastpage" value="最后一页" class="hi" />
    					</form>
    
    				</div>

// .tablediv
    var page = new Vue({
    	el : '.tablediv',
    	data : {
    		role : "",
    		school : "",
    		sex : "",
    		datas : ""
    	},
    	methods : {
    		// 第一页
    		firstpage : function() {
    
    			$(".page").val("1");
    			page.fun();
    		},
    		// 最后一页
    		lastpage : function() {
    
    			var sum = $(".sumpage").val();
    			$(".page").val(sum);
    			page.fun();
    		},
    		// 前一页
    		prepage : function() {
    
    			var a = $(".page").val();
    			var b = parseInt(a) - 1;
    			if (b == 0) {
    
    			} else {
    				$(".page").val(b);
    				page.fun();
    			}
    		},
    		// 下一页
    		nextpage : function() {
    
    			var a = $(".page").val();
    			var b = parseInt(a) + 1;
    
    			var sum = $(".sumpage").val();
    
    			if (b > sum) {
    
    			} else {
    				$(".page").val(b);
    
    				page.fun();
    			}
    		},
    		// 初始化
    		init : function() {
    			$(".page").val("1");
    		},
    		// 加载数据--查询
    		fun : function() {
    
    			var role = page.role;
    			var school = page.school;
    			var sex = page.sex;
    			var dt = $(".form1").serialize();
    			dt += "&role=" + role + "&school=" + school + "&sex=" + sex;
    			$.post("getDatas", dt, function(data) { // 得到数据
    				page.datas = data;
    
    				da = data;
    				// alert(page.datas);
    
    			});
    
    			$.post("usercount", dt, function(data) { // 得到总条数
    				// alert(data);
    				sum = data;
    				$(".sumpage").val(data);
    			});
    		},// 加载完成
    
    		
    		// 修改
    		updateuser : function(i) {
    			document.getElementById('inputbox1').style.display = 'block'; 
    			upvm.msgbox1(i);
    			
    
    		},
    		// 修改完成
    
    		// 新增
    		box : function(n) {
    			addvm.msgbox(n);
    		},
    
    		// 删除
    		deleteuser : function(i) {
    			// alert(id);
    			var id = da[i].id;
    
    			var a = confirm("确定删除这条记录吗？");
    			if (a) {
    
    				var dt = "&id=" + id;
    				$.post("deleteUser", dt, function(data) {
    					alert(data.msg);
    					if (data.res) {
    						location.reload();
    					}
    				})
    			}
    		}
    
    	// 删除完成
    	}
    })
    page.init();
    page.fun();
    
    // 新增
    var addvm = new Vue({
    	el : '#inputbox',
    	data : {
    		name : "",
    		pwd : "",
    		sid : "",
    		school : ""
    	},
    	methods : {
    		// 新增
    		msgbox : function(n) {
    			document.getElementById('inputbox').style.display = n ? 'block'
    					: 'none'; /* 点击按钮打开/关闭 对话框 */
    			$(".addform").submit(function() {
    
    				var name = this.name;
    				var pwd = this.pwd;
    
    				var sid = this.sid;
    				var school = this.school;
    				if (name == "" || pwd == "" || sid == "" || school == "") {
    					alert("信息不可以有空的");
    				} else {
    					var dt = $(".addform").serialize();
    					dt += "&sex=" + $("#sex option:selected").text();
    					$.post("addUser", dt, function(data) {
    						alert(data.msg);
    
    						location.reload();
    
    					});
    				}
    
    				return false;
    			})
    
    		}
    	}
    // 新增结束
    })
    
    //修改
    var upvm=new Vue({
    	el:'#inputbox1',
    	data:{
    		upname:"",
    		
    		upsex:"",
    		upschool:"",
    		
    		options:["男","女"]
    	},
    	methods:{
    		// 修改
    		 msgbox1:function(i) {
    			
    			var id = da[i].id;
    			var upname = da[i].name;
    			var uprole;
    			var rid = da[i].rid;
    			var dt = "&id=" + id;
    			// 判断已有权限
    			$.post("getAlreadyRoles", dt, function(data) {
    				if (data.length > 0) {
    					for ( var i = 0; i < data.length; i++) {
    
    						for ( var j = 0; j < len; j++) {
    							var a = $(".rbox" + j).val();
    							if (a == data[i].rid) {
    								// alert(a);
    								$(".rbox" + j).attr('checked', true);
    							}
    
    						}
    					}// 返回数据循环结束
    				}
    			})
    
    			$.post("getRoleById", dt, function(data) {
    				uprole = data.name;
    				$("#uprole").val(uprole);
    			})
    			var upsex = da[i].sex;
    			var upschool = da[i].school;
    			$("#beid").val(id);
    			this.upname=upname;
    			this.upsex=upsex;
    			this.upschool=upschool;
    
    			// $(".addform1 input").change(function() {
    
    			$(".addform1").submit(function() {
    				// alert("提交");
    				var upname =this.upname;
    				var uprole = $("#uprole").val();
    				var upsex = this.upsex;
    				var upschool = this.upschool;
    				if (upname == "" || upsex == "" || upschool == "") {
    					alert("不可以有空的信息");
    				} else {
    
    					var dt = $(".addform1").serialize();
    					$.post("updateUser", dt, function(data) {
    						alert(data.msg);
    						if (data.res) {
    							document.getElementById('inputbox1').style.display = 'none'; 
    
    							location.reload();
    						}
    					});
    				}
    
    				return false;
    			})																			
    																						 
    																						 
    		}
    	}
    })