CatchAdmin实战教程(四)Table组件相关功能实现

1. 排序功能

1.1 纯页面排序

官方站点仅提供了纯页面当前页数的排序功能：#sortable

1.1.1 示例

 public function table()
    {
        // TODO: Implement table() method.
       return $this->getTable('bonds')
                   ->header([
                      //  1. 开启字段排序的功能
                       HeaderItem::label('编号')->prop('id')->sortable()->width(80),
                       HeaderItem::label('更新时间')->prop('updated_at')->sortable()->width(150),
                       HeaderItem::label('操作')->actions([
                           Actions::delete()
                       ])
                   ])
                   ->withBind()
                   ->withApiRoute('cms/articles')
                   ->withActions([
                       Actions::create()->to('/cms/articles/detail/')
                   ])
                   ->render();
    }

1.2 自定义排序

自定义排序的功能： 主要是通过在API地址上添加table页面中的字段的升降值请求获取相应的响应数据

1.2.1 添加Method

catch-admin-vue项目src/components/Catch/Table/mixin/operete.js中添加orderChange方法

1.2.1.1 示例

    // 字段排序
    orderChange(column) {
      //  1. 设置搜索排序字段
      const order_filed = column.prop + '_order'
      //  2. 判断排序类型
      if (column.order === 'ascending') {
        // 3. 设置搜索排序字段值
        this.queryParams[order_filed] = 'asc'
      } else if (column.order === 'descending') {
        this.queryParams[order_filed] = 'desc'
      } else {
        this.queryParams[order_filed] = ''
      }
      //  4. 重新请求接口
      this.getList()
    }

1.2.2 添加事件

1.2.2.1 方式一

在CatchAdmin项目extend/catcher/library/table/Events.php中添加事件orderChange

    /** * @note: 排序 * @return mixed * @time: 2022-07-25 14:57 */
    public function orderChange()
    {
    
        $this->appendEvents([
            'sort-change' => 'orderChange'
        ]);

        return $this;
    }

1.2.3 使用事件

 public function table()
    {
    
        // TODO: Implement table() method.
       return $this->getTable('bonds')
                   ->header([
                      // 1. 开启字段排序的功能
                       HeaderItem::label('编号')->prop('id')->sortable()->width(80),
                       HeaderItem::label('更新时间')->prop('updated_at')->sortable()->width(150),
                       HeaderItem::label('操作')->actions([
                           Actions::delete()
                       ])
                   ])
                   ->withBind()
                   // 2. 新增排序改变的事件(自定义排序)
                   // 2.1 方式1
                   ->orderChange()
                   // 2.2 方式2
                   ->withEvents([
                       'sort-change' => 'orderChange'
                   ])
                  ->withApiRoute('cms/articles')
                   ->withActions([
                       Actions::create()->to('/cms/articles/detail/')
                   ])
                   ->render();
    }

1.2.3 示例

请求URL示例：/cms/articles?id_order=desc
这里我们后台可以通过获取请求字段值的_order后缀，判断是否存在排序的字段进行相应的排序处理。