自定义分页增删改查

 

循环：

 

自定义分页增删改查：

<div class="main_right">

				<!--一开始隐藏的新增div-->
				<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-->
				<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"/>

						<!-- <select class="roleselect" id="roleselect"></select> -->
						<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-->
				<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-->
				<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-->
						<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;
			})																			
																						 
																						 
		}
	}
})