版权声明：转载原创文章请以超链接形式请注明原文章出处，尊重作者，尊重原创！
恰饭广告
关于分页：https://www.idaobin.com/archives/1962.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试页面</title>
<link href="https://www.idaobin.com/css/bootstrap-3.3.7.min.css" rel="stylesheet">
<script type="text/javascript" src="https://www.idaobin.com/js/vue-2.2.2.min.js"></script>
<script src="https://www.idaobin.com/js/jquery-3.2.1.js"></script>
<script src="https://www.idaobin.com/js/bootstrap-3.3.7.min.js"></script>
<style type="text/css">
table tr td {
text-align: center;
}
.btn-info {
margin-left: 5px;
}
.add,
.addBox {
margin: 10px 0px 10px 10px;
}
.submit {
margin-left: 172px;
}
/*全删*/
.delAll {
margin-left: 10px;
}
/*新增*/
fieldset {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="app">
<button class="btn btn-primary btn-sm addBox" data-toggle="modal" data-target="#addModal">添加</button>
<button class="btn btn-sm btn-danger delAll" @click="ajaxDel">批量删除</button>
<table class="table table-bordered" id="table">
<thead>
<tr>
<td>
<input type="checkbox" @click="allSelect" v-model="data.checked">
</td>
<td>序号</td>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(person,index) in data.people">
<td>
<input type="checkbox" v-model="data.selected" v-bind:value="person.sid">
</td>
<td>{{(index+1)+(data.currentPage-1)*data.pageSize}}</td>
<td contenteditable="true">{{person.sid}}</td>
<td contenteditable="true">{{person.sname}}</td>
<td contenteditable="true">{{person.sage}}</td>
<td>
<button @click="del(index)" class="btn btn-danger btn-sm">删除</button>
<button @click="edit(person)" class="btn btn-info btn-sm" data-toggle="modal" data-target="#editModal">编辑</button>
</td>
</tr>
</tbody>
</table>
<!-- 添加学生 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addodalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
添加学生
</h4>
</div>
<div class="modal-body">
<p>
<label>学号：</label>
<input type="text" id="stuNo" v-model="data.addPeople.sid">
</p>
<p>
<label>姓名：</label>
<input type="text" id="stuName" v-model="data.addPeople.sname">
</p>
<p>
<label>年龄：</label>
<input type="number" id="stuAge" v-model="data.addPeople.sage">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" @click="add">
提交更改
</button>
</div>
</div>
</div>
</div>
<!-- 编辑学生 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="addodalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
编辑学生
</h4>
</div>
<div class="modal-body" v-if="data.editlist">
<p>
<label>学号：</label>
<input type="text" v-model="data.editPeople.sid" value="">
</p>
<p>
<label>姓名：</label>
<input type="text" v-model="data.editPeople.sname" value="">
</p>
<p>
<label>年龄：</label>
<input type="number" v-model="data.editPeople.sage" value="">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" @click="update">
提交更改
</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//jq分页取总页数方法
function pagination(pageCount) {
console.log(pageCount);
}
var vue = new Vue({
el: "#app",
data: { data: [], },
created: function () {
this.loadData(); //页面加载
},
methods: {
loadData: function () {
var _this = this;
//基础数据json
var jsonData = {
people: [
{ 'sid': '1043', 'sname': '张三', 'sage': '18' },
{ 'sid': '2434', 'sname': '赵六', 'sage': '43' },
{ 'sid': '3424', 'sname': '李四', 'sage': '42' },
{ 'sid': '1231', 'sname': '王五', 'sage': '35' }
]
};
//操作数据json
var opJson = {
addPeople: {},
editPeople: {},
editlist: false,
checked: false,
selected: [],
editSid: ""
};
//分页数据json
var paging = {
currentPage: 1, //当前页
pageSize: 20, //每页展示
pageCount: 50 //总页数
};
var newJson = $.extend(true, jsonData, opJson, paging);
_this.data = newJson;
console.log(JSON.stringify(newJson));
pagination(JSON.stringify(_this.data.pageCount)); //初始化分页
//ajax后台请求json数据
// $.ajax({
// type: 'Post',
// url: 'https://www.idaobin.com/',
// data: {
// action: "loadData"
// },
// dataType: 'json',
// success: function (data) {
// alert(data);
// }
// })
},
//删除
del: function (index) {
var _this = this;
console.log(JSON.stringify(this.data.people[index]));
this.data.people.splice(index, 1);
},
//提交
add: function () {
var isExist = false;
var newId = JSON.stringify(this.data.addPeople.sid);
for (var i = 0; i < this.data.people.length; i++) {
var stuId = this.data.people[i].sid;
if (JSON.stringify(stuId) === newId) {
isExist = false;
console.log("数据已存在");
break;
}
else {
isExist = true;
}
}
if (isExist === true) {
//在末行添加数据
this.data.people.push({
sid: this.data.addPeople.sid,
sname: this.data.addPeople.sname,
sage: this.data.addPeople.sage,
});
//在首行添加数据
// this.data.people.splice(0,0, {
// sid: this.data.addPeople.sid,
// sname: this.data.addPeople.sname,
// sage: this.data.addPeople.sage,
// })
console.log(JSON.stringify(this.data.addPeople));
}
},
//全选
allSelect: function () {
if (this.data.selected.length != this.data.people.length) {
this.data.selected = [];
for (var i = 0; i < this.data.people.length; i++) {
this.data.selected.push(this.data.people[i].sid);
//console.log(this.data.people[i].sid);
}
} else {
this.data.selected = [];
}
},
//前端页面的批量删除
checkedDel: function (_this) {
for (var m = 0; m < _this.data.selected.length; m++) {
for (var n = 0; n < _this.data.people.length; n++) {
if (_this.data.selected[m] == _this.data.people[n].sid) {
//console.log(JSON.stringify(_this.people[n]))
_this.data.people.splice(n, 1);
}
}
}
},
//ajax传给后台批量删除
ajaxDel: function () {
var _this = this;
var row = $("#table").find("tr").length; //table行数
var count = this.data.selected.length;
var stuId = "";
if (row == 1 || count == 0) {
console.log("没有数据");
}
else {
for (var j = 0; j < this.data.selected.length; j++) {
for (var i = 0; i < this.data.people.length; i++) {
if (this.data.selected[j] == this.data.people[i].sid) {
stuId += (this.data.people[i].sid + ",");
}
}
}
stuId = stuId.substr(0, stuId.length - 1); //删除最后一个,
console.log(stuId);
this.$options.methods.checkedDel(_this); //ajax返回成功后执行批量删除方法
}
},
//编辑
edit: function (item) {
this.data.editPeople = {
sid: item.sid,
sname: item.sname,
sage: item.sage
};
this.data.editlist = true;
editSid = item.sid;
},
//更新
update: function () {
var _this = this;
for (var i = 0; i < this.data.people.length; i++) {
if (this.data.people[i].sid == editSid) {
this.data.people[i] = {
sid: this.data.editPeople.sid,
sname: this.data.editPeople.sname,
sage: this.data.editPeople.sage
};
this.data.editlist = false;
}
}
console.log(JSON.stringify(this.data.editPeople));
}
}
});
</script>
</html>
原文链接：https://www.idaobin.com/archives/1982.html
让我恰个饭吧.ヘ(￣ω￣ヘ)
支付宝 ——————- 微信
恰饭广告
