fastadmin 切换选项卡时,搜索失效了

本文介绍了如何在HTML中使用BootstrapTable组件,通过选项卡传递参数,并在用户切换选项卡时动态更新表格查询,以适应不同状态的订单筛选。
摘要由CSDN通过智能技术生成

1.index.html 选项卡携带参数 

<div class="panel panel-default panel-intro">
    <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>     
            <li><a href="#t-waitfreight" data-pay_status="20" data-freight_status="10" data-order_status="10" data-receipt_status="10" data-toggle="tab" data-isself="0">待发货</a></li>
            <li><a href="#t-waitreceipt" data-pay_status="20" data-freight_status="20" data-order_status="10" data-receipt_status="10" data-toggle="tab" data-isself="0">待收货</a></li>
            <li><a href="#t-waitpay" data-pay_status="10" data-freight_status="10" data-order_status="10" data-receipt_status="10" data-toggle="tab">待付款</a></li>
            <li><a href="#t-finish" data-pay_status="20" data-freight_status="20" data-order_status="30" data-receipt_status="20" data-toggle="tab">已完成</a></li>
            <li><a href="#t-cancel" data-order_status="20" data-toggle="tab">已取消</a></li>
        </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-danger btn-del btn-disabled disabled {:$auth->check('litestore/litestoreorder/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('litestore/litestoreorder/edit')}"
                           data-operate-del="{:$auth->check('litestore/litestoreorder/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

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

2.js获取参数

// 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'order_no', title: __('Order_no')},
                        {field: 'total_price', title: __('Total_price'), operate:'BETWEEN'},
                        // {field: 'isscorepay', title: __('支付方式')},
                        {field: 'isscorepay', title: __('支付方式:0=微信,1=积分'), formatter: function(value, row, index) {return value === 1 ? __('积分支付') : __('微信支付');}},
                        {field: 'user_id', title: __('用户ID')},
                        {field: 'express_price', title: __('Express_price'), operate:'BETWEEN'},
                        {field: 'pay_price', title: __('Pay_price'), operate:'BETWEEN'},
                        {field: 'pay_time', title: __('Pay_time'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'freight_time', title: __('Freight_time'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'receipt_time', title: __('Receipt_time'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'order_status', title: __('Order_status'), searchList: {"10":__('Order_status 10'),"20":__('Order_status 20'),"30":__('Order_status 30')}, 
                                                formatter: Controller.api.status_formatter},
                        {field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'address.name', title: __('Address.name')},
                        {field: 'isself_text', title: __('取货方式'), operate:'BETWEEN'},
                        {field: 'address.Area.city', title:"发货城市"},
                        {field: 'operate', title: __('Operate'), table: table, buttons: [
                                {name: 'send', text: __('view'), icon: 'fa fa-eye', classname: 'btn btn-xs btn-warning btn-dialog chakan', url: 'litestore/litestoreorder/detail'},
                            ],  events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 绑定TAB事件
            $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var that = $(this);
                var options = table.bootstrapTable('getOptions');
                var queryParams = options.queryParams;// 获取查询参数
                options.pageNumber = 1;
                options.queryParams = function (params) {
                    params = queryParams(params);// 没有这个参数时,提交搜索就会失效
                    var filter = params.filter ? JSON.parse(params.filter) : {};    
                    filter['pay_status'] = that.data("pay_status");
                    filter['freight_status'] = that.data("freight_status");
                    filter['order_status'] = that.data("order_status");
                    filter['receipt_status'] = that.data("receipt_status");
                    filter['isself'] = that.data("isself");
                    params.filter = JSON.stringify(filter);
                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
            table.on('load-success.bs.table',function(data){
               $('.chakan').data("area", ["1000px","800px"]);
            });
        },
        add: function () {
            Controller.api.bindevent();
        },

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值