Talking about the application of layui and the pits encountered in the first use

The front-end time company's business needs, using the layui template as the background management system, encountered bad problems for the first time, and solved these problems by reading a lot of official documents and online searches, so make a summary for the next time you can quickly find a solution. .

　　When using layui as the background, in fact, most of the cases are operating data tables to display data, and data display problems. There are three methods for table display, let's take one as an example.

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

If we do some personalized operations relative to the displayed data when the data is displayed on the front-end, for example, the status is a number in the database, and the front-end wants to display text , we can add templet:'#statusTpl' to lay-data , which is equivalent to a template. Next we can define

<script type="text/html" id="statusTpl">
        {{# if(d.status == 1){ }} close
    {{#  } else if(d.status == 2) { }}
    {{}} on
    {{#  } }}
</script>

In this way, the page display can be turned on or off according to the status value.

If we want to add buttons , such as operating this column, we can add a toolbar: '#barDemo', the same is true

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

The display effect is as follows

Sometimes we want to add a serial number in front of the table , we can add a templet to the specified field, the following d is equivalent to the current row object, we can get all the fields of the current row, and the serial number can be displayed by

<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>

There are more, and I will see more documents to understand later.

Talking about the application of layui and the pits encountered in the first use

Guess you like