Vue.js 使用Vue.js和Jquery做增删改查
2018-10-14 12:03
441 查看
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="bootstrap-4.1.3-dist/css/bootstrap.css" rel="stylesheet"/>
<style type="text/css">
table thead tr th {
text-align: center;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/axios.min.js"></script>
<!--<link rel="stylesheet" href="css/index.css">-->
<script src="js/vue.js"></script>
<!--<script src="js/index.js"></script>-->
</head>
<style>
/***** 结合CSS样式一起使用 *****/
[v-cloak] {
display: none !important;
}
</style>
<body>
<div id="app" v-cloak style="padding:20px;">
<div id="index" class="panel panel-primary">
<div class="panel-heading">
搜索名字: <input type="text" id="name" name="name">
班级号:
<select id="classid" name="classid">
<option value="">请选择</option>
<option v-for="item in clist" :value=item.classid>{{item.classname}}</option>
</select>
教师名:
<select id="teacherid" name="teacherid">
<option value="">请选择</option>
<option v-for="item in tlist" :value=item.teacherid>{{item.teachername}}</option>
</select>
<input type="button" @click.prevent="find()" value="搜索" id="find" name="find">
<input type="button" @click.prevent="add()" value="添加" id="add" name="add">
</div>
<!--width="90%" border="1"-->
<table class="table table-bordered table-striped text-center">
<tr>
<td>编号</td>
<td>名字</td>
<td>班级名</td>
<td>教师名</td>
<td>操作</td>
</tr>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.classname}}</td>
<td>{{item.teachername}}</td>
<td>
<a href="#" @click.prevent="remove(item.id)">删除</a>
<a href="#" @click.prevent="edit(item)">修改</a>
</td>
</tr>
</table>
<br>
<div><a href="#" @click.prevent="homepage">首页</a>
<a href="#" @click.prevent="uppage">上一页</a>
当前页:{{pagebean.page}}
最大页数:{{pagebean.maxPages}}
<a href="#" @click.prevent="down">下一页</a>
<a href="#" @click.prevent="lastpage">末页</a>
<input type="number" style="width: 50px" id="pagex" min="1" > <input type="button" @click.prevent="go()" value="跳转" id="t">
<select id="limit" @change="changge()">
<option>10</option>
<option>20</option>
</select>
</div>
<!--<template>-->
<!--<v-pagination :total=pagebean.maxPages @page-change="pageChange1" @page-size-change="pageSizeChange1"></v-pagination>-->
<!--</template>-->
<input type="hidden" value="" id="page">
</div>
<!--编辑页面-->
<div id="edit">
<table class="table table-bordered table-striped text-center">
<input type="hidden" id="hid">
<tr>
<td>姓名</td>
<td><input type="text" name="ename" id="ename"></td>
</tr>
<tr>
<td>班级</td>
<td>
<select id="eclassid" name="eclassid">
<option value="">请选择</option>
<option v-for="item in clist" :value=item.classid>{{item.classname}}</option>
</select>
</td>
</tr>
<tr>
<td>教师</td>
<td><select id="eteacherid" name="eteacherid">
<option value="">请选择</option>
<option v-for="item in tlist" :value=item.teacherid>{{item.teachername}}</option>
</select></td>
</tr>
<tr>
<td><input type="button" @click.prevent="confirm" value="确定"></td>
<td><input type="button" @click.prevent="back" value="返回"></td>
</tr>
</table>
</div>
</div>
<script>
$('#edit').hide();
//实例化vue
var vm = new Vue({
el: '#app',
data: {
list: find().list,//学生数据
clist: class_bind(),//班级数据
tlist: teacher_bind(),//教员信息
pagebean: find().pagebean//分页信息
},
created() {//布置完之后执行的区域
},
methods: {
find() {//查询
this.list = find().list
this.pagebean = find().pagebean
}
,
remove(id) {//删除
if (confirm('确定删除吗?')) {
remove(id);
this.list = find().list
this.pagebean = find().pagebean
}
}, back() {//点击返回
$('#index').show();
$('#edit').hide();
//该项目的所有ajax请求可以改成以下的axios请求
// let params=new URLSearchParams();
// params.append("limit","20");
// params.append("name","张三");
// axios.post('studentaction.action?methodName=find',params).then(function (value) {
// console.log(value.data);//value.data为返回的数据
// })
},
edit(item) {//点击修改
$('#index').hide();
$('#edit').show();
$('#hid').val(item.id);
$('#ename').val(item.name);
$('#eclassid').val(item.classid);
$('#eteacherid').val(item.teacherid);
}, add() {//点击添加
$('#index').hide();
$('#edit').show();
}, confirm() {//确定按钮
if ($('#hid').val() == "") {//为空则是添加
add('add');
} else {
add('edit');//修改
}
this.list = find().list
this.pagebean = find().pagebean
},
homepage() {//点击首页
$('#page').val(1);
this.list = find().list
this.pagebean = find().pagebean
}, uppage() {//上一页
var up = $('#page').val() == 1 ? 1 : parseInt($('#page').val()) - 1;
$('#page').val(up);
this.list = find().list
this.pagebean = find().pagebean
}, down() {//下一页
var dowm = $('#page').val() == this.pagebean.maxPages ? this.pagebean.maxPages : parseInt($('#page').val()) + 1;
$('#page').val(dowm);
this.list = find().list
this.pagebean = find().pagebean
}, lastpage() {//末页
$('#page').val(this.pagebean.maxPages);
this.list = find().list
this.pagebean = find().pagebean
}, go() {//跳转
if ($('#pagex').val() >= 0 && $('#pagex').val() <= this.pagebean.maxPages) {
$('#page').val($('#pagex').val());
this.list = find().list
this.pagebean = find().pagebean
} else {
alert('请输入正确页数');
}
}, changge() {//换数量的方法
this.list = find().list
this.pagebean = find().pagebean
}
}
});
/**
* 查询方法
* @returns {*}
*/
function find() {
var data2;
$.ajax({
type: "post",
url: "studentaction.action?methodName=find",
dataType: "json",
data: {//传给servlet的数据,
name: $('#name').val(),
classid: $('#classid').val(),
teacherid: $('#teacherid').val(),
page: $('#page').val(),
limit: $('#limit').val(),
d: new Date()
},
async: false,//加上这个ajax先执行
success: function (data) {
$('#page').val(data.pagebean.page);
//返回处理的方法
console.log(data);
data2 = data;
}
});
return data2;
}
/**
* 班级数据绑定
*/
function class_bind() {
var data2;
$.ajax({
type: "post",
url: "studentaction.action?methodName=cfind",
dataType: "json",
data: {//传给servlet的数据,
d: new Date()
},
async: false,//加上这个ajax先执行
success: function (data) {
//返回处理的方法
data2 = data;
}
});
return data2;
}
/**
* 教员数据绑定
*/
function teacher_bind() {
var data2;
$.ajax({
type: "post",
url: "studentaction.action?methodName=tfind",
dataType: "json",
data: {//传给servlet的数据,
d: new Date()
},
async: false,//加上这个ajax先执行
success: function (data) {
//返回处理的方法
data2 = data;
}
});
return data2;
}
/**
* 添加和修改
*/
function add(index) {
var ur = "studentaction.action?methodName=add";
if (index == 'edit') {
ur = "studentaction.action?methodName=edit";
}
$.ajax({
type: "post",
url: ur,
dataType: "json",
data: {//传给servlet的数据,
id: $('#hid').val(),
name: $('#ename').val(),
classid: $('#eclassid').val(),
teacherid: $('#eteacherid').val(),
d: new Date()
},
async: false,//加上这个ajax先执行
success: function (data) {
if (data) {
alert('操作成功');
$('#index').show();
$('#edit').hide();
$('#hid').val("");
$('#ename').val("");
$('#eclassid').val("");
$('#eteacherid').val("");
} else {
alert('操作失败')
}
}
});
}
/**
* 删除
*/
function remove(id) {
$.ajax({
type: "post",
url: "studentaction.action?methodName=remove",
dataType: "json",
data: {//传给servlet的数据,
id: id,
d: new Date()
},
async: false,//加上这个ajax先执行
success: function (data) {
//返回处理的方法
if (data) {
alert('删除成功')
} else {
alert('删除失败');
}
}
});
}
</script>
</body>
</html>
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 如何在vue.js中使用jQuery 插件
- 浅析angular，react，vue.js jQuery使用区别
- 怎样在Vue.js中使用jquery插件
- 浅析angular，react，vue.js jQuery使用区别
- [译]怎样在Vue.js中使用jquery插件
- 浅析angular，react，vue.js jQuery使用区别
- 如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
- 使用Jquery与vuejs操作dom比较
- 使用Jquery与vuejs操作dom比较
- [译]怎样在Vue.js中使用jquery插件
- 基于vue.js 2.0，不使用webpack，只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面
- vue.js使用心得——el-select，el-table数据处理，css样式穿透以及增删改查
- 使用Jquery与vuejs操作dom比较
- 浅析angular，react，vue.js jQuery使用区别
- 使用jquery的时候，js的window.onunload事件失效的解决办法
- VS2010技巧：如何在js文件中使用jQuery智能感知
- 下面简单使用Jquery来操作iframe的一些记录，这个使用纯JS也可以实现。
- VS2010技巧：如何在js文件中使用jQuery智能感知（转）
- jquery按需加载js和css插件使用说明