【fastadmin 开发实战】自定义tab 选项卡

hj1043

于 2024-06-26 18:14:06 发布

阅读量238

点赞数 3

分类专栏： fastadmin 文章标签：前端

本文链接：https://blog.csdn.net/hj1043/article/details/139995665

版权

fastadmin 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

fastadmin 框架中的 tab 选项卡，除了官方定义的status 状态类型，如果想自定义选项卡，可以参考以下办法：

选项卡代码

<ul class="nav nav-tabs" data-field="fork">
            <li class="{:$Think.get.status === null ? 'active' : ''}"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            {php}if(in_array($key, ['nonpayment', 'paid']) && $project['price']==0) continue;{/php}
            <li class="{:$Think.get.status === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>

js 代码，主要是监听，table 搜索参数赋值

  
            // 绑定 TAB 为事件
            $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab',function(e){
                var field = $(this).closest("ul").data("field");
                var value = $(this).data("value");
                console.log(field)
                console.log(value)
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                options.queryParams = function(params){
                    var filter = {};
                    if(value != ''){
                        filter['fork'] = value;
                    }
                    params.filter = JSON.stringify(filter);
                    return params
                };
                table.bootstrapTable('refresh',{});
                return false
            })

实现的效果