fastadmin tab选项卡 学习 thinkphp5后台模板

 地址 

https://aaa.net/admin/category?ref=addtabshttps://aaa.net/admin/category?ref=addtabs语言包

D:\phpstudy_pro\WWW\24.comamazonerp\amazonerp\application\admin\lang\zh-cn.php

'Config tips'                                           => '可以在此增改系统的变量和分组,

也可以自定义分组和变量,如果需要删除请从数据库中删除',

D:\phpstudy_pro\WWW\24.comamazonerp\amazonerp\application\admin\controller\Category.php

class Category extends Backend
{

    protected $model = null;
    protected $categorylist = [];
    protected $noNeedRight = ['selectpage'];

    public function _initialize()
    {
        parent::_initialize();
        $this->request->filter(['strip_tags']);
        $this->model = model('app\common\model\Category');

        $tree = Tree::instance();
        $tree->init(collection($this->model->order('weigh desc,id desc')->select())->toArray(), 'pid');
        $this->categorylist = $tree->getTreeList($tree->getTreeArray(0), 'name');
        $categorydata = [0 => ['type' => 'all', 'name' => __('None')]];
        foreach ($this->categorylist as $k => $v)
        {
            $categorydata[$v['id']] = $v;
        }
        $this->view->assign("flagList", $this->model->getFlagList());
        $this->view->assign("typeList", CategoryModel::getTypeList());
        $this->view->assign("parentList", $categorydata);
    }

tab对应的数值其实是

'categorytype' => 
  array (
    'default' => 'Default',
    'page' => 'Page',
    'article' => 'Article',
    'test' => 'Test',
  ),
  'con

D:\phpstudy_pro\WWW\24.comamazonerp\amazonerp\public\assets\js\backend\category.js

            //绑定TAB事件
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                // var options = table.bootstrapTable(tableOptions);
                var typeStr = $(this).attr("href").replace('#','');
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                options.queryParams = function (params) {
                    // params.filter = JSON.stringify({type: typeStr});
                    params.type = typeStr;

                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;

            });

            //必须默认触发shown.bs.tab事件
            // $('ul.nav-tabs li.active a[data-toggle="tab"]').trigger("shown.bs.tab");

D:\phpstudy_pro\WWW\24.comamazonerp\amazonerp\application\admin\view\category\index.html

<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs">
            <li class="active"><a href="#all" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="typeList" item="vo"}
                <li><a href="#{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>

    </div>

显示效果

如何传入参数 test如何传入参

https://aaa.net/admin/category?addtabs=1#test

$type = $this->request->request("type")

 /**
     * 查看
     */
    public function index()
    {
        if ($this->request->isAjax())
        {
            $search = $this->request->request("search");
            $type = $this->request->request("type");

            //构造父类select列表选项数据
            $list = [];

                foreach ($this->categorylist as $k => $v)
                {
                    if ($search) {
                        if ($v['type'] == $type && stripos($v['name'], $search) !== false || stripos($v['nickname'], $search) !== false)
                        {
                            if($type == "all" || $type == null) {
                                $list = $this->categorylist;
                            } else {
                                $list[] = $v;
                            }
                        }
                    } else {
                        if($type == "all" || $type == null) {
                            $list = $this->categorylist;
                        } else if ($v['type'] == $type){
                            $list[] = $v;
                        }

                    }

                }

            $total = count($list);
            $result = array("total" => $total, "rows" => $list);

            return json($result);
        }
        return $this->view->fetch();
    }

角标

<ul class="nav nav-tabs">
                            <li class="active"><a href="#all" data-toggle="tab">{:__('All')}</a></li>
                            {foreach name="stockWarehouseListForUser" item="vo"}
                            <li><a href="#{$key}" data-toggle="tab">{$key} <small  class="badge">{$vo}</small></a></li>
                            {/foreach}
                        </ul>

或者

<style>.nav li a{position:relative; padding-right: 37px;}
    .nav li a small{position:absolute;right:0px;top:0px}
    </style>
    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="status">
            <li class="active"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            <li><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}{eq name="key" value="hidden"} <small class="badge pull-right bg-red">推荐</small> {/eq}</a>
            
</li>
            {/foreach}
        </ul>
    </div>

 动态更新角标看这里

希望动态获取TAB选项卡中的数据，更新tab角标。 - FastAdmin问答社区https://ask.fastadmin.net/question/30445.html