Vue.js 表格查询与更新

 Vue.js 实现表格数据绑定

            

            可以利用vue.js生命周期事件created加载完后为表格提供数据             

[javascript] view plain copy

1. var vm = new Vue({  
2.               el: "#table_content",  
3.               data: {  
4.                   ulist: []  
5.               },  
6.               methods: {  
7.                   getdata: function (_keycontent) {  //查询数据  
8.   
9.                       //先把本地对象缓存下来  
10.                       var self = this;  
11.   
12.                       $.get("GetUsersHandler.ashx", { keycontent: _keycontent, page: currentPage }, function (_result) {  
13.   
14.                           var jsobobj = JSON.parse(_result);  
15.                           self.ulist = jsobobj;  
16.                       });  
17.                   }           
18.               },  
19.               created: function () {  //初始化事件里边去调用查询方法  
20.   
21.                   this.getdata("");  
22.               }  
23.           });  

             使用V-for解析数据                  

[html] view plain copy

1. <tr v-for="uitem in ulist">  
2.   
3.            <td class="highlight">  
4.   
5.                <div class="success"></div>  
6.   
7.                <a href="#">{{uitem.Id}}</a>  
8.   
9.            </td>  
10.   
11.            <td class="hidden-phone">{{uitem.UserName}}</td>  
12.   
13.            <td>  
14.                <span class="label label-success">{{uitem.Number}}</span>  
15.   
16.            </td>  
17.   
18.            <td style="width: 200px">  
19.                <a href="#" class="btn mini purple"><i class="icon-edit"></i>更新</a>  
20.                <a href="#" class="btn mini black"><i class="icon-trash"></i>删除</a>  
21.                <a href="#" class="btn mini blue"><i class="icon-share"></i>分享</a>  
22.            </td>  
23.   
24.        </tr>  

              效果：            

        

          Vue.js实现更新

                    

                        其实只要点击更新按钮能够拿到值就好操作了

              方法1：拿到更新按钮本身，在通过jQuery去获取数据

           

[html] view plain copy

1. <a href="#" class="btn mini purple" v-on:click="vupdate($event)"><i class="icon-edit"></i>更新</a>  

                 

[javascript] view plain copy

1. methods: {  
2.                   vupdate: function (_my) {  
3.   
4.                       //***************获取数据的方法1，使用jquery获取*****************  
5.   
6.                       var needtr = $(_my.target).parent().parent();  
7.                       console.log(_my.target);  
8.                       alert(needtr.find("td").eq(1).html());  
9.                       alert(needtr.find("td").eq(2).html());  
10.   
11.                   },  

             方法2：利用vue绑定的数据                          

                            点击更新按钮的时候把改行数据源直接传递到方法里边去

                           

[html] view plain copy

1. <a href="#" class="btn mini purple" v-on:click="vupdate(uitem)"><i class="icon-edit"></i>更新</a>  

        

[javascript] view plain copy

1. methods: {  
2.                  vupdate: function (uitem) {  
3.   
4.                    
5.                      //***************获取数据的方法2，绑定的时候传递vue实例*****************  
6.                      console.log(uitem);  
7.                      alert(uitem.UserName);  
8.                      alert(uitem.Number);  
9.                      alert(uitem.Class);  
10.                      alert(uitem.Id);  
11.   
12.                  },