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

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

         

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

[html] view plain copy

1. <div id="content">  
2.     <table class="mytable">  
3.   
4.         <tr class="header">  
5.             <td>选择</td>  
6.             <td>用户名</td>  
7.             <td>学号</td>  
8.             <td>班级</td>  
9.             <td>操作</td>  
10.         </tr>  
11.   
12.         <tr v-for="item in mydata">  
13.             <td><input type="checkbox"  :value="item.Id" /></td>  
14.             <td>{{item.UserName}}</td>  
15.             <td>{{item.Number}}</td>  
16.             <td>{{item.Class}}</td>  
17.             <td>  
18.                 <a href="#" v-on:click="udelete(item.Id)">删除</a>  
19.                 <a href="#" v-on:click="updateu(item)">更新</a>  
20.             </td>  
21.         </tr>  
22.     </table>  
23. </div>  

                             

[javascript] view plain copy

1. //实例化vue.js(用来给表格提供数据的)  
2.                var vm = new Vue({  
3.                    el: '#content',  
4.                    data: {  
5.                        mydata: data  
6.                    },  
7.                    methods: {  
8.   
9.                        udelete: function (_id) //删除  
10.                        {  
11.                        },  
12.                        updateu: function (item) //更新  
13.                        {  
14.                        }  
15.                    }  
16.                });  

           效果如下：

                  

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

              

               先写好html

          

[html] view plain copy

1. @* 给layer弹出层提供数据 *@  
2. <div id="updatecontent" style="display:none">  
3.   
4.     <table style="margin-top:20px;margin-left:23px;">  
5.         <tr>  
6.             <td>  
7.                 用户名:  
8.             </td>  
9.             <td>  
10.                 <input type="text" v-model="userinfo.UserName"  />  
11.             </td>  
12.         </tr>  
13.            <tr>  
14.             <td>  
15.                 学号:  
16.             </td>  
17.             <td>  
18.                 <input type="text"  v-model="userinfo.Number"  />  
19.             </td>  
20.         </tr>  
21.            <tr>  
22.             <td>  
23.                 班级:  
24.             </td>  
25.             <td>  
26.                 <input type="text" v-model="userinfo.Class" />  
27.             </td>  
28.         </tr>  
29.     </table>  
30. </div>  

              弹出layer          

[javascript] view plain copy

1. updateu: function (item) //更新  
2.                      {                      
3.                          layer.open({  
4.                              type: 1,  
5.                              title: "更新",  
6.                              area: ["300px", "230px"],  
7.                              content: $("#updatecontent"),  
8.                              btn: ["保存"],  
9.                              yes: function (index) {  
10.   
11.                                  alert("点击保存");  
12.   
13.                              },  
14.                              cancel: function () { //点击关闭按钮  
15.                              }  
16.                          });  
17.                      }  

            效果如下：

            

       三：为layer弹框提供好数据

                  

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

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

                  

[javascript] view plain copy

1. //给更新div添加数据  
2.       var update_vm = new Vue({  
3.           el: "#updatecontent",  
4.           data: {  
5.               userinfo: {}  
6.           }  
7.       });  

                

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

                 直接绑定到vue.js里边

                 

[javascript] view plain copy

1. updateu: function (item) //更新  
2.                        {  
3.   
4.                            update_vm.$data.userinfo = item;  
5.                                  
6.                        }  

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

                

 

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

                                  

               

         四：点击保存实现更新

                     

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

                  使用vue.js就可以避免

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

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

               

[javascript] view plain copy

1. layer.open({  
2.                                type: 1,  
3.                                title: "更新",  
4.                                area: ["300px", "230px"],  
5.                                content: $("#updatecontent"),  
6.                                btn: ["保存"],  
7.                                yes: function (index) {  
8.   
9.                                    //调用后台实现更新  
10.                                    $.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {  
11.   
12.                                    });  
13.   
14.                                },  
15.                                cancel: function () { //点击关闭按钮  
16.   
17.                                }  
18.                            });  

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

                        

[csharp] view plain copy

1. //更新  
2.     public JsonResult UpdateU(Users uinfo)  
3.     {  
4.         testEntities en = new testEntities();  
5.   
6.         en.Entry<Users>(uinfo).State = System.Data.EntityState.Modified;  
7.   
8.         int count = en.SaveChanges();  
9.   
10.         return Json(count);  
11.     }  

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

         

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

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

      

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

      

[javascript] view plain copy

1. updateu: function (item) //更新  
2.                    {  
3.                        //克隆一个对象  
4.                        var databack = $.extend({}, item);  
5.   
6.                        update_vm.$data.userinfo = databack;  
7.                              
8.                    }  

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

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

[javascript] view plain copy

1. $.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {  
2.                             
3.                                       //可以把vue.js数据替换从而更新更新到页面  
4.                                       vm.$data.mydata.splice(index, index, update_vm.$data.userinfo);  
5.   
6.                                   });