3、后台分类Ajax异步修改排序

1、修改index.balde.php

找到有关排序的语句，使用onchang(),调用changeOrder()方法，同时将该行的cate_id，以及输入的内容作为参数进行传递

<input type="text" οnchange="changeOrder(this,{{$v->cate_id}})" value="{{$v->cate_order}}">

在JS中添加方法changeOrder(),该方法通过post获取admin/cate/changorder页面

并将token值，cata_id以及cate_order向后端传递

<!--搜索结果页面 列表 结束-->
    <script>
        function changeOrder(obj,cate_id) {
            var cate_order=$(obj).val();
            $.post("{{url('admin/cate/changeorder')}}",{'_token':'{{csrf_token()}}','cate_id':cate_id,'cate_order':cate_order},function(data){
                alert(data.msg);     
            });
        }
    </script>

2、添加路由

Route::post('cate/changeorder','CategoryController@changeOrder');

3、在CategoryController.php中添加changeOrder()方法

 public function changeOrder()
   {
          $input = Input::all(); //获取前端传递的数据
          $cate = Category::find($input['cate_id']); //根据cate_id查询对应记录
          $cate->cate_order = $input['cate_order'];   //对数据库中的cata_id进行赋值
          $re = $cate->save();//同步数据到数据库
          //判断是否更新成功，返回一个$data数组，包含status和msg信息
          //$re=false;测试失败效果
          if($re) {
              $data = [
              'status'=>0,
              'msg'=>'分类排序更新成功!'
              ];
          }else{
              $data = [
              'status'=>1,
              'msg'=>'分类排序更新失败!'
              ];
          }
          return $data;
   }

4、修改模型Category.php的tree()方法

获取数据信息时候按照cate_id进行排序

public  static function tree()
    {
        $categorys = Category::orderBy('cate_order','asc')->get();//获取blog_category表数据信息，根据该字段cate_order进行升序排列
        //dd($categorys); //测试打印获得的数据
        return $data=(new Category)->getTree($categorys,'cate_name','cate_id','cate_pid');
    }

验证：

修改数据后，点击空白处，出现弹框

 

4、优化弹框

layer是一款口碑极佳的web弹层组件

官网下载地址: http://layer.layui.com

(1)解压缩，并将layer放到resources/org目录下

在layouts/admin.blade.php中引入layer.js

<script type="text/javascript" src="{{asset('resources/org/layer/layer.js')}}"></script>

(2)修改index.blade.php，将alert(data.msg)改为如下:

//alert(data.msg);
 if(data.status==0){
    layer.msg(data.msg, {icon: 6});
 }else{
    layer.msg(data.msg, {icon: 5});
 }

再次验证：

问题总结：

(1)报token值错误,csrf的认证问题

 (2)js语法的错误，token值没有用引号引起来 {'_token':'{{csrf_token()}}'}

 

转载于:https://www.cnblogs.com/guduoer/p/6365093.html