Dcat Admin列表页增加列表切换功能

牛铁柱

场景需求：

1，在列表页实现切换按钮显示不同的数据列表。
2，不新增页面。
3，不重写列表渲染方法。

最终实现的效果如下：

演示网址：crm.demo.nx.tt

牛铁柱

思路

1，这个切换效果，UI上最方面实现的就是直接使用dcat自带的tab选项卡组件。文档见：http://www.dcatadmin.com/docs/2.x/widgets-tab.html

2，我们只需要实现切换选项，然后切换不同的查询就可以。比如：

切换到选项一
$grid->model()->whereIn(查询条件一);

切换到选项二
$grid->model()->whereIn(查询条件二);

切换到选项三
$grid->model()->whereIn(查询条件三);

3，我们如果直接把查询条件写在tab里面是不合适的。因为页面加载完成后，tab里面的每个选项事实上是全部加载完成的。无论怎么切换都达不到我们想要的结果。为了点击切换后，页面能重新加载进来，我们使用链接跳转即可。

tab跳转链接的方法如下：

$tab->addLink('跳转链接', 'http://xxx');

但如果真的跳转到另外一个页面，那又得重新写一个新的页面，和我们的初衷不符，我们需要的是在使用同一个页面，同一个模型，什么都不变的情况下，只是切换一下查询条件。

所以最终想到的办法是，使用跳转链接，但是我们还是跳转在当前页面，不同的选项卡只是参数不同。然后利用参数来判断查询条件和默认选项卡。

开始干

牛铁柱

第一步

增加tab选项卡。并且给每个选项卡设置链接，代码如下：

            $grid->header(function () {
                $tab = Tab::make();
                
                $tab->addLink('所有客户', '?source_id=0',true);
                $tab->addLink('我的客户', '?source_id=1');
                $tab->addLink('分享给我', '?source_id=2');
                return $tab;
            });

看到上面的代码，大家应该知道什么意思了。通过浏览器的参数来判断选项卡和查询条件。

现在我们可以试着访问

http://网址/xxx?source_id=0
http://网址/xxx?source_id=1
http://网址/xxx?source_id=2

页面的确是重新渲染了。

然后现在我们只需要获取浏览器的参数，然后判断不同的查询条件就可以。代码如下

构造方法获取浏览器参数

    public function __construct(Request $request)
    {
        $this->source_id = $request->source_id;
        return $this;
    }

然后在列表方法里使用

            if ($this->source_id == 0) {
                $grid->model()->where(查询条件1);
            } elseif ($this->source_id == 2) {
               $grid->model()->where(查询条件2);
            } else {
                $grid->model()->where(其他查询);
            }

基本已经完成了。

我们还需要完善一下选项卡的默认显示选项,加个判断即可

            $grid->header(function () {
                $tab = Tab::make();

                $tab->addLink('我的客户', '?source_id=1',$this->source_id==1 ? true : false);
                $tab->addLink('分享给我', '?source_id=2',$this->source_id==2 ? true : false);
                $tab->addLink('公海客户', '?source_id=3',$this->source_id==3 ? true : false);
                return $tab;
            });

完毕，收工

本网站的服务器由提供