使用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种不能删除!');
}
}
});
});