专栏首页Debug客栈Laravel5.8使用LayUI实现无刷新修改排序值

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协议进行许可,转载请保留此文章链接

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React同构思想

    React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想。

    IMWeb前端团队
  • 利用 Flask 动态展示 Pyecharts 图表数据的几种方法

    本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法。

    Python编程与实战
  • js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。...

    似水的流年
  • 天了噜,为什么外链css要放在头部,js要放在尾部?

    我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后。为什么要这样子处理,今天参考一些资料好好分...

    Daotin
  • Android 远程调试 WebView 加载缓慢

    事情的缘由,因为老韩某天贱嗖嗖的说,来,你搜下那个课程,现在免费,原价好几百,请你看。

    HLQ_Struggle
  • 说一说z-index容易被忽略的那些特性

    关于z-index,每个人都会用,但大多人都不理解其真正的生效机制。最近做项目有很多用到z-index的地方,才发现以前用的一知半解,所以上网查了一些资料梳理了...

    IMWeb前端团队
  • 什么鬼,又不知道怎么命名class了

    第一,class跟id不一样,class本来就是设计用来可以重复利用的,而id才是设计唯一的(如果遵循BEM,class几乎也都是唯一的了)。

    IMWeb前端团队
  • 从smart漫谈打包

    项目构建迁移到fis体系后,打包的问题就跟着来了。打包的基本方式是:分析依赖,合并文件,解决引入。

    IMWeb前端团队
  • ke.qq.com url重构总结

    IMWeb前端团队
  • Comet——服务器推送解决方案

    Comet就是这么个词,描述技术、协议和为浏览器提供可行且可扩展的低延迟数据传输的解决方案,,,的集合。

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券