前端时间公司业务需求,使用layui模板做后台管理系统,初次使用遇到了不好问题,通过大量翻阅官方文档以及网上查找才解决这些问题,所以做下总结以备下次遇到可以快速找到解决方案。
使用layui做后台的时候,其实大部分情况都是在操作数据表格展示数据,以及数据的展示问题。表格展示用三中方法,就拿一种来说吧。
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test"> <thead> <tr> <th lay-data="{field:'id', width:80, sort: true}">ID</th> <th lay-data="{field:'username', width:80}">用户名</th> <th lay-data="{field:'sex', width:80, sort: true}">性别</th> <th lay-data="{field:'city'}">城市</th> <th lay-data="{field:'sign'}">签名</th> <th lay-data="{field:'experience', sort: true}">积分</th> <th lay-data="{field:'score', sort: true,templet:'#statusTpl'}">状态</th> <th lay-data="{field:'classify'}">职业</th> <th lay-data="{field:'wealth', sort: true}">财富</th>
<th lay-data="{field:'right',title:'操作', width:240,toolbar:'#barDemo'}">操作</th>
</tr> </thead> </table>
如果我们在数据展示在前端的时候,相对展示的数据做一些个性化操作,比如状态在数据库为数字,前端想展示文字,可以在lay-data加上templet:'#statusTpl',相当于模板,接下来我们就可以进行定义
<script type="text/html" id="statusTpl"> {{# if(d.status == 1){ }}关闭 {{# } else if(d.status == 2) { }} {{}}开启 {{# } }} </script>
这样页面展示就可以根据状态值展示开启还是关闭了
如果我们想在数据表格里面加按钮的话,如操作这一栏 我们可以加一个toolbar:'#barDemo',同理
<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> </script>
展示效果如下
我们有时想在表格前面添加序号,可以在制定字段添加templet,下面的d相当于当前行对象,可以获得当前行的所有字段,序号就可以通过一下显示
<script type="text/html" id="indexTpl"> {{d.LAY_TABLE_INDEX+1}} </script>
还有比较多的,以后遇到再多多看文档了解。