浅谈对layui应用以及初次使用遇到的坑

前端时间公司业务需求，使用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>

还有比较多的，以后遇到再多多看文档了解。

浅谈对layui应用以及初次使用遇到的坑

猜你喜欢