美文网首页PHP经验分享
laravel-admin列表页实现选项卡切换

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

作者: 杏花_我不想活了 | 来源:发表于2021-06-09 14:27 被阅读0次
    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>
    

    相关文章

      网友评论

        本文标题:laravel-admin列表页实现选项卡切换

        本文链接:https://www.haomeiwen.com/subject/chhosltx.html