<script src="assets/js/vue.js"></script>
<script src="assets/js/vue-resource.min.js"></script>
<script>
new Vue({
el:"#container123",
data:{
data:123,
name:"姓名",
password:"密码",
course:"课程",
pointer:-1,
alldata:false,
start:0,
end:7,
pageNow:1,
searchcon:null
},
mounted:function(){
this.$http.get("teacher_getAll.action").then(function(res){
console.log(res.data.data);
this.data=res.data.data;
for(var i=0;i<this.data.length;i++){
this.data[i].checked=false;
}
console.log(this.data);
},function(){
alert("请求数据失败")
})
},
methods:{
dele:function(index){
if(confirm("确认删除ID为"+index+"的老师")){
this.$http.get("teacher_dele.action?id="+index).then(function(res){
this.$http.post("teacher_getSearch.action",{name:this.searchcon},{emulateJSON: true}).then(function(res){
console.log(res.data.data);
this.data=res.data.data;
for(var i=0;i<this.data.length;i++){
this.data[i].checked=false;
}
console.log(this.data);
},function(){
alert("请求数据失败")
})
if(!res.data.success){
alert("删除失败")
}
}
,function(){
alert("请求数据失败")
})
}
},
update:function(name,password,course,pointer){
this.pointer=pointer;
this.name=name;
this.password=password;
this.course=course;
},
search:function(){
this.$http.post("teacher_getSearch.action",{name:this.searchcon},{emulateJSON: true}).then(function(res){
console.log(res.data.data);
this.data=res.data.data;
for(var i=0;i<this.data.length;i++){
this.data[i].checked=false;
}
console.log(this.data);
},function(){
alert("请求数据失败")
})
},
sure:function(index){
//
/*alert(index);
alert(this.name);
alert(this.password);
alert(this.course);*/
this.$http.post("teacher_update.action",{name:this.name,password:this.password,course:this.course,id:index},{emulateJSON: true}).then(function(res){
this.$http.post("teacher_getSearch.action",{name:this.searchcon},{emulateJSON: true}).then(function(res){
console.log(res.data.data);
this.data=res.data.data;
for(var i=0;i<this.data.length;i++){
this.data[i].checked=false;
}
console.log(this.data);
},function(){
alert("请求数据失败")
})
console.log(res.data.success);
if(!res.data.success){
alert("数据更新失败");
}else{
this.pointer=-1;
}
},function(){
alert("数据更新失败");
})
},
all:function(){
if(this.alldata){
for(var i=0;i<this.data.length;i++){
this.data[i].checked=true;
}
}else{
for(var i=0;i<this.data.length;i++){
this.data[i].checked=false;
}
}
}
}
})
<div class="content" >
<div class="card-box" >
<!-- Row start -->
<div class="am-g">
<div class="am-u-sm-12 am-u-md-6">
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-xs">
<button type="button" onclick="location.href='teacher_add.jsp'" class="am-btn am-btn-default"><span class="am-icon-plus"></span> 新增</button>
<button type="button" class="am-btn am-btn-default"><span class="am-icon-save"></span> 保存</button>
<button type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 删除</button>
</div>
</div>
</div>
<div class="am-u-sm-12 am-u-md-3">
<div class="am-input-group am-input-group-sm">
<input type="text" class="am-form-field" v-model="searchcon">
<span class="am-input-group-btn">
<button @click="search" class="am-btn am-btn-default" type="button">搜索</button>
</span>
</div>
</div>
</div>
<!-- Row end -->
<!-- Row start -->
<div class="am-g">
<div class="am-u-sm-12">
<form class="am-form" onsubmit="return false">
<table class="am-table am-table-striped am-table-hover table-main">
<thead>
<tr>
<th class="table-check"><input @click="all()" v-model="alldata" type="checkbox" /></th><th class="table-id" style="200px">ID</th><th style="150px" class="table-id">姓名</th><th style="150px" class="table-title">密码</th><th style="200px" class="table-title">课程</th><th class="table-set">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in data">
<td><input type="checkbox" v-model="val.checked"/></td>
<td>{{val.id}}</td>
<td><span v-show="pointer!=val.id">{{val.name}}</span><input style="100px" v-show="pointer==val.id" v-model="name"></td>
<td><span v-show="pointer!=val.id">{{val.password}}</span><input style="100px" v-show="pointer==val.id" v-model="password"></td>
<td><span v-show="pointer!=val.id">{{val.course}}</span><input style="100px" v-show="pointer==val.id" v-model="course"></td>
<td>
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-xs">
<button v-show="pointer!=val.id" @click="update(val.name,val.password,val.course,val.id)" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
<button v-show="pointer==val.id" @click="sure(val.id)" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 确定</button>
<button onclick="window.clipboardData.setData('text','123')" class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
<button @click="dele(val.id)" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="am-cf">
共 {{data.length}} 条记录
<div class="am-fr">
<ul class="am-pagination">
<li class="am-disabled"><a href="#">«</a></li>
<li class="am-active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
<hr />
<p>注：.....</p>
</form>