创建模态框
需要用到BootstrapDialog组件,可到官网自行下载
实现的效果:(将编号为5的行,姓名jock改为bene)
我把创建模态框封装为一个函数,可以随时调用
这里是基于Vue+axios+node.js写的
- 用node.js写的后台接口,获取到数据库内表的值
- 用axios请求获取数据
页面表格的代码如下:
<div id="table" style="margin-top: 50px;">
<table class="table table-hover table-bordered">
<thead>
<th>编号</th>
<th>姓名</th>
<th>出场时间</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for='(item,i) in blink'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time | dateformat}}</td>
<td>
<a class="btn btn-info" @click='upd(i)' >修改</a>
<a class="btn btn-danger" @click='del(i)'>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
点击修改按钮,根据索引值 i 获取表格第i行的数据:
upd(i){
let self=this;
//这个是写在模态框上的表单
var $content="<center>"+
"<form id='update_form' class='form-inline'>"+
"编号:<input type='text' id='sid' name='s_id' readonly class='form-control'><br><br>"+
"姓名:<input type='text' id='sname' name='s_name' class='form-control'><br><br>"+
"出场时间:<input type='datetime' id='stime' name='s_time' class='form-control'><br><br>"+
"</form>"
+"</center>";
BootstrapDialog.show({
title:'信息更改', //模态框标题
message:$content, //传入写好的表单
size:BootstrapDialog.SIZE_Model, //模态框大小
draggable:true, //鼠标是否可拖动模态框
buttons:[ //模态框下方的两个按钮 确定/取消
{
label:'确定',
cssClass:'btn-success btn-sm',
action:function(dialog){ //规定点击确定按钮后所要执行的操作函数
var myform=dialog.getModalBody().find('form'); //获取到模态框内的表单
//console.log(myform.serialize())
//通过axios跨域请求数据
axios({
url:'http://localhost:9000/apps/update', //node.js提前写好的更新数据的接口
method:'post', //请求方式为post
data:myform.serialize(), //传递的数据为:序列化获取表单元素的内容
responseType:'json'
}).then(response=>{ //成功后操作
self.getBlink(); //调用的函数是我写的获取数据库表中的信息到页面table,意思就是更新后,重新刷新表格
}).catch(error=>{ //失败后的操作
console.log(error)
}),
dialog.close() //关闭模态框
}
},
{
label:'取消', //点击取消后就关闭模态框,其他什么都不干
cssClass:'btn-warning btn-sm',
action:function(dialog){
dialog.close()
}
}
],
//这儿写的是获取table中第i行的数据给模态框
onshown:function(dialogRef){
// 获取要修改的行的内容,
var arr=self.blink[i];
//更改时间格式的方法
function func(value){
let date=new Date(value);
let y=date.getFullYear();
let m=date.getMonth()+1;
let d=date.getDate();
let h=date.getHours();
let dm=date.getMinutes();
let s=date.getSeconds();
//按照标准格式返回数据
return `${y}-${m<10?('0'+m):m}-${d<10?('0'+d):d} ${h<10?('0'+h):h}:${dm<10?('0'+dm):dm}:${s<10?('0'+s):s}`
}
//调用更改时间格式的函数,改变从表格中获取的time的格式
var mytime=func(arr.time)
console.log(mytime)
//分别将获取到的内容赋给模态框中的input框中
dialogRef.getModalBody().find('input[name=s_id]').val(arr.id)
dialogRef.getModalBody().find('input[name=s_name]').val(arr.name)
dialogRef.getModalBody().find('input[name=s_time]').val(mytime)
}
})
}