Layui

layui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，基本都是套用内容。但是想用它，必须要按照他的规矩来，毕竟拿人的手短。

预先加载模块

layui 通过 use 方法加载模块。当你的 JS 需要用到 layui 模块的时候，且避免到处写 layui.use() 的麻烦。你应该在最外层如此定义：

layui.use(['form', 'upload'], function(){  
    //如果只加载一个模块，可以不填数组。如：layui.use('form')
      var form = layui.form //获取form模块
      var upload = layui.upload; //获取upload模块
​
      //监听提交按钮
      form.on('submit(test)', function(data){
        console.log(data);
      });
});

获取模块的命名规则

layui.use(['form', 'upload'], function(){  
    var a=layui.a;
})

交互数据格式

layui有自己的一套特定的数据格式交互，而且必须有值

默认的数据格式

字段	说明	值
code	状态码(成功 0，失败其他)	int
msg	错误提示	string
count	总数	int
data	实体对象的集合	object[]

也就是说你从后台返回的值必须是下面这个样子的

其他情况

如果你的字段名称不同于默认的字段，需要借助parseData将其解析成table所规定的数据格式

{
  "status": 0,
  "message": "", 
  "total": 180, 
  "data": {
    "item": [{}, {}]
  }
}
//如果你的字段名称和默认字段不一样，你需要进行以下操作
​
table.render({
  elem: '#demp'
  ,url: ''
  ,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.status, //解析接口状态
      "msg": res.message, //解析提示文本
      "count": res.total, //解析数据长度
      "data": res.data.item //解析数据列表
    };
  }
}); 

拼接

在使用Layui对表格进行渲染的过程中，你可能会遇到多个字段放在同一栏的情况，这时候就需要使用拼接，这里直接使用代码演示。

//多个字段拼接
{field:'area',title:'房屋名称', width:200,  
    templet:function (d) {      //templet可以进行方法的编写
        return d.area + '-' + d.ased + '-' + d.aasd;
        // return d.area+"我是啦啦啦";   //拼接字符
    }
}

模板templet

layui中有很多模板，但是这些模板并不能完全满足于我们的需求，就比如我们想要展示一些数据，但是这些数据不是我们想要的数据或者不是我们想要的样子，我们就可以通过templet在前台进行更改。

就比如我们从后台传输过来的日期格式是String，但这个String中存储的却是时间戳。

//时间戳：1635264000        时间：2021-10-27
//这就是在表格中将时间戳1635264000转化为了2021-10-27
templet: "<div>{
 {layui.util.toDateString(1635264000,'yyyy-MM-dd')}}</div>"
​
​
//在正式使用中，你可以将1635264000换成你的字段名，这样的话可以将你的字段的值自动转化
//这里我就是将我的ctime转换成了日期格式
field:'ctime', title:'签署时间', width:200,
    templet: "<div>{
 {layui.util.toDateString(d.ctime,'yyyy-MM-dd')}}</div>"

弹窗

基础语法