layui tab选项卡默认/切换定位所在选项

使用layui时,tab切换当弹出页面改变某一选项区中的内容后,让其其他内容同步刷新,且内容选项定位在指定的区域;

1、html:

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title" id="layui-status">
        <li class="layui-this" lay-status="1" lay-id="1" >订单信息</li>
        <li class="" lay-status="2" lay-id="2">商品信息</li>
        <li class="" lay-status="3" lay-id="3">审核记录</li>
   </ul>
     <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            1111111111111111 
        </div>
        <div class="layui-tab-item">
         <table class="table table-bordered" id="export-items" lay-filter="export-items"></table>
        </div>
         <div class="layui-tab-item layui-show">
            33333333
        </div>
    </div>
</div>

2、javascript:

 layui.use(['form', 'layer', 'table', 'laytpl', 'laydate', 'element'], function() {
        var form = layui.form,
            layer = layui.layer, 
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table, 
            element = layui.element;
        //获取hash 来切换选项卡,假设当前地址的hash为lay-id对应的值
        var layid = location.hash.replace(/^#docDemoTabBrief=/, '');
        element.tabChange('docDemoTabBrief', layid);
     element.on('tab(docDemoTabBrief)', function() {
            location.hash = 'docDemoTabBrief=' + this.getAttribute('lay-status');
            var laystatus = this.getAttribute('lay-status');
    });
    //表格内容渲染
     table.render({
            elem: '#export-items',
            url: '/api/orders/getOrdersItemsDetail',
            where: { order_sn: order_sn},
            page: false,
            cols: [
                [
                    {
                        field: 'item_title',
                        title: '商品名称',
                        align: "left",
                        minWidth: 200,
                        templet: function(d) {
                            if (d.is_gift) {
                                return '<span class = "layui-badge">赠品</span> ' + d.item_title;
                            } else {
                                return d.item_title;
                            }
                        }
                    },
                    {
                        field: 'sku_name',
                        title: '规格',
                        minWidth: 120,
                        width: 220,
                        align: 'center'
                    },
                    {
                        field: 'unit_conversion',
                        title: '单位',
                        minWidth: 80,
                        width: 80,
                        align: 'center'
                    },
                    {
                        field: 'price',
                        title: '单价(元)',
                        minWidth: 100,
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'total',
                        title: '数量',
                        width: 80,
                        align: 'center'
                    },
                    {
                        field: 'total_fee',
                        title: '小计(元)',
                        minWidth: 100,
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'warehouse_name',
                        title: '发货仓库',
                        minWidth: 120,
                        width: 150,
                        align: 'center'
                    }, 
                    {
                        title: '操作',
                        width: 150,
                        fixed: "right",
                        align: "left",
                        templet: function(d) { 
                                return  '<button class="layui-btn layui-btn-xs layui-btn-danger" data-itemid="' + d.id + '" lay-event="delItem" data-method="delItem">删除</button>'; 
                        }
                    }
                ]
            ],
            done: function(res, curr, count) {
                exportData = res.data;
            }
        });
        //表格内容操作删除
         table.on('tool(export-items)', function(obj) {
            var layEvent = obj.event,
                data = obj.data;
            var order_sn = data.order_sn;
            if (layEvent === 'delItem') { //删除商品;
                var items=[];//新数组
                var j = 0; 
                if(items&&items.length>1){ //商品必须保留1种
                    layer.confirm("确定删除此商品?", {
                        btn: ['确定', '取消'] //按钮
                    }, function() {
                        var getURL = '/api/orders/delOrdersItems';
                        var params = {
                            order_sn:order_sn,
                            order_items_id: data.id,
                        };
                        $.post(getURL, params, function(res) {
                             layer.msg(res.msg);
                            if (res.code == 0) { 
                               location.reload();     
                 location.href='/console/orders/view/'+order_sn+'#docDemoTabBrief=2'; //定位
                                 table.reload('export-items'); 
                            } 
                        }, 'json');
                    }, function() {
                    });
                }else{
                    layer.msg('订单商品至少保留1种不能删除!');
                } 
            }
        });
});

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值