腾讯云优惠券

呆错后台管理框架表格排序开发实例

人气:709 更新:2022-07-07
在2.1版本前,呆错的JS基础包集成了sorttable这个拖拽排序,在2.1.9版本时增加了按箭头上下操作排序的方式,具体实现方法如下

第一步:定义表格的列属性,即下方的($columns),data-formatter定义的回调JS函数为生成的箭头图标样式,实例如下:

'term_order' => [
    'order'           => 1,
    'type'            => 'number',
    'value'           => intval($data['term_order']),
    'data-filter'     => false,
    'data-visible'    => true,
    'data-width'      => 80,
    'data-sortable'   => true,
    'data-sort-name'  => 'op_order',
    'data-order'      => 'asc',
    'data-formatter'  => 'daicuo.admin.table.sortFormatter',
],

第二步:定义后端排序固定入口(sort),如admin/controll/menu的sort实例

public function sort()
{
    $id = input('get.id/d',0);
    if(input('type') == 'up'){
        $result = dbUpdateInc('common/Op', ['op_id'=>['eq',$id]], 'op_order', 1);
    }else{
        $result = dbUpdateDec('common/Op', ['op_id'=>['eq',$id]], 'op_order', 1);
    }
    if($result){
        $this->success(lang('success'));
    }else{
        $this->error(lang('fail'));
    }
}

第三步:展示数据默认请按权重值的倒序展示(值越大越靠前),即用DcBuildTable函数生成表格时传递的排序字段与排序方式。

{:DcBuildTable([
    'data-name'               => 'admin/menu/index',
    'data-escape'             => false,
    'data-toggle'             => 'bootstrap-table',
    'data-url'                => DcUrl('admin/menu/index', $query),
    'data-unique-id'          => 'term_id',
    'data-id-field'           => 'term_id',
    'data-select-item-name'   => 'id[]',
    'data-query-params-type'  => 'params',
    'data-query-params'       => 'daicuo.table.query',
    'data-sort-name'          => 'term_order',
    'data-sort-order'         => 'desc',
    'data-pagination'         => false,
    'columns'                 => $columns,
])}

箭头排序展示.png