laravel-admin实战做个简单的客户管理——数据表格（列表）手记

admin | 2020年12月27日 | 学习偶记 | 评论已关闭 | 3173

表格列表效果

自定义脚部、头部。文档写的一目了然，不过比较简单，我做了一些小小的提升，将例子中的单个box修改成展示3个box然后return即可，其实代码很简单。相应文档：https://laravel-admin.org/docs/zh/1.x/model-grid-header-footer

3个box代码

行内编辑相关文档：https://laravel-admin.org/docs/zh/1.x/model-grid-inline-edit
列过滤相关文档：https://laravel-admin.org/docs/zh/1.x/model-grid-column-filter
列表合计相关文档：https://laravel-admin.org/docs/zh/1.x/model-grid-total-row

以下是自动生成的表格列表修改后的代码，其中html因为显示问题，在上面截图。

protected function grid() {


        $grid = new Grid(new FrontCustomer());

        //头部用户类型图表

        $grid->footer(function ($query) {

            //用户分类表

            $user_type = $query->select(DB::raw('count(user_type) as count, user_type'))

                ->groupBy('user_type')->get()->pluck('count', 'user_type')->toArray();

            $user_type_chart = view('admin.frontcustomer.usertypechart', compact('user_type'));

            $box_type = new Box('用户分类比例', $user_type_chart);

            //$box_type->removable(); //将Box组件设置为可关闭。

            //$box_type->collapsable(); //将Box组件设置为可展开和收起。

            $box_type->style('warning'); //设置Box组件的样式，可填值为primary,info,danger,warning,success,default。

            $box_type->solid(); //为Box组件添加边框。

            //$box_type->scrollable(); //将Box组件设置为有滚动条。

            //冻结比例图表

            $locked = $query->select(DB::raw('count(locked) as count, locked'))

                ->groupBy('locked')->get()->pluck('count', 'locked')->toArray();

            $locked_chart = view('admin.frontcustomer.userlockedchart', compact('locked'));

            $box_locked = new Box('冻结比例', $locked_chart);

            $box_locked->style('success'); //设置Box组件的样式，可填值为primary,info,danger,warning,success,default。

            $box_locked->solid(); //为Box组件添加边框。

            //资金使用表
            $all_amount = (float)$query->sum('amount');

            $use_amount = (float)$query->sum('consumed');

            $vaild_amount = $all_amount - $use_amount;

            $amount[] = (string)$vaild_amount; //可用资金

            $amount[] = (string)$use_amount; //已使用资金
            $amount_chart = view('admin.frontcustomer.useramountchart', compact('amount'));

            $box_amount = new Box('总资金('.$all_amount.')使用比例', $amount_chart);

            $box_amount->style('danger'); //设置Box组件的样式，可填值为primary,info,danger,warning,success,default。

            $box_amount->solid(); //为Box组件添加边框。
            $html = 无法显示，可以参考上面的截图。

            return $html;

        });

$grid->column('id', __('Id'))->sortable()->totalRow('合计'); //加过滤器，方便查询 $grid->column('user_name', __('User name'))->filter('like'); //类型多选查询 $grid->column('user_type', __('User type'))->filter([ 'mobile' => '手机', 'email' => '邮箱', 'wechat' => '微信' ])->using(['mobile' => '手机', 'email' => '邮箱', 'wechat' => '微信']); $grid->column('user_ip', __('User ip')); $grid->column('login_cnt', __('Login cnt')); // 设置text、color、和存储值,注意，这里的值 on 是 1 off 是 0 $states = [ 'off' => ['value' => 0, 'text' => '正常', 'color' => 'primary'], 'on' => ['value' => 1, 'text' => '冻结', 'color' => 'danger'], ]; $grid->column('locked')->switch($states); //范围过滤查询 $grid->column('amount', __('Amount'))->filter('range')->totalRow(function ($amount) { return "预存 {$amount} 元"; }); $grid->column('consumed', __('Consumed'))->filter('range')->totalRow(function ($amount) { return "消费 {$amount} 元"; }); $grid->column('created_at', __('Created at')); $grid->column('updated_at', __('Updated at')); //excel文件,为了个性化表格，将model传送过去。 $grid->exporter(new ExcelFile(new FrontCustomer())); return $grid; }