layui 的数据表格功能非常强大,有的功能在应用的时候,因为不想写太多的代码,所以就能省则省,根据需要动态载入。比如,
表格的toolbar。可以根据不同的用户类型载入不同的tool按钮。这个时候就需要jq判断后,再动态确认是否需要载入某个按钮。
我们知道,表格的toolbar是基于页面上的
<script type="text/html" id="demon"><a>按钮一</a><a>按钮二</a></script>
这一个script块来加载实现的,所以如果动态加入按钮的话,需要如下方法实现:
let scripts='<script id="barDemo"><a>按钮一</a><a>按钮二</a></script>'
$('body').append(scripts)
table.render({
cols: [[
{field:'id', title:'ID', width:100}
,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
]]
});
但是出现一个问题,就是加载不上。遍查网络,搜到如下原因:
在append之后,DOM树更新了,但是浏览器的redraw还没有完成,这个时候对刚append上去的元素做操作是会失败的。比较简单的解决方案一个是加setTimeout,时间为0都可以(在我遇到的问题中是这样);或者,在append函数之后加.hide().show(),但是还不清楚如果是移动端,低端机上这样做元素会不会有闪动。
基于以上理由,首先添加了
setTimeout(function(){
table.render({
})},300)
来进行延迟加载,script标签上去了,但并没有被加载。最后在贤心祖师的指导下,改为了如下代码,终于加载成功。
let scripts='<div class="layui-hidden" id="barDemo"><a>按钮一</a><a>按钮二</a></div>'
$('body').append(scripts)
table.render({
cols: [[
{field:'id', title:'ID', width:100}
,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
]]
});