关于前端工具layui的一些使用总结

说明：

     最近小组在做一个自研的字节码增强工具。因为是预研性质，所以前端的操作界面就自己上手写了。使用了比较亲和后端开发的layui框架。后端采用springboot+thymeleaf

后端配置静态资源和thymeleaf：

application.yml：

 静态资源访问：

前端引入layui:

layui的下载可以到官网下载最新版：Layui - 经典开源模块化前端 UI 框架

 

细节：

1 布局：

采用layui官网给定的栅栏布局，只需要指定div的class=“layui-row”即可表示一行，可以通过设置高度

2 数据表格

  a 需要提前加载layui的table模块：layui.use('table',funtion(){})

  b 如果接口返回的数据不符合分页数据格式(code,msg,count,data),使用parseData:function(res)处理返回数据即可

  c cols是一个数组，html不识别[[]],需要将两个[[]]换行写

  d cols的可以使用templet:function(d)定制显示，其中d表示整行数据

  e cols可以绑定操作列 

 其中barDemo是一个段<script>代码如下：

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

通过在js中使用：table.on('tool(test)')触发点击事件，其中test是该数据表格的table的lay-filter属性值

f 数据表格表头工具列采用相似的方式绑定：

 

 只是在js中触发条件如下：

3 弹出层：

 layui有很多类型的弹出层，指定type:2，可以弹出具体的html页面

最主要的问题在于：如何在弹出的页面，当调用后台接口之后根据条件关闭弹窗：

4 下拉框选择事件

 

 另外对某个dom元素的显示和隐藏：显示：show(),隐藏：hide()

5 数据回显：

layui有个form.val()数据回显的功能，不过我一直没有实现，采用了最原始的方式回显的。

还有设置dom元素属性值是使用:attr()，这个也耽误了好长时间(一个后端人员做前端是耽误时间)