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>"