Tab 页,非初始页 table 自动渲染有点问题

讨论 未结
2 1287
Fufu
Fufu VIP3 2017-10-19
悬赏:20飞吻
描述有点绕口,Tab 三页,第一页为数据表,默认为自动渲染表格。

1、当正常打开网址,默认显示数据表页,完全正常,切换各 Tab 页,切回第一页都没有问题。

基本代码如下:
<div class="layui-tab layui-tab-brief" lay-filter="maintab">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="a">数据表</li>
<li lay-id="b">统计图1</li>
<li lay-id="c">统计图2</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
...
<table class="layui-table" lay-data="{id:'maintb', height:'full-290', size:'sm', even:true, page:true, url:'/test/json/x/abc/'}" lay-filter="maintb">
....
//获取hash来切换选项卡,假设当前地址的hash为lay-id对应的值
var layid = location.hash.replace(/^#tab=/, '');
element.tabChange('maintab', layid);

//监听Tab切换,以改变地址hash值
element.on('tab(maintab)', function(data) {
location.hash = 'tab='+ this.getAttribute('lay-id');
});
2、当使用 Tab 的 Hash 地址定位直接打开 /test/table/#tab=b(比如发送图表给同事,让其打开直接看图表页),即默认打开第二页(没问题):


3、此时点击选项卡切换到第一页,该页的数据表渲染有点问题,固定列没固定到,如图:



当然加点代码来重载一次是能解决的,只是重载会多请求一次数据。
(此外,当有多个 Tab 都为数据表格时,也会出现渲染问题,当然监听 Tab 切换来手动渲染表格可以解决)
//获取hash来切换选项卡,假设当前地址的hash为lay-id对应的值
var layid = location.hash.replace(/^#tab=/, '');
element.tabChange('maintab', layid);

var reload_a = layid == 'a' ? !1 : !0;

//监听Tab切换,以改变地址hash值
element.on('tab(maintab)', function(data) {
location.hash = 'tab='+ this.getAttribute('lay-id');

//.重载一次数据表
if (reload_a && data.index == 0) {
table.reload('maintb');
reload_a = !1;
}
});
写到这回想了想,当 Tab 页处于 hide 状态时,页面很多元素的值是不太好确定,是可能出现上面的情况,目前想到似乎只能通过监听 Tab 的切换得到当前页并通过 【方法级渲染】 来加载数据表,反正数据表肯定是 Ajax 异步获取数据。
写都写了,还是发帖吧。
回帖
  • mojie126
    2017-10-20
    我也是这么操作的,监听tab,点击到对应的tab后再获取数据...
    0 回复
  • Fufu
    2017-10-20
    嗯,感谢回复,先这么着,监听 Tab 及判断 Tab 页来获取数据并完成表格首次渲染 table.render({...}); 。

    不能用文中的自动渲染模式+重载表格,一来是多了次请求,二来是重载(2.1.5版)触发不了 window.onresize,当表格高度满屏模式(height:'full-290'),改变窗口大小时,表格高度不会自适应。
    0 回复
本帖已设置禁止回复