Vue.js+Layer表格数据绑定与实现更新的实例

一：先使用Vue.js绑定好数据与更新事件

使用v-on绑定好事件,在事件里边直接把该行数据传递进去，在更新方法里边就可以直接取出需要更新的数据

  

    

      
选择
      
用户名
      
学号
      
班级
      
操作
    
    

      

      
{{item.UserName}}
      
{{item.Number}}
      
{{item.Class}}
      

 删除
 更新
      
    
  

 //实例化vue.js(用来给表格提供数据的)
 var vm = new Vue({
   el: '#content',
   data: {
     mydata: data
   },
   methods: {
     udelete: function (_id) //删除
     {
     },
     updateu: function (item) //更新
     {
     }
   }
 });

效果如下：

二：点击更新事件弹出layer更新框

先写好html

@* 给layer弹出层提供数据 *@

  

    

      

 用户名:
      
      

 
      
    
      

      

 学号:
      
      

 
      
    
      

      

 班级:
      
      

 
      
    
  

弹出layer

  updateu: function (item) //更新
     {   
layer.open({
  type: 1,
  title: "更新",
  area: ["300px", "230px"],
  content: $("#updatecontent"),
  btn: ["保存"],
  yes: function (index) {
    alert("点击保存");
  },
  cancel: function () { //点击关闭按钮
  }
});
     }

效果如下：

三：为layer弹框提供好数据

传统的做法就是把值一个一个的取出来，然后在赋值给文本框，现在可以使用vue.js一次性绑定好

实例化一个vue专门为弹框内的文本框提供数据

//给更新div添加数据 
   var update_vm = new Vue({ 
     el: "#updatecontent", 
     data: { 
userinfo: {} 
     } 
   }); 

点击更新按钮的时候我们已经把该行的值通过一个对象传过来了,

直接绑定到vue.js里边

updateu: function (item) //更新 
     { 
 
update_vm.$data.userinfo = item; 
   
     } 

这样就能在点击的时候拿到需要更新的数据了

而且由于双向绑定，当文本框发送变化的时候，表格内容也会自动变化

四：点击保存实现更新

传统的做法就是拿到更新后的值，也就是更具id获取文本框的值，然后组装成json对象，传入后台就可以实现更新。

使用vue.js就可以避免

自己组装对象了，因为是双向绑定，文本框的值改变model值自动改变

我们直接把Model的值传回后台实现更新就行了

 layer.open({
  type: 1,
  title: "更新",
  area: ["300px", "230px"],
  content: $("#updatecontent"),
  btn: ["保存"],
  yes: function (index) {
    //调用后台实现更新
    $.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {
    });
  },
  cancel: function () { //点击关闭按钮
  }
});

后台使用ef直接更新就行了

//更新 
  public JsonResult UpdateU(Users uinfo) 
  { 
    testEntities en = new testEntities(); 
 
    en.Entry(uinfo).State = System.Data.EntityState.Modified; 
 
    int count = en.SaveChanges(); 
 
    return Json(count); 
  } 

以上使用vue+layer实现更新，没有任何组织数据的地方,我们子需要关注数据本身就行了

如果在改变文本框值得时候不希望表格内自动改变，可以克隆一个对象在绑定

因为这样如果用户点击了关闭，需要自己会恢复成没有更新的数据

利用jquery克隆一个对象在绑定就而已了

updateu: function (item) //更新 
{ 
  //克隆一个对象 
  var databack = $.extend({}, item); 
  update_vm.$data.userinfo = databack; 
 
} 

这样的话数据库是更新了页面没有被更新，可以直接刷新网页

当然也可以使用更新Model来更新页面，直接把vue.js数据替换从而更新更新到页面

$.post('/home/UpdateU', update_vm.$data.userinfo, function (result) { 

  //可以把vue.js数据替换从而更新更新到页面 
  vm.$data.mydata.splice(index, index, update_vm.$data.userinfo); 
}); 

以上这篇Vue.js+Layer表格数据绑定与实现更新的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。