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

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

1、html:

  • 订单信息
  • 商品信息
  • 审核记录
1111111111111111
33333333

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 '赠品 ' + 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  ''; 
                        }
                    }
                ]
            ],
            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种不能删除!');
                } 
            }
        });
});

 

你可能感兴趣的:(layui)