模态框创建 及 数据获取 (实例解析)

创建模态框

需要用到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)
       }
   })
}