Debug客栈
做一个爱分享的程序猿
Debug客栈
Laravel5.8使用LayUI实现无刷新修改排序值

今天运用所学的知识,实现了对列表进行刷新修改排序值并且自动重新排序,其实就是运用一个input标签,首先先遍历出value,之后给这个标签添加一个修改的js事件,并且获得该input标签对应的ID,并获取修改的value,采用Ajax的方式传输到后台进行修改,按照后台传过来的状态码进行局部更新,其实就是刷新局部,达到无刷新修改的效果,好了 话不多说,上代码:

路由定义

Route::post('pic/sort', 'PicController@sort');     //图片无刷新排序控制器

前台HTML代码

 <thead>
    <tr>
        <th></th>
        <th>ID</th>
        <th>标题</th>
        <th>排序</th>
        <th>缩略图</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <input type="hidden" value="{{ $i=1 }}">
    @foreach($data as $value)
        <tr>
            <td>
                <div class="layui-form">
                    <input type="checkbox" value="{{ $value->id }}" lay-skin="primary" lay-filter="RandomCheckbox">
                </div>
            </td>
            {{--按序号输出数值--}}
            <td>{{ $i++ }}</td>
            <td>{{ $value->title }}</td>
            <td>
                <input type="text" onchange="change(this, {{ $value->id }});" class="layui-input" value="{{ $value->sort }}" name="sort">
            </td>
            <td>
                <img class="admin-pic-index-img" src="{{ url($value->img) }}" alt="{{ $value->title }}">
            </td>
            <td>
                <a class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius" href="/admin/pic/edit/{{ $value->id }}">
                    <i class="layui-icon layui-icon-edit"></i>
                </a>
                <button class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius" href="javascript:;" onclick="del(this, {{ $value->id }});">
                    <i class="layui-icon layui-icon-delete"></i>
                </button>
            </td>
        </tr>
    @endforeach
    </tbody>
</table>

其中就是添加了一个input标签,获取数据库中对应排序字段,之后进行无刷先排序。

前台JS代码

/**
 * 无刷新修改排序值
 */
function change(obj, id){
    //获取id
    var id = id;
    //获取用户改变的值
    var val = $(obj).val();
    //判断获取值是否为证书并且获取值是否操作
    if(!isNaN(val)){
        $.post(
            /*请求地址*/
            '/admin/pic/sort',
            /*请求数值 方式  及 CSRF认证*/
            {'id':id, 'val':val, '_method':'post', '_token':'{{ csrf_token() }}'},
            /*请求回调方法*/
            function(res){
                if(res.code > 0 ){
                    layer.alert(res.msg,{icon:2})
                }else{
                    layer.msg(res.msg);
                    //页面自动刷新
                    setTimeout(function () {
                        window.location.reload();
                    },1000);
                }
            },
            'json'
        );
    }else{
        layer.msg("格式有误,请重新输入数值");
        setTimeout(function () {
            window.location.reload();
        },1000);
    }
}

后端首页显示及无刷新操作代码

/**
 * 图片加载首页
 * @return view
 */
public function index(){
    $data = DB::select("select * from pic where status=0 order by sort desc");
    //加载用户管理界面
    return view("admin.pic.index")->with('data',$data);
}

/**
 * 无刷新排序操作
 * @param Request $request
 */
public function sort(Request $request){
    $id  = $request->input('id');
    $val = $request->input('val');
    $db = DB::update("update pic set sort=$val where id=$id");
    if($db){
        exit(json_encode(array('code'=>0, 'msg'=>'排序修改成功')));
    }else{
        exit(json_encode(array('code'=>1, 'msg'=>'排序修改异常')));
    }
}

好了,最终就是实现了对页面的无刷新修改排序功能。

赞赏
本文链接:https://www.debuginn.cn/2192.html
本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可,转载请保留文章链接
Debug客栈  |  Debug客栈引导页  |  Debug客栈交流群  |  赞助本站  |  博主微博  |  音乐下载器
首页      技术文章      PHP全栈      Laravel5.8使用LayUI实现无刷新修改排序值

发表评论

textsms
account_circle
email

Debug客栈

Laravel5.8使用LayUI实现无刷新修改排序值
今天运用所学的知识,实现了对列表进行刷新修改排序值并且自动重新排序,其实就是运用一个input标签,首先先遍历出value,之后给这个标签添加一个修改的js事件,并且获得该input标签对应…
扫描二维码继续阅读
2019-05-19