layui的tab切换的功能完善

最新推荐文章于 2023-07-12 19:00:24 发布

weixin_16881788

最新推荐文章于 2023-07-12 19:00:24 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： java

本文链接：https://blog.csdn.net/weixin_44505454/article/details/106714360

本文介绍了一个基于layui框架的运单状态管理模块，通过js实现不同运单状态的界面切换与数据过滤，展示了如何使用事件监听和表格组件进行状态筛选及界面更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.js页面

 /**
     * 运单表管理
     */
    var JbrTradeorder = {
        tableId: "jbrTradeorderTable"
    };
    element.on('tab(tradeorder)', function(data){
        var tradeorder= this.getAttribute('lay-id');
        $("#transitStatus").val(tradeorder);
        var queryData = {};
        if(tradeorder!=0){
            queryData['transitStatus'] = tradeorder;
        }else{
            queryData['transitStatus'] = null;
        }
        if(tradeorder==1 || tradeorder==0){
            $('#deploy').show();
            $('#feidan').show();
        }else{
            $('#deploy').hide();
            $('#feidan').hide();
        }
        table.reload(JbrTradeorder.tableId, {
            where: queryData, page: {curr: 1}
        });
    });

2.html页面

                        <div class="layui-form-item layui-col-sm12 layui-col-md12 layui-col-lg12">
                            <div class="layui-tab layui-tab-brief" lay-filter="tradeorder">
                                <input type="hidden" id="transitStatus">
                                <ul class="layui-tab-title">
                                    <li class="layui-this" lay-id="0">全部</li>
                                    <li  lay-id="1">待配载</li>
                                    <li  lay-id="2">已配载</li>
                                    <li  lay-id="3">已发车</li>
                                    <li  lay-id="4">已到货</li>
                                </ul>
                            </div>
                        </div>