fastadmin表格多tab选项卡组合筛选

控制器 Controller

php 复制代码

<?php

    namespace app\admin\controller\good;

    use app\common\controller\Backend;
    use think\Request;
    use think\Config;

    /**
     * 商品
     *
     * @icon fa fa-circle-o
     */
    class Good extends Backend
    {

        /**
         * Good模型对象
         * @var \app\admin\model\good\Good
         */
        protected $model = null;

        public function _initialize()
        {
            parent::_initialize();
            $this->model = new \app\admin\model\good\Good;

            $this->assign("dateFilter", $this->model->getDateFilter());
            $this->assignconfig("dateFilter", $this->model->getDateFilter());

            $this->assign("statusList", $this->model->getStatusList());
            $this->assignconfig("statusList", $this->model->getStatusList());
        }


        /**
         * 默认生成的控制器所继承的父类中有index/add/edit/del/multi五个基础方法、destroy/restore/recyclebin三个回收站方法
         * 因此在当前控制器中可不用编写增删改查的代码,除非需要自己控制这部分逻辑
         * 需要将application/admin/library/traits/Backend.php中对应的方法复制到当前控制器,然后进行修改
         */

        public function index()
        {
            //当前是否为关联查询
            $this->relationSearch = true;
            //设置过滤方法
            $this->request->filter(['strip_tags', 'trim']);
            if ($this->request->isAjax()) {
                $cusFilter = $this->request->get("cusfilter", '');//获取传递的参数
                $cusFilter = (array)json_decode($cusFilter, true);
                list($where, $sort, $order, $offset, $limit) = $this->buildparams();
                if (isset($cusFilter['statusfilter'])) {//如果参数不是空的 增加query的条件
                    $this->model
                        ->where('good.status', $cusFilter['statusfilter'])
                        ->whereTime("good.createtime", $cusFilter['datefilter']);
                }
                $total = $this->model
                    ->with(['category'])
                    ->where($where)
                    ->order($sort, $order)
                    ->count();
                if (isset($cusFilter['statusfilter'])) {
                    $this->model
                        ->where('good.status', $cusFilter['statusfilter'])
                        ->whereTime("good.createtime", $cusFilter['datefilter']);
                }
                $list = $this->model
                    ->with(['category'])
                    ->where($where)
                    ->order($sort, $order)
                    ->limit($offset, $limit)
                    ->select();
                foreach ($list as $row) {
                    $row->image = Config::get('url_domain_root') . $row['image'];
                }
                $list = collection($list)->toArray();
                $result = array("total" => $total, "rows" => $list);
                return json($result);
            }
            return $this->view->fetch();
        }

        public function index111()
        {
            //当前是否为关联查询
            $this->relationSearch = true;
            //设置过滤方法
            $this->request->filter(['strip_tags', 'trim']);
            if ($this->request->isAjax()) {
                //获取filter 这里的情况是 由于筛选提交的值与字段值冲突 都为createtime
                //这里将filter 拆解开 重新组装
                $filter = $this->request->get("filter", '');
                $op = $this->request->get("op", '', 'trim');
                $filter = (array)json_decode($filter, true);
                $op = (array)json_decode($op, true);
                $dateFilter = "";//将筛选的值放在这里
                if (isset($filter['createtime'])) {
                    $dateFilter = $filter['createtime'];
                    unset($filter['createtime']);
                    unset($op['createtime']);
                    //去掉了createtime 的filter 重新组织到 request中 交给下面 buildparams()方法去构建query 的条件
                    Request::instance()->get(['filter' => json_encode($filter)]);
                    Request::instance()->get(['op' => json_encode($op)]);
                }
                //如果和字段不冲突就玩去不需要 折腾request 见示例2
                list($where, $sort, $order, $offset, $limit) = $this->buildparams();
                $total = $this->model
                    ->with(['category'])
                    ->where($where)
                    ->whereTime("good.createtime", $dateFilter) //tp5的 时间区间 假设这里 变量的值为 week 最后执行的sql WHERE  `createtime` BETWEEN 1593532800 AND 1596211200
                    ->order($sort, $order)
                    ->count();

                $list = $this->model
                    ->with(['category'])
                    ->where($where)
                    ->order($sort, $order)
                    ->whereTime("good.createtime", $dateFilter)
                    ->limit($offset, $limit)
                    ->select();
                foreach ($list as $row) {
                    $row->image = Config::get('url_domain_root') . $row['image'];
                }
                $list = collection($list)->toArray();
                $result = array("total" => $total, "rows" => $list);
                return json($result);
            }
            return $this->view->fetch();
        }


    }

模型 Model

php 复制代码

<?php

    namespace app\admin\model\good;

    use think\Model;


    class Good extends Model
    {


        // 表名
        protected $name = 'good';

        // 自动写入时间戳字段
        protected $autoWriteTimestamp = 'integer';

        // 定义时间戳字段名
        protected $createTime = 'createtime';
        protected $updateTime = 'updatetime';
        protected $deleteTime = false;

        // 追加属性
        protected $append = [
            'status_text'
        ];


        public function getStatusList()
        {
            return ['0' => __('Status  0'), '1' => __('Status  1')];
        }

        //获取器维护追加字段 `status_text`的值
        public function getStatusTextAttr($value, $data)
        {
            $value = $value ? $value : (isset($data['status']) ? $data['status'] : '');
            $list = $this->getStatusList();
            return isset($list[$value]) ? $list[$value] : '';
        }

        public function getDateFilter(){
            return array('today'=>'今天','week'=>'本周','month'=>'本月','year'=>'今年');
        }


        public function category()
        {
            return $this->belongsTo('app\admin\model\Category', 'category_id', 'id', [], 'LEFT')->setEagerlyType(0);
        }


    }

模版页面 View

php 复制代码

<div class="panel panel-default panel-intro">

    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs"> <!-- data-filed 就没有意义了-->
            <li class="active">
                <a href="#t-all" data-toggle="tab">{:__('All')}</a>
            </li>
                                  {foreach name="dateFilter" item="vo" key="i"}
                                  {foreach name="statusList" item="row" key="j"}
            <li><a href="#t-{$vo}-{$row}" data-dateFilter="{$i}" data-statusfilter="{$j}" data-toggle="tab">{$vo}-{$row}</a></li>
                                  <!--这里对应的删除data-value 设置了data-dateFilter data-statusfilter-->
                                  {/foreach}
                                  {/foreach}
        </ul>
    </div>

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i
                                class="fa fa-refresh"></i> </a>
                        <a href="javascript:;"
                           class="btn btn-success btn-add {:$auth->check('good/good/add')?'':'hide'}"
                           title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;"
                           class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('good/good/edit')?'':'hide'}"
                           title="{:__('Edit')}"><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;"
                           class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('good/good/del')?'':'hide'}"
                           title="{:__('Delete')}"><i class="fa fa-trash"></i> {:__('Delete')}</a>

                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('good/good/edit')}"
                           data-operate-del="{:$auth->check('good/good/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

JS

javascript 复制代码

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'good/good/index' + location.search,
                    add_url: 'good/good/add',
                    edit_url: 'good/good/edit',
                    del_url: 'good/good/del',
                    multi_url: 'good/good/multi',
                    import_url: 'good/good/import',
                    table: 'good',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'name', title: __('Name')},
                        {field: 'weight', title: __('Weight')},
                        {
                            field: 'status',
                            title: __('状态'),
                            searchList: {"0": __('Status  0'), "1": __('Status  1')},
                            formatter: Table.api.formatter.status
                        },
                        {field: 'createtime', title: __('发布时间'), formatter: Table.api.formatter.datetime},
                        {
                            field: 'updatetime',
                            title: __('Updatetime'),
                            operate: 'RANGE',
                            addclass: 'datetimerange',
                            autocomplete: false,
                            formatter: Table.api.formatter.datetime
                        },
                        {
                            field: 'operate',
                            title: __('Operate'),
                            table: table,
                            events: Table.api.events.operate,
                            formatter: Table.api.formatter.operate
                        }
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
            //为TAB绑定事件
            $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                let tab = $(this);
                let options = table.bootstrapTable("getOptions");
                options.pageNumber = 1;
                options.queryParams = function (params) {
                    let cusfilter = {};
                    cusfilter['datefilter'] = tab.data("datefilter")
                    cusfilter['statusfilter'] = tab.data("statusfilter")
                    params.cusfilter = JSON.stringify(cusfilter);
                    return params;
                }
                table.bootstrapTable('refresh', {})//刷新表格
                return false
            })
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});