Catchadmin practical tutorial (IV) implementation of relevant functions of table components

1. Sorting function

1.1 Pure page sorting

The official website only provides the sorting function of the current page number of pure pages ：#sortable

1.1.1 Example

 public function table()
    {
        // TODO: Implement table() method.
       return $this->getTable('bonds')
                   ->header([
                      //  1.  Turn on the function of field sorting 
                       HeaderItem::label(' Number ')->prop('id')->sortable()->width(80),
                       HeaderItem::label(' Update time ')->prop('updated_at')->sortable()->width(150),
                       HeaderItem::label(' operation ')->actions([
                           Actions::delete()
                       ])
                   ])
                   ->withBind()
                   ->withApiRoute('cms/articles')
                   ->withActions([
                       Actions::create()->to('/cms/articles/detail/')
                   ])
                   ->render();
    }

1.2 Custom sort

Custom sorting function ： Mainly through API Add to address table The rising and falling values of the fields in the page request to obtain the corresponding response data

1.2.1 add to Method

catch-admin-vue project src/components/Catch/Table/mixin/operete.js Add orderChange Method

1.2.1.1 Example

    //  Field sorting 
    orderChange(column) {
      //  1.  Set the search sort field 
      const order_filed = column.prop + '_order'
      //  2.  Determine sort type 
      if (column.order === 'ascending') {
        // 3.  Set the search sort field value 
        this.queryParams[order_filed] = 'asc'
      } else if (column.order === 'descending') {
        this.queryParams[order_filed] = 'desc'
      } else {
        this.queryParams[order_filed] = ''
      }
      //  4.  Re request interface 
      this.getList()
    }

1.2.2 Add event

1.2.2.1 Mode one

stay CatchAdmin project extend/catcher/library/table/Events.php Add events in orderChange

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

        return $this;
    }

1.2.3 Use the event

 public function table()
    {
    
        // TODO: Implement table() method.
       return $this->getTable('bonds')
                   ->header([
                      // 1.  Turn on the function of field sorting 
                       HeaderItem::label(' Number ')->prop('id')->sortable()->width(80),
                       HeaderItem::label(' Update time ')->prop('updated_at')->sortable()->width(150),
                       HeaderItem::label(' operation ')->actions([
                           Actions::delete()
                       ])
                   ])
                   ->withBind()
                   // 2.  Add an event of sorting change ( Custom sort )
                   // 2.1  The way 1
                   ->orderChange()
                   // 2.2  The way 2
                   ->withEvents([
                       'sort-change' => 'orderChange'
                   ])
                  ->withApiRoute('cms/articles')
                   ->withActions([
                       Actions::create()->to('/cms/articles/detail/')
                   ])
                   ->render();
    }

1.2.3 Example

request URL Example ：/cms/articles?id_order=desc
Here, we can get the request field value in the background _order suffix , Determine whether there are sorted fields and sort them accordingly .