近日,layui框架更新迭代到2.2.x版本,table表格支持适配了。激动的我赶紧更新到项目中,一切都是开心的。然而,爽不过3秒这句话不是吹的!更的正开心突然发现,在ifream下点击刷新的时候,table表里的数据会消失。而且有个报错。
table加载的代码如下:
<script>
layui.config({
base : "js/"
}).use(['layer','jquery',"table"],function(){
var form = layui.form,
layer = layui.layer,
table=layui.table,
$ = layui.jquery;
table.render({
elem: '#table1'
,url:'../../json/images.json',
id:"test1"
,cols: [[
{type:'checkbox',width:'5%'}
,{field:'bh',width:'5%', title: '编号', sort: true}
,{field:'imgSrc',width:'45%', title: '图片'}
,{field:'imgTitle',width:'45%', title: '哇咔咔'}
]]
,page: true
});
})
</script>
报错是这样的:
出现这种情况是一脸懵逼的。不过经过努力,终于找到了问题所在。
原因就是在table加载的时候应该定义width参数。(具体原理不多说。)。如果没有定义width参数。页面刚进来的时候是正常的,但是如果你f5刷新了,就会出现问题。所以。width还是需要写上的。
<script>
layui.config({
base : "js/"
}).use(['layer','jquery',"table"],function(){
var form = layui.form,
layer = layui.layer,
table=layui.table,
$ = layui.jquery;
table.render({
elem: '#table1'
,url:'../../json/images.json'
,id:"test1"
,width:"1300"//在此处添加width参数
,cols: [[
{type:'checkbox',width:'5%'}
,{field:'bh',width:'5%', title: '编号', sort: true}
,{field:'imgSrc',width:'45%', title: '图片'}
,{field:'imgTitle',width:'45%', title: '哇咔咔'}
]]
,page: true
});
})
然而事情并没有结束,细心的童鞋可能发现了,怎么width写成了数值?是的,我不写成数值还是会出问题。因为,你要是写了100%。渲染后的结果就是,
style=‘100%px’,是的就是这样子。很尴尬,这谈何适配?到这时候我也无奈了,只好自己想办法。于是我的代码就变成了这样。
<script>
layui.config({
base : "js/"
}).use(['layer','jquery',"table"],function(){
var form = layui.form,
layer = layui.layer,
table=layui.table,
$ = layui.jquery;
var w=$(parent.window).width()-200;//获取浏览器的宽,减去侧边栏的宽度
table.render({
elem: '#table1'
,url:'../../json/images.json'
,id:"test1"
,width:w//在此处添加width参数
,cols: [[
{type:'checkbox',width:'5%'}
,{field:'bh',width:'5%', title: '编号', sort: true}
,{field:'imgSrc',width:'45%', title: '图片'}
,{field:'imgTitle',width:'45%', title: '哇咔咔'}
]]
,page: true
});
})
</script>
通过获取浏览器屏幕的宽度,去掉其他宽度,计算出需要适配的table的宽,作为width的参数。
我不太清楚这属不属于框架的bug。希望之后会有所更新吧。希望我的分享对大家有所帮助
另:本菜鸟很少写博客,有不足的地方,请批评指正。拜谢各位!!