关于layui2.2.x版本使用table表格，刷新后table数据消失的问题

近日，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。希望之后会有所更新吧。希望我的分享对大家有所帮助

另：本菜鸟很少写博客，有不足的地方，请批评指正。拜谢各位！！