VUE增删改查

<script type="text/javascript">
    //取数据
    $.ajax({
        url:"/",
        type:"post",
        data:{
            current:1,
            size:3
        },
        dataType:"json",
        success:function(page){
            
            //渲染
            var studentTableVue = new Vue({
                el:"#goodsimgsTables",
                data:{
                    page:page
                },
                methods:{
                    //查询
                    findPage:function(current,size){
                        $.ajax({
                            url:"/",
                            data:{
                                current:current,
                                size:size
                            },
                            success:function(page1){
                                //刷新列表
                                studentTableVue.$data.page=page1;
                                
                            }
                        });
                    },
                    //删除
                    del:function(id){
                        if(confirm("确认要删除id为"+[id]+"的数据吗?")){
                        
                            $.ajax({
                                  url:"/",
                                  type:"POST",
                                  data:{id:id},
                                  dataType:"json",
                                  success:function(){
                                          alert("删除成功");
                                      }
                                      
                                  
                              });
                          }
                        },
                        //批量删除
                        /* delAll:function(id){
                            
                            var id = "";
                              $(".ck:checked").each(function(){
                                  ids+=","+this.value;
                              });
                            if(confirm("确认要删除id为"+[ids]+"的数据吗?")){
                                
                                $.ajax({
                                      url:"/brands/rest/del",
                                      type:"POST",
                                      data:{id:ids},
                                      dataType:"json",
                                      success:function(){
                                              alert("删除成功");
                                      }
                                          
                                      
                                  });
                              }
                            }, */
                    //修改点击时间
                     toEdit:function(brands){
                        var htmlobj = $.ajax({
                            url:"${ctx}/",
                            async : false
                        });
                        // 弹出对话框
                            bootbox.dialog({
                            message : htmlobj.responseText,// 对于文本型的回复,我们用responseText属性取出回复的数据
                            title : "修改用户",
                            buttons : {
                                successBtn : {
                                    label : "确认",
                                    className : "btn-warning",
                                    callback : function() {
                                        // ajax请求添加
                                        $.ajax({
                                            url:"/",
                                            data:JSON.stringify(updateGoodsForm.$data.brands),//用json方法转一下
                                            type:"post",
                                            //与spring mvc想呼应,必须加上,后台必须配置@RequestBody
                                            contentType : "application/json",
                                            success:function() {
                                                alert("修改成功!");
                                                window.location.href="/";
                                            }
                                        
                                        
                                        });
                                    }
                                }
                            }
                        });
                            //回显
                            var updateGoodsForm= new Vue({
                                el:"#addGoodsPicForm",
                                data:{
                                    brands:brands
                                }
                            });
                    }
                }
            });
        }
    });

    
function toAdd(){
    
    var random = Math.random();
    var htmlobj = $.ajax({
        url:"${ctx}/html/?"+random,
        async : false
    });
    // 弹出对话框
        bootbox.dialog({
        message : htmlobj.responseText,// 对于文本型的回复,我们用responseText属性取出回复的数据
        title : "添加用户",
        buttons : {
            successBtn : {
                label : "确认",
                className : "btn-warning",
                callback : function() {
                    
                    // ajax请求添加
                    $.ajax({
                        url:"/",
                        data:JSON.stringify(addGoodsForm.$data.brands),//用json方法转一下
                        type:"post",
                        //与spring mvc想呼应,必须加上,后台必须配置@RequestBody
                        contentType : "application/json",
                        success:function() {
                            alert("添加成功!");
                            window.location.href="/";
                        }
                    
                    
                    });
                    
                    }
                    }
                }
        
        
        });
        //渲染
        var addGoodsForm= new Vue({
            el:"#addGoodsPicForm",
            data:{
                brands:{}
            }
        });
        
}
        
    </script>

猜你喜欢

转载自www.cnblogs.com/bandu/p/10022497.html