fastAdmin 添加TAB与绑定TAB事件

--always

已于 2022-07-27 09:44:06 修改

阅读量1.6k

点赞数

分类专栏：前端 fastAdmin 文章标签： javascript 前端 jquery

于 2022-02-12 09:49:22 首次发布

本文链接：https://blog.csdn.net/qq_27080351/article/details/122892524

版权

前端同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

fastAdmin

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在前端页面中使用JavaScript处理Tab切换事件，并结合Bootstrap Table实现数据过滤。具体涉及到`index.html`的Tab结构，`index.js`中的事件监听及参数处理，以及根据字段和条件更新表格内容的逻辑。

摘要由CSDN通过智能技术生成

controller

$this->view->assign('typeList', ['1' => '状态1', '2' => '状态2']);

index.html

    <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>

index.js

            // 绑定TAB事件
            $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var field = 'type';
                var value = $(this).attr("href").replace('#', '');
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                var queryParams = options.queryParams;
                options.queryParams = function (params) {
                    params = queryParams(params);
                    var filter = params.filter ? JSON.parse(params.filter) : {};
                    if (value !== '' && value != 'all') {
                        filter[field] = value;
                    } else {
                        delete filter[field];
                    }
                    params.filter = JSON.stringify(filter);
                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;
            });
            // 自定义搜索条件
            $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var field = 'reportdata.bh';
                var value = $(this).attr("href").replace('#', '');
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                var queryParams = options.queryParams;
                options.queryParams = function (params) {
                    params = queryParams(params);
                    var op = params.op ? JSON.parse(params.op) : {};
                    var filter = params.filter ? JSON.parse(params.filter) : {};
                    if (value !== '' && value != 'all') {
                        filter[field] = '';
                        if (value == 2) {
                            op[field] = '=';
                        } else {
                            op[field] = '<>';
                        }
                    } else {
                        delete op[field];
                        delete filter[field];
                    }
                    params.op = JSON.stringify(op);
                    params.filter = JSON.stringify(filter);
                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;
            });