zoukankan      html  css  js  c++  java
  • 即点即改效果

     本示例代码是在laravel框架中进行操作的,使用ajax将修改后的数据发送到后端实现即点即改的效果

    html代码示例

    要修改的那行数据

     <td><span>{{$val->username}}</span><input type="text" class="input-text" value="{{$val->username}}" style="display: none" where="{{$val->id}}"></td>
    script里面的代码
    <script>
        //生成一个token与csrf
        const _token="{{csrf_token()}}"
        $(function () {
    
    
            $('td span').click(function () {
                // 把自己隐藏起来
                $(this).hide();
                // 让后面的文本框显示出来
                $(this).next('input').show();
                // 让文本框自动获取焦点
                $(this).next('input').focus();
                // 把自己的值放入文本框中
                $(this).next('input').val($(this).html());
            })
    
            $('td input[type="text"]').blur(function () {
                // 让自己隐藏
                $(this).hide();
                // 让span标签显示出来
                $(this).prev().show();
                // 获取当前的值
                let username=$(this).val()
                // 取出原来的值
                let val=$(this).prev().html()
                // 获取当前的用户ID
                let id=$(this).attr('where');
                // 判断值是否被修改过
                if(username!==val){
                    // 发送ajax
                    $.ajax({
                        type:'PUT',
                        url:"{{route('admin.user.username')}}",
                        data:{
                            username:username,
                            id:id,
                            _token
                        },
                    }).then(({msg,code})=>{
                        if(code==200){
                            layer.msg('修改成功!!', {time:1000,icon: 1},()=>{
                                $(this).prev().html(username)
                            });
                        }
                    })
                }
            })
    
        })
    </script>
    
    

    后端控制器代码
        //即点即改
        public function username(Request $request)
        {
            $id=$request->get('id');
            $username=$request->get('username');
            User::where('id',$id)->update(['username'=>$username]);
            return ['code'=>200,'msg'=>'修改成功'];
    
        }
    
    
    
     
     
  • 相关阅读:
    Oracle to_char格式化函数
    电脑快捷键大全
    Failed to create the Java Virtual Machine (Myeclipse或者eclipse启动报错)
    Java 面试题
    UVA1108 Mining Your Own Business
    无向图的连通性
    [NOI Online #2 提高组]子序列问题
    [NOI Online #3 提高组]优秀子序列
    POJ2430 Lazy Cows
    UVA1633 Dyslexic Gollum
  • 原文地址:https://www.cnblogs.com/cyxng/p/14537392.html
Copyright © 2011-2022 走看看