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