<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" οnclick="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" οnsubmit="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="width:200px">ID</th><th style="width:150px" class="table-id">姓名</th><th style="width:150px" class="table-title">密码</th><th style="width: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="width:100px" v-show="pointer==val.id" v-model="name"></td>
<td><span v-show="pointer!=val.id">{{val.password}}</span><input style="width:100px" v-show="pointer==val.id" v-model="password"></td>
<td><span v-show="pointer!=val.id">{{val.course}}</span><input style="width: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 οnclick="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>