Vue.js 表格查询与更新

           Vue.js 实现表格数据绑定

            

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

  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解析数据                  

             

                        

                            


                            {{uitem.Id}}

                        

                        {{uitem.UserName}}

                        
                            {{uitem.Number}}

                        

                        
                            更新
                            删除
                            分享
                        

                    

              效果：            

        

          Vue.js实现更新

                    

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

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

           

 更新

                 

  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绑定的数据                          

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

                           

   更新

        

   methods: {
                    vupdate: function (uitem) {

                    
                        //***************获取数据的方法2，绑定的时候传递vue实例*****************
                        console.log(uitem);
                        alert(uitem.UserName);
                        alert(uitem.Number);
                        alert(uitem.Class);
                        alert(uitem.Id);

                    },