vue.js实现成绩查询、新增、修改
2016-10-17 17:04
417 查看
vue.js实现成绩查询、新增、修改
原文地址 http://www.cnblogs.com/xwwin/p/5816527.html
*{
margin:0;
padding:0;
}
.report_card{
width:800px;
margin:0 auto;
font-size:12px;
}
.report_card table{
width:100%;
border-collapse: collapse;
text-align:center;
}
.report_card caption{
font-size:14px;
text-align:left;
line-height:30px;
font-weight:bold;
}
.report_card table th,.report_card table td{
border:1px solid #ccc;
}
.report_card table th{
height:36px;
background:#f8f8f8;
}
.report_card table td{
height:32px;
background:#f8f8f8;
}
.content{
width:100%;
height:32px;
line-height:32px;
position:relative;
}
.content input{
position:absolute;
top:0;
left:0;
width:100%;
color:#999;
padding-left:10px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
height:30px;
border:1px solid blue;
-webkit-animation:borderAn 2s infinite;
animation:borderAn 2s infinite;
}
.studyForm select{
width:100px;
height:28px;
}
.searchInput{
width:200px;
height:28px;
}
.searchButton{
width:100px;
height:32px;
}
@-webkit-keyframes borderAn{
0%{
border-color:transparent;
}
100%{
border-color:blue;
}
}
@keyframes borderAn{
0%{
border-color:transparent;
}
100%{
border-color:blue;
}
}
.studyForm{
margin:10px 0;
}
.studyForm input{
width:120px;
height:30px;
}
原文地址 http://www.cnblogs.com/xwwin/p/5816527.html
*{
margin:0;
padding:0;
}
.report_card{
width:800px;
margin:0 auto;
font-size:12px;
}
.report_card table{
width:100%;
border-collapse: collapse;
text-align:center;
}
.report_card caption{
font-size:14px;
text-align:left;
line-height:30px;
font-weight:bold;
}
.report_card table th,.report_card table td{
border:1px solid #ccc;
}
.report_card table th{
height:36px;
background:#f8f8f8;
}
.report_card table td{
height:32px;
background:#f8f8f8;
}
.content{
width:100%;
height:32px;
line-height:32px;
position:relative;
}
.content input{
position:absolute;
top:0;
left:0;
width:100%;
color:#999;
padding-left:10px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
height:30px;
border:1px solid blue;
-webkit-animation:borderAn 2s infinite;
animation:borderAn 2s infinite;
}
.studyForm select{
width:100px;
height:28px;
}
.searchInput{
width:200px;
height:28px;
}
.searchButton{
width:100px;
height:32px;
}
@-webkit-keyframes borderAn{
0%{
border-color:transparent;
}
100%{
border-color:blue;
}
}
@keyframes borderAn{
0%{
border-color:transparent;
}
100%{
border-color:blue;
}
}
.studyForm{
margin:10px 0;
}
.studyForm input{
width:120px;
height:30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue成绩单</title>
</head>
<body>
<div class="report_card" id="reportCard">
<table class="studyForm">
<caption>成绩录入/处理</caption>
<tbody>
<tr>
<td width="170">学号:<input type="text" v-model="addArr.stuId"></td>
<td width="170">姓名:<input type="text" v-model="addArr.name"></td>
<td width="170">语文:<input type="text" v-model="addArr.ywScores"></td>
<td width="170">数学:<input type="text" v-model="addArr.sxScores"></td>
<td colspan="2" width="120">
<a href="javascript:void(0);" v-on:click="submitStu">录入</a>
<a href="javascript:void(0);" v-on:click="resetStu">重置</a>
</td>
</tr>
<tr>
<td align="left">
搜索：<input v-model="searchTxt" type="text" class="searchInput">
</td>
<td>
排序字段:
<select v-model='sortKey'>
<option value="ywScores">语文</option>
<option value="sxScores">数学</option>
</select>
</td>
<td>
排序类型：
<select v-model="sortClass">
<option value="1">升序</option>
<option value="-1">降序</option>
</select>
</td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<table class="scoreList">
<caption>成绩列表</caption>
<thead>
<th width="170">学号</th>
<th width="170">姓名</th>
<th width="170">语文</th>
<th width="170">数学</th>
<th colspan="2" width="120">操作</th>
</thead>
<tbody>
<tr v-for="item in studyArr | filterBy searchTxt | orderBy sortKey sortClass">
<td><div class="content">{{item.stuId}}<input v-model="editArr.stuId" type="text" v-if="$index==nowEditCol"></div></td>
<td><div class="content">{{item.name}}<input v-model="editArr.name" type="text" v-if="$index==nowEditCol"></div></td>
<td><div class="content">{{item.ywScores}}<input v-model="editArr.ywScores" type="text" v-if="$index==nowEditCol"></div></td>
<td><div class="content">{{item.sxScores}}<input v-model="editArr.sxScores" type="text" v-if="$index==nowEditCol"></div></td>
<td>
<a href="javascript:void(0);" v-on:click="startEdit($index)" v-if="$index!=nowEditCol">编辑</a>
<a href="javascript:void(0);" v-on:click="cancelEdit" v-if="$index==nowEditCol">取消</a>
<a href="javascript:void(0);" v-on:click="sureEdit($index)" v-if="$index==nowEditCol">确认</a>
</td>
<td><a href="javascript:void(0);" v-on:click="deleteStu($index)">删除</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>var studyArrJson=[
{'stuId':'stu0001','name':'张三','ywScores':85,'sxScores':90},
{'stuId':'stu0002','name':'李四','ywScores':88,'sxScores':85},
{'stuId':'stu0003','name':'王五','ywScores':65,'sxScores':75},
{'stuId':'stu0004','name':'刘六','ywScores':58,'sxScores':96}
];
var reportCardVm=new Vue({
el:'#reportCard',
data:{
studyArr:studyArrJson,//成绩花名册
addArr:{'stuId':'','name':'','ywScores':'','sxScores':''},//新增的表单字段
nowEditCol:-1,//当前编辑的行
editStatus:false,//当前是否在编辑状态
searchTxt:'',//搜索字段
sortKey:'ywScores',//排序健
sortClass:'1',//升降排序1为升,-1为降
},
methods:{
//启动索引index数据编辑
startEdit:function(index){
this.nowEditCol=index;
},
//取消编辑状态
cancelEdit:function(){
this.nowEditCol=-1;
},
//启动索引index数据修改确认
sureEdit:function(index){
this.studyArr.$set(index,this.editArr);
this.nowEditCol=-1;
},
//删除索引index数据
deleteStu:function(index){
this.studyArr.splice(index,1);
},
//新增成绩
submitStu:function(){
var addArr={
'stuId':this.addArr.stuId,
'name':this.addArr.name,
'ywScores':this.addArr.ywScores,
'sxScores':this.addArr.sxScores
};
this.studyArr.push(addArr);
this.resetStu();
},
//复位新增表单
resetStu:function(){
this.addArr={
'stuId':'',
'name':'',
'ywScores':'',
'sxScores':''
}
}
},
computed:{
//存储当前编辑的对象
editArr:function(){
var editO=this.studyArr[this.nowEditCol];
return {
'stuId':editO.stuId,
'name':editO.name,
'ywScores':editO.ywScores,
'sxScores':editO.sxScores
}
}
}
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
- 用java面向对象的内容建立学生姓名，学号，id，班级，每一科的成绩，以及对管理员实现（对老师只实现查看）：通过名字查询成绩，通过学号查询成绩，通过id修改姓名，通过姓名修改成绩
- vue.js实现用户评论、登录、注册、及修改信息功能
- 利用Vue.js实现求职在线之职位查询功能
- 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
- JS实现动态表格的新增，修改，删除操作
- 记录关于jqGrid在同一个jsp中实现查询记录显示及新增和修改操作
- Vue.js实现分页查询功能
- Vue.js 实现分页查询
- 用JS实现CheckBox的全选 修改 取消 查询 删除的函数
- 简单的HTML中TAB分页实现，js控制页面tr行新增、删除、修改
- 【OJ】用链表来实现成绩统计并查询、修改（原题目：最高分多少）
- js实现的修改div里img标签的src属性
- 使用GridView加DetailsView实现查询，新增，编辑，删除
- JS操作select相关方法：新增 修改 删除 选中 清空 判断存在 等
- js中实现table的插入、修改、删除
- JS操作select相关方法：新增 修改 删除 选中 清空 判断存在 等
- JS操作select相关方法：新增 修改 删除 选中 清空 判断存在 等
- JS操作select相关方法：新增 修改 删除 选中 清空 判断存在
- 使用GridView加DetailsView实现查询，新增，编辑，删除