layui使用心得

原创 15155102848 随笔 项目遇到问题 521阅读 2018-08-20 17:34:31 举报

最近公司后台大改版本,找来找去,用layui这个模块组件。

原因:之前常用layer这个弹框插件,其他用的少。后来细看文档发现这个真的很轻大,很适合做后台模板(实际上就是为了后台方便的吧)

后台用的最多就是,table数据表格和弹框 ifream 两个大模块;

table数据化模块layui给了很好的模板样式。许多功能都可以直接拿来用,简单上手。

我需要的功能

table篇

1.如何构建,官网给了两种方法,个人最喜欢是通过js构建,如下(所有数据均是从layui官方抓取)

table.render({
elem: '#demo'
,height: 315
,url: '/demo/table/user/' //数据接口
,page: true //开启分页
,cols: [[ //表头
  {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
  ,{field: 'username', title: '用户名', width:80}
  ,{field: 'sex', title: '性别', width:80, sort: true}
  ,{field: 'city', title: '城市', width:80} 
  ,{field: 'sign', title: '签名', width: 177}
  ,{field: 'experience', title: '积分', width: 80, sort: true}
  ,{field: 'score', title: '评分', width: 80, sort: true}
  ,{field: 'classify', title: '职业', width: 80}
  ,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
,done: function(res, curr, count){
//如果是异步请求数据方式,res即为你接口返回的信息。
//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);

//得到当前页码
console.log(curr); 

//得到数据总量
console.log(count);

}
});

为什么?

因为在这个在html页面更为简单(你只需要在html页面写个table 加一个id <table id="newsList" lay-filter="newsList"></table>),所有的操作都在js里面执行。
强调一下 done函数 这个是表格数据加载以后的可以做的操作,是非常重要的,因为你会发现,在此基础上你可以拓展很多东西。

2.table自带的一些操作按钮(switch等)
熟悉这个之前请先了解(table的表头参数)链接标题

templet toolbar 这个表头参数对于做数据操作很方便

table.render({

cols: [[
{field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
,{field:'id', title:'ID', width:100}
]]
});

由于模板遵循 laytpl 语法(建议细读 laytpl文档 ),因此在模板中你可以写任意脚本语句(如 if else/for等):

不懂这个模板 就仔细看文档,以前我也不看文档,现在对这个文档抠字眼
<script type="text/html" id="titleTpl">
<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>

<!-- 这里同样支持 laytpl 语法,如: -->
{{# if(d.auth > 2){ }}
<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
{{# } }}
</script>
注意:属性 lay-event="" 是模板的关键所在,值可随意定义。

lay-event是什么尼?

在表格数据渲染以后,可以借助 table模块的工具条事件,完成不同的操作功能:
//监听工具条
table.on('tool(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"

var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的DOM对象

if(layEvent === 'detail'){ //查看
//do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something

//同步更新缓存对应的值
obj.update({
  username: '123'
  ,title: 'xxx'
});

}
});

监听复选框选择
table.on('checkbox(test)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
});

监听单元格编辑
table.on('edit(test)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
});

另外:
表格里面还可以用 switch

{field: 'newsTop', title: '状态', align:'center', templet:function(d){
return '<input type="checkbox" name="newsTop" lay-filter="newsTop" lay-skin="switch" lay-text="启用|停用" '+d.newsTop+'>'
然后用form进行监听
form.on('switch(newsTop)', function(data){

}

//2018.8.23 待更新

评论 ( 8 )
最新评论
kkcode 7F 2018-09-14 11:30:11 8F

恩,快速开发常用功能还是不错的

15155102848 6F 2018-09-14 10:30:01 7F

是要画啊,后台等不起,又方便快速成型的,拿来就用了。觉得这个很好用就记录一下了

kkcode 5F 2018-09-11 17:21:41 6F

哦,开玩笑,前端还要画定制化页面

YolandaThePuppy 3F 2018-08-27 16:29:41 5F

这是一个方便后端人员快速构建页面的框架,偏UI向的。特点是可以在用js构建组件时直接传入接口,很多效果都可以直接指定,对后端人员非常友好。虽然对前端来讲几乎无事可做了。

lawrence 2018-08-26 11:54:48 4F

这个类似于requirejs?

lawrence 2F 2018-08-26 08:05:53 3F

前端框架真多

15155102848 1F 2018-08-23 18:39:19 2F

共同进步吧

丕丕 2018-08-23 08:34:24 1F