laravel-admin列表页实现选项卡切换

image.png

如图所示,根据切换tab显示不同状态的订单

  1. 新增一个EnGird继承基类Grid
<?php

namespace App\Http\Admin\Extensions\Grid;

use \Encore\Admin\Grid;

class EnGrid  extends EnGrid
{
    /**
     * Output as string.
     *
     * @return string
     */
    public function __toString()
    {
        return $this->render();
    }
}
  1. 简单修改你的列表页代码
    public function index()
    {
        return Admin::content(function (Content $content) {
            $content->header($this->title);
            $content->description('列表');
            $content->body($this->grid());
        });
    }

    protected function grid()
    {
        $tab = new Tab();
        $tab->add('全部', $this->data(0, 'zero'));
        $tab->add('待处理', $this->data(1, 'one'));
        $tab->add('处理中', $this->data(2, 'two'));
        $tab->add('处理完成', $this->data([3, 4], 'three'));

        return $tab;
    }

    private function data($where, $pageName)
    {
        $grid = new EnGrid(new Model);
        //$grid = new Grid(new Model);

         //设置页名
        $grid->setName($pageName);

         //设置批量操作
        $grid->disableBatchActions(false);
        $grid->header(function (){
             $doughnut = view('admin.taxcombine');
             return new Box('', $doughnut);
        });

        if($where) {
            if(is_array($where)) {
                $grid->model()->whereIn('status', $where);
            }else{
                $grid->model()->where('status', $where);
            }
        }
        $grid->column('id', __('Id'));
        $grid->expandFilter();

        return $grid;
        // return $grid->render();
    }

问题1:筛选和model查询好像不兼容,点击筛选不会展开,需要展开筛选;
问题2:分页问题,需新增pagename $grid->setName($pageName);;但是在其他页点击下一页会跳到第一个tab去;
问题3:无法新增自定义操作和批量操作; 这里简单实现一下,没找到解决办法

 //设置批量操作
$grid->disableBatchActions(false);
$grid->header(function (){
       $doughnut = view('admin.taxcombine');
       return new Box('', $doughnut);
});
//view 内中使用的类选择器查看网页elements改动,为pageName+xxxx
<div>
    <input type="submit" class="btn btn-primary" id="combine" value="合并打款">
    <script>
        window.onload = function(){
            $('.4-grid-select-all-btn').parent().remove();
        }
        $('#combine').on("click", function () {
            var ids = [];
            $('.icheckbox_minimal-blue.checked').each(function (index,item){
                if($(this).attr('aria-checked') === 'true'){
                   ids.push($(this).children(".4-grid-row-checkbox").attr('data-id'))
                }
            })
            console.log(ids)
            $.ajax({
                method: 'GET',
                url: '{{ admin_base_path("hr/tax/combine") }}',
                data: {
                    ids: ids,
                },
                success: function (data) {
                    if (data.status == 1) {
                        alert('操作成功');
                        location.reload();
                        return;
                    }else{
                        alert(data.msg)
                        location.reload();
                        return
                    }
                }
            });
        })
    </script>
</div>

推荐阅读更多精彩内容