Vue.js 表格查询与更新

Vue.js 实现表格数据绑定

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

[javascript]view
plain copy

var vm = new Vue({  

              el: "#table_content",  

              data: {  

                  ulist: []  

              },  

              methods: {  

                  getdata: function (_keycontent) {  //查询数据  

                      //先把本地对象缓存下来  

                      var self = this;  

                      $.get("GetUsersHandler.ashx", { keycontent: _keycontent, page: currentPage }, function (_result) {  

                          var jsobobj = JSON.parse(_result);  

                          self.ulist = jsobobj;  

                      });  

                  }           

              },  

              created: function () {  //初始化事件里边去调用查询方法  

                  this.getdata("");  

              }  

          });

使用V-for解析数据

[html]view
plain copy

<tr v-for="uitem in ulist">  

           <td class="highlight">  

               <div class="success"></div>  

               <a href="#">{{uitem.Id}}</a>  

           </td>  

           <td class="hidden-phone">{{uitem.UserName}}</td>  

           <td>  

               <span class="label label-success">{{uitem.Number}}</span>  

           </td>  

           <td style="width: 200px">  

               <a href="#" class="btn mini purple"><i class="icon-edit"></i>更新</a>  

               <a href="#" class="btn mini black"><i class="icon-trash"></i>删除</a>  

               <a href="#" class="btn mini blue"><i class="icon-share"></i>分享</a>  

           </td>  

       </tr>

效果：

Vue.js实现更新

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

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

[html]view
plain copy

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

[javascript]view
plain copy

methods: {  

                  vupdate: function (_my) {  

                      //***************获取数据的方法1，使用jquery获取*****************  

                      var needtr = $(_my.target).parent().parent();  

                      console.log(_my.target);  

                      alert(needtr.find("td").eq(1).html());  

                      alert(needtr.find("td").eq(2).html());  

                  },

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

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

[html]view
plain copy

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

[javascript]view
plain copy

methods: {  

                 vupdate: function (uitem) {  

                     //***************获取数据的方法2，绑定的时候传递vue实例*****************  

                     console.log(uitem);  

                     alert(uitem.UserName);  

                     alert(uitem.Number);  

                     alert(uitem.Class);  

                     alert(uitem.Id);  

                 },

Vue.js 表格查询与更新

相关推荐