layui中进度条如何动态获取后端数据并渲染出来

最近死磕layui,发现坑还是不少的,用jquery去请求后台数据来进行渲染。
遇到问题1:进度条如何用ajax获取数据渲染到页面,并改变进度条的值;废话不多说,先上代码,通俗易懂。
html页面:
在这里插入图片描述
lay-filter 事件过滤器(公用属性),主要用于事件的精确匹配,跟选择器是比较类似的。 一定要写哦!!

class="layui-progress"相对于进度条的边框
再写一个id=“demo”,来进行进度条的动态渲染

js代码如下:

layui中进度条如何动态获取后端数据并渲染出来_第1张图片
根据id去请求数据,$("demo1).attr(“lay-percent”,“后端对应数据”)
进度条渲染是在页面未加载的时候渲染,请求数据同步渲染到进度条,所以要加element.init()
最后展示的结果:
在这里插入图片描述
layui搭配jquery确实不错,一步一步在钻研。

你可能感兴趣的:(layui中进度条如何动态获取后端数据并渲染出来)