1. Introduction to layui

Layui is a front-end UI framework written with its own module specification. It follows the writing and organization form of native HTML/CSS/JS. The threshold is very low. It is very suitable for the rapid development of the interface. Unlike those UI frameworks based on MVVM, layui does not need complex configuration of various front-end tools, but only needs to face the browser itself.

2.table data table

Before code compilation, you still need to introduce the layui framework and download the dist folder in git.

(website: https://github.com/sentsin/layui)

Table data table is one of the core components of layui. It is used to perform some column functions and dynamic data operations on tables. It supports fixed header, fixed row and fixed column, supports dragging and dropping to change column width, supports sorting, supports multi-level header, supports user-defined template of cell, supports check box, supports paging, supports cell editing and other column functions.

2.1 basic parameters of data table

2.1 basic parameters of data table header

Learn the front end, and you'll master these. Second tier can easily take more than 8K

2.1 table of directly assigned data

The layui framework is similar to the bootstrap framework in some uses, which uses encapsulation styles. The easiest way to create a table instance is to place an element on the page < tableid = "demo" > table.render The () method specifies the container. You can also use skin,even and size to adjust the style of data tables. See the figure below for specific parameter names and optional values

2.3 data table style.

Figure 2.3 data table style

The specific codes are as follows (some codes in the table data have been omitted):

 <table class="layui-hide" id="demo"></table>      
 ​
 <script src="../js/layui/layui.js" charset="utf-8"></script>
 ​
 <!-- Note: if you copy all code directly to the local, the above js The path needs to be changed to your local -->
 ​
 <script>
 ​
 layui.use('table', function(){
 ​
   var table = layui.table;  //Show known data
 ​
   table.render({
 ​
     elem: '#demo'//Tab Switch function, switch event monitoring, etc
 ​
     ,cols: [[ //Title Block
 ​
       {field: 'id', title: 'ID', width: 80, sort: true}
 ​
       ,{field: 'username', title: 'user name', width: 120}
 ​
       ,{field: 'email', title: 'mailbox', minWidth: 150}
 ​
       ,{field: 'sign', title: 'autograph', minWidth: 160}
 ​
       ,{field: 'sex', title: 'Gender', width: 80}
 ​
       ,{field: 'city', title: 'city', width: 100}
 ​
       ,{field: 'experience', title: 'integral', width: 80, sort: true}
 ​
     ]]
 ​
     ,data: [{
 ​
       "id": "10001"
 ​
       ,"username":  "Du Fu"
 ​
       ,"email": "xianxin@layui.com"
 ​
       ,"sex": "male"
 ​
       ,"city": "Hangzhou, Zhejiang"
 ​
       ,"sign": "Life is like a practice"
 ​
       ,"experience":  "116"
 ​
       ,"ip": "192.168.0.8"
 ​
       ,"logins": "108"
 ​
       ,"joinTime":  "2016-10-14"
 ​
     }
 ​
 ]
 ​
     //,skin: 'line' //Table style
 ​
     ,even: true//background
 ​
     //,page: true //Display paging or not
 ​
     //,limit: 5  //Number of default displays per page
 ​
   });
 ​
 });
 ​
 </script>

The renderings are as follows:

Figure 2.4 renderings

2.2 filling table data with interface

Here, you only need to use the url interface to realize, data data data can not be written, just use cols to display the title bar, and the effect is shown in Figure 2.4. The code is as follows:

 table.render({
 ​
      elem: '#test'
 ​
      ,url:'/demo/table/user/'

2.3 merge table rows or columns

The method of merging cells is the same as that in HTML. rowspan="2" and colspan="3" are used for merging. The code is as follows:

 <table  lay-data="{width:800, url:'/test/table/demo2.json?v=2', page: true,  limit: 6, limits:[6]}">
 ​
    <thead>
 ​
      <tr>
 ​
        <th lay-data="{checkbox:true, fixed:'left'}"  rowspan="2"></th>
 ​
        <th lay-data="{field:'username', width:150}"  rowspan="2">contacts</th>
 ​
        <th lay-data="{align:'center'}" colspan="3">address</th>
 ​
        <th lay-data="{field:'amount', width:120}"  rowspan="2">amount of money</th>
 ​
        <th lay-data="{fixed: 'right', width: 160, align: 'center',  toolbar: '#Bardemo '} "rowspan =" 2 "> operation < / th >
 ​
      </tr>
 ​
      <tr>
 ​
        <th lay-data="{field:'province', width:120}">province</th>
 ​
        <th lay-data="{field:'city', width:120}">city</th>
 ​
        <th lay-data="{field:'zone', width:200}">area</th>
 ​
      </tr>
 ​
    </thead>
 ​
 </table>

The effect is as follows:

Figure 2.5 renderings

For more information, please read my Zhihu column: Build a database of web senior front-end Engineers (general catalog) for the whole network to finish learning more quickly and have more solid knowledge. You deserve it (keep updating)~