LayUI framework quick start

LayUI overview

It is similar to Bootstrap, but the framework has a great advantage that it defines many style interfaces for front-end and back-end interaction, such as paging tables. It only needs to configure the interface at the front end, and the back end returns data according to the defined interface rules to complete the page display, which greatly reduces the development cost of back-end personnel

Download and structure

1. Official website: https://www.layui.com/

2. After downloading and decompressing, we can see the directory structure

  ├─css //css directory
  │  │─modules //Module css directory (generally, if the module is relatively large, we will extract it separately, as follows:)
  │  │  ├─laydate
  │  │  └─layer
  │  └─layui.css //Core style file
  ├─font  //Font Icon directory
  └─layui.js //Core library

Quick use

1. Introduction of third-party CDN:

<!-- introduce layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"/>

<!-- introduce layui.js -->		
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

2. Download for local use:

<!-- introduce layui.css -->
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css"/>

<!-- introduce layui.js -->
<script src="layui-v2.6.8/layui/layui.js"></script>

3. The first example is Hello World

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui Use of</title>
		<!-- introduce layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" />
		<!-- introduce layui.js -->
		<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
	</head>
	<body>
		<script>
			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					form = layui.form;
				layer.msg('Hello World');
			});
		</script>
	</body>
</html>

layout

Layout container

Fixed width (with blank effect on both sides)

Key knowledge point: layui container

<div class="layui-container" style="background-color:navajowhite; height:300px;">
	Fixed width (with blank effect on both sides)
</div>

Full width (100% of screen width)

Key knowledge point: layui fluid

<div class="layui-fluid" style="background-color:navajowhite; height:300px;">
	Full width (100% of screen width)%)
</div>

grid system

It divides containers into 12 equal parts and presets 4 * 12 CSS arrangement classes, which play their respective roles under four different screens: mobile device, tablet and desktop medium / large size

Column combination

① Define line layui row

② Define column layui col MD*

md indicates the identification of different screens (xs, sm, md, lg)
The 12 grade scores (such as 6 / 12) occupied by this column. The optional values are 1 - 12
If the sum of the bisection values of multiple columns is equal to 12, the row is just full. If it is greater than 12, the redundant columns will automatically start another row.

<div class="layui-container"><!--Layout container-->
	<div class="layui-row"><!--Define row-->
		<div class="layui-col-md5" style="background-color:blue;">Content 5/12</div>
		<div class="layui-col-md7" style="background-color:red;">Content 7/12</div>
	</div>
	<div class="layui-row"><!--Define row-->
		<div class="layui-col-md4" style="background-color:blue;">Content 4/12</div>
		<div class="layui-col-md4" style="background-color:red;">Content 4/12</div>
		<div class="layui-col-md6" style="background-color:green;">Content 6/12</div>
	</div>
</div>

Columns can have up to four different combinations at the same time, namely:

xs (ultra small screen, such as mobile phone)
sm (small screen, such as tablet)
md (desktop medium screen)
lg (desktop large screen)

To present a more dynamic and flexible layout.

<h3>Different performance of tablet and desktop:</h3>
<div class="layui-row">
	<!-- The small screen occupies 6 columns and the medium screen occupies 4 columns -->
	<div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">
		Flat≥768px: 6/12 | Desktop end≥992px: 4/12
	</div>
</div>

<div class="layui-row">
	<!-- The small screen occupies 4 columns and the medium screen occupies 6 columns -->
	<div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;">
		Flat≥768px: 4/12 | Desktop end≥992px: 6/12
	</div>
</div>

<div class="layui-row">
	<!-- The small screen occupies 12 columns and the medium screen occupies 8 columns -->
	<div class="layui-col-sm12 layui-col-md8" style="background-color: coral">
		Flat≥768px: 12/12 | Desktop end≥992px: 8/12
	</div>
</div>

Column margin

Through the preset class of "column spacing", we can set the spacing between columns. In addition, the leftmost column in a row will not have left margin, and the rightmost column will not have right margin. Column spacing can not only ensure the beautiful layout, but also further ensure the width and fineness of columns. Combined with the commonly used margins of web pages, we preset 12 margins of different sizes, namely:

**layui-col-space *** (1-30)

*Values are 4 singular numbers of px values (1 2 4 5 6 8 10 12 14 15 16 18 20 22 24 25 26 28 30)

<div class="layui-row layui-col-space20">
	<div class="layui-col-md4">
		<!-- Set the background color for the specific content -->
		<div style="background-color: blue">4</div>
	</div>
	<div class="layui-col-md4">
		<div style="background-color: green">4</div>
	</div>
	<div class="layui-col-md4">
		<div style="background-color: blue">4</div>
	</div>
</div>

The ayui col space does not work after setting, mainly because the setting is padding, that is, shrinking inward, so setting the background color padding will also add color, which looks like there is no spacing. You can add a div to achieve the purpose
```
<div class="layui-col-md4" style="background-color: blue">
	4
</div>
```
The meaning will be colored as a whole, and you can't see the details
If the required spacing is higher than 30px (generally not common), we need to use column offset

Column offset

Layui col MD offset * (1-12) to offset the column to the right

The * sign represents the number of columns occupied by offset, which can be selected as 1 - 12
For example, layui-col-md-offset3 means that under the medium desktop screen, the column is offset to the right by 3 column widths.

<div class="layui-row">
	<div class="layui-col-md4">
		<div style="background-color: red">4</div>
	</div>
			       
	<!--Move 4 columns to the right-->
	<div class="layui-col-md4 layui-col-md-offset4">
		<div style="background-color: blue">Move 4 columns to the right</div>
	</div>
</div>

Column nesting

In theory, you can nest grids at infinite levels, which further enhances the performance of grids. Nesting is very simple. You can insert a row element (layui row) into the column element (layui col MD *).

<div class="layui-row">
	<!-- Large boxes occupy six columns -->
	<div class="layui-col-md6">
		<div style="background-color: red">
		 	<div class="layui-row">
		    	<!-- Nested column -->
		        <div class="layui-col-md3" style="background-color: green;">Nested 1</div>
		        <div class="layui-col-md5" style="background-color: indianred;">Nesting 2</div>
		        <div class="layui-col-md2" style="background-color: greenyellow;">Nesting 3</div>
		     </div>
		 </div>
	</div>
</div>

Button

Set class = "layui BTN" to any HTML element to create a basic button.
Define other button styles by appending class es in the format * * * layui btn-{type} * * *.

Basic button

<button type="button" class="layui-btn">A standard button</button>
<a href="http://Www.layui.com "class =" layui BTN "> a jump button</a>
<div class="layui-btn">A button</div>

theme

<button class="layui-btn">Default button</button>
<button class="layui-btn layui-btn-primary">Original button</button>
<button class="layui-btn layui-btn-normal">Versatile button</button>
<button class="layui-btn layui-btn-warm">Warm button</button>
<button class="layui-btn layui-btn-danger">Warning button</button>
<button class="layui-btn layui-btn-disabled">Disable button</button>

size

Syntax: layui btn-{type} where type:lg sm xs fluid

<button class="layui-btn layui-btn-primary layui-btn-lg">Large original button</button>
<button class="layui-btn">Default button</button>
<button class="layui-btn layui-btn-danger layui-btn-sm">Small warning button</button>
<button class="layui-btn layui-btn-xs">Mini button</button>
<button type="button" class="layui-btn layui-btn-fluid">Fluid button (maximize adaptation)</button>

fillet

Syntax: layui BTN radius

<button class="layui-btn layui-btn-radius">Default fillet button</button>    
<button class="layui-btn layui-btn-primary layui-btn-radius">Original fillet button</button>    
<button class="layui-btn layui-btn-normal layui-btn-radius">Versatile fillet button</button>    
<button class="layui-btn layui-btn-warm layui-btn-radius">Warm fillet button</button>    
<button class="layui-btn layui-btn-danger layui-btn-radius">Warning fillet button</button>    
<button class="layui-btn layui-btn-disabled layui-btn-radius">Disable fillet button</button>

Collocation combination

<button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">Large versatile</button>
<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">Small warning</button>
<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled">Mini ban</button>

Icon

Set class = "layui icon" for i tag
Then add the font class corresponding to the icon to the element
List of built-in icons: https://www.layui.com/doc/element/icon.html

<i class="layui-icon layui-icon-heart-fill"></i>

Define its color or size

<i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>

Multiple combinations with text

<button type="button" class="layui-btn">
	<i class="layui-icon layui-icon-down layui-font-12"></i> Button
</button>
			 
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
	<i class="layui-icon layui-icon-left"></i>
</button>

<button type="button" class="layui-btn">			
	<i class="layui-icon">&#Xe608; < / I > Add		
</button>        
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">			
	<i class="layui-icon">&#X1002; < / I > refresh		
</button>        
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">			
	<i class="layui-icon layui-icon-heart"></i> follow		
</button>

Navigation

Navigation is generally applied to the head and side, which is the existence of the whole web page
Dependency loading module: element

Introduce resources

<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script src="layui-v2.6.8/layui/layui.js"></script>

Dependency loading module

<script>
	//Note: navigation depends on element module, otherwise functional operation cannot be performed
	layui.use('element', function(){
	var element = layui.element;
	});
</script>

lateral navigation

Lay UI NAV indicates horizontal navigation
Layui NAV item represents the navigation sub item
Lay UI this indicates the currently selected item
Layui NAV child indicates a secondary menu

<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="">Latest activities</a></li>
  <li class="layui-nav-item layui-this"><a href="">product</a></li>
  <li class="layui-nav-item"><a href="">big data</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">Solution</a>
    <dl class="layui-nav-child"> <!-- Secondary menu -->
      <dd><a href="">Mobile module</a></dd>
      <dd><a href="">Background template</a></dd>
      <dd><a href="">E-commerce platform</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">community</a></li>
</ul>

<a href="javascript:;">Solution</a>
<a href="">Solution</a>

Vertical Navigation

class="layui-nav layui-nav-tree"

Side navigation

class="layui-nav layui-nav-tree layui-nav-side"

Built in pictures and badges

Layui badge displays the number 9
Layui badge dot to display points
Layui NAV img to display pictures

<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="">Console<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">Personal Center<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item">
    <a href=""><img src="//t. Cn / rczsdcq "class =" layui NAV img "> I</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">Modify information</a></dd>
      <dd><a href="javascript:;">security management </a></dd>
      <dd><a href="javascript:;">Back</a></dd>
    </dl>
  </li>
</ul>

theme

//For example, define a navigation with dark green background color
<ul class="layui-nav layui-bg-green" lay-filter="">
  ...
</ul>

Other background topics supported by horizontal navigation are: layui BG cyan, layui BG Molv, and layui BG blue
Other background topics supported by vertical navigation are: layui BG cyan (Tibetan)

crumbs

<span class="layui-breadcrumb" lay-separator="|">
  <a href="">entertainment</a>
  <a href="">Gossip</a>
  <a href="">Sports</a>
  <a href="">Funny</a>
  <a href="">video</a>
  <a href="">game</a>
  <a href="">variety</a>
</span>

tab

The navigation menu can be applied to the head and side. The Tab tab provides multiple styles, supports responsive, supports deleting tabs and other functions.
Dependency loading module: element

<!-- Default style .layui-tab-->
<div class="layui-tab">
<!-- Set tab title .layui-tab-title -->
	<ul class="layui-tab-title">
		<li>Site settings</li>
		<li>user management </li>
		<li class="layui-this">Permission assignment</li>
		<li>Commodity management</li>
		<li>Order management</li>
	</ul>
	<!-- Set the contents of the tab .layui-tab-content -->
	<div class="layui-tab-content">
		<div class="layui-tab-item">Content 1</div>
		<div class="layui-tab-item">Content 2</div>
		<!-- This content is displayed by default -->
		<div class="layui-tab-item layui-show">Content 3</div>
		<div class="layui-tab-item">Content 4</div>
		<div class="layui-tab-item">Content 5</div>
	</div>
</div>

Default style of layui tab
Layui tab brief concise style
Layui tab card style

Tab lay allowclose = "true" with deletion

form

class="layui-table"
Common properties
Lay even if this attribute is set, the effect of interlaced color change can be displayed
Lay skin sets the table border style
Line (line border style)
row (column border style)
nob (borderless style)
Lay size sets the size of the table
sm (small size)
lg (large size)

<table class="layui-table">
    <colgroup>
        <!-- First column width 150 px Second column width 300 px Third column width adaptive 100% -->
        <col width="150">
        <col width="300">
        <col>
    </colgroup>
    <!-- thead The label represents the header area of the table,It must have tr label, tr The label is usually on the first line -->
    <thead>
        <!-- tr Used to define rows in a table,Must be nested in table in -->
        <tr>
            <!-- th Used to define the header in the table,Must be nested in tr in -->
            <th>nickname</th>
            <th>Join time</th>
            <th>autograph</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Virtuous heart</td>
            <td>2016-11-29</td>
            <td>Life is like a practice</td>
        </tr>
        <tr>
            <td>Xu Xianxin</td>
            <td>2016-11-28</td>
            <td>Meet the people you meet among thousands of people, in thousands of years, in the boundless wilderness of time</td>
        </tr>
    </tbody>
</table>

form

Introduced resources
Dependency loading module

<!-- Load module -->
<script type="text/javascript">
    // Load form module
    layui.use("form",function(){
        var form = layui.form;
    });		
</script>

3. Set class = "layui form" in a container to identify a form element block

<form class="layui-form" action="">
...
</form>

4. Basic row block structure, which provides responsive support

Add a class = "layui form item" delegate line to the div“
Add class = "layui form label" representative area to label“
Add a class = "layui input inline" delegate block to the div“

Input box

<form action="" class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">Title Area</label>
		<div class="layui-input-inline">
			<!--Input box-->
			<input type="text" name="title" required lay-verify="required" placeholder="Please enter a title" 
				autocomplete="off" class="layui-input"/>
		</div>
	</div>
			
	<div class="layui-form-item">
		<label class="layui-form-label">Password box area</label>
		<div class="layui-input-inline">
			<input type="password" name="password" required lay-verity="required" placeholder="Please input a password"
				autocomplete="off" class="layui-input"/>
		</div>
	</div>		
</form>

Common properties	describe
required	Browser fixed required field
lay-verify	Type to be verified (if the value is required, it means it is required)
class="layui-input"	General style provided by (general CSS class provided by layui.css)
class="layui-input-block"	Occupy full width
class="layui-input-inline"	Occupied part width
placeholder	When the text box is empty, the default text information is displayed
autocomplete	Whether the form element is automatically filled (it will be filled when the value of the same name attribute exists in the browser cache)

Drop down selection box

Set the default selected item through the selected property
You can set the select and option labels (disable the drop-down box and disable the drop-down option) by enabling disable with the disabled attribute

<div class="layui-form-item">
	<label class="layui-form-label">city</label>
	<div class="layui-input-inline">
		<select name="city" lay-verify="required">
			<option value="">Please select a city</option>
			<option value="010">Beijing</option>
			<option value="021" selected>Shanghai</option>
			<option value="0571" disabled>Hangzhou</option>
		</select>
	</div>
</div>

The optgroup tag groups the select:

<select name="quiz">
  <option value="">Please select</option>
  
  <optgroup label="Urban memory">
    <option value="The first city you work in">Your first city?</option>
  </optgroup>
  
  <optgroup label="Student age">
    <option value="Your job number">Your job number?</option>
    <option value="Your favorite teacher">Your favorite teacher?</option>
  </optgroup>
</select>

Start the search matching function by setting the lay search property

<div class="layui-form-item">
	<select name="city" lay-verify="" lay-search>
		<option value="">Please select</option>
		<option value="010">layer</option>
		<option value="021">form</option>
		<option value="05771">layui</option>
	</select>
</div>

check box

Set the custom text by setting the title property (if you do not need to display text, do not set the title property)
Set the selected item through the checked property
Set the style effect of the check box through the · lay skin attribute (lay skin = "primary" indicates the original effect)
Disable the element with the disabled attribute

<div class="layui-form-item">
	<label class="layui-form-label">hobby</label>
	<div class="layui-input-block">
		<!--Default effect-->
		<input type="checkbox" name="hobby" title="sing" checked value="sing"/>
		<input type="checkbox" name="hobby" title="dance" value="dance"/>
		<input type="checkbox" name="hobby" title="Disable" disabled />
		<br>
		<!--Original effect-->
		<input type="checkbox" name="hobby" title="sing" lay-skin="primary" checked value="sing" />
		<input type="checkbox" name="hobby" title="dance" lay-skin="primary" value="dance" />
		<input type="checkbox" name="hobby" title="Disable" lay-skin="primary" disabled />
	</div>
</div>

switch

Set the check box to lay skin = "switch" to form a switch style
Set the text of the two states of the switch through lay text = "open value | closed value", separated by |
Set the default open state through the checked property
Disable the switch through the disabled property
Set the selected value through the value attribute

<div class="layui-form-item">
	<label class="layui-form-label">switch</label>
	<div class="layui-input-block">
		<input type="checkbox" name="aa" lay-skin="switch" />
		<input type="checkbox" name="bb" lay-skin="switch" checked />
		<input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off" />
		<input type="checkbox" name="dd" lay-skin="switch" checked lay-text="open|close" value="open" />
		<input type="checkbox" name="ee" lay-skin="switch" lay-text="open|close" disabled />
	</div>
</div>

Radio

Set the default checked item through checked
Disable the radio box through the disabled property
Set the selected value through the value attribute

<div class="layui-form-item">
	<label class="layui-form-label">Gender</label>
	<div class="layui-input-block">
		<input type="radio" name="sex" value="nam" title="male" />
		<input type="radio" name="sex" value="nv" title="female" checked />
		<input type="radio" name="sex" value="" title="neutral" disabled />
	</div>
</div>

Text field

Add class = "layui textarea" to the textarea tag

<div class="layui-form-item">
	<label class="layui-form-label">brief introduction</label>
	<div class="layui-input-inline">
		<textarea name="" required lay-verify="required" placeholder="Please enter" class="layui-textarea">
			...			
		</textarea>
	</div>
</div>

Assemble inline forms

In line form: form elements are displayed on one line (div boxes will not occupy all the width)

Set class = "layui inline" for div: define the inner row of the outer layer
Set class = "layui input inline" for div: define the inner line

<div class="layui-form-item">
	<!--Define inner row layui-inline-->
	<div class="layui-inline">
		<!--Define inner row layui-input-inline-->
		<div class="layui-input-inline" style="width:100px;">
			<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input" />
		</div>
		<div class="layui-form-mid">-</div>
		<div class="layui-input-inline" style="width:100px;">
			<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input" />
		</div>
	</div>
				
	<!--Define inner row-->
	<div class="layui-inline">
		<label class="layui-form-label">password</label>
		<!--Define inner row-->
		<div class="layui-input-inline" style="width:100px;">
			<input type="password" name="" autocomplete="off" class="layui-input" />
		</div>
	</div>
				
</div>

Form box style

<form class="layui-form layui-form-pane" action="">
	<div class="layui-form-item" pane>
	<label class="layui-form-label">Radio </label>
		<div class="layui-input-block">
			<input type="radio" name="sex" value="male" title="male">
			<input type="radio" name="sex" value="female" title="female" checked>
		</div>
	</div>
</form>

Finally, the submit and recharge buttons

<div class="layui-form-item">
	<div class="layui-btn" lay-submit lay-filter="formDemoe">Submit now</div>
	<button type="reset" class="layui-btn layui-btn-primary">Reset</button>
</div>

Popup

layer can be used independently or through the LayUI module

Two ways of use

Use as a stand-alone component

First, go to the layer independent version official website to download the component package
After downloading, unzip and copy to the directory

layer.js from (layer\layer.js)
layer.css from (layer\theme\default\layer.css)
Any version above jQuery 1.8

Introduce resources

<!-- introduce layer.css -->
<link rel="stylesheet" href="layer/layer.css" />
<!--introduce jquery.js-->
<script src="js/jquery-3.5.1.js"></script>
<!-- introduce layer.js -->
<script src="layer/layer.js"></script>

Start using

<script type="text/javascript">
	layer.msg('Hello');
</script>

Use modularization

Introduce resources

<!-- introduce layui.css -->
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<!-- introduce layui.js -->
<script src="layui-v2.6.8/layui/layui.js"></script>

Use layui.use() in script to load module dependent modules: layer

<script type="text/javascript">
	layui.use("layer",function(){
        var layer=layui.layer;
		layer.msg('Hello world');
	})		
</script>

Basic parameters

Basic case, three parameters

<script type="text/javascript">
	layui.use("layer",function(){
	var layer=layui.layer;
	layer.open({
		type:0,
		title:"System message",
		//content can pass in any text or html
		content:"Hello" 
			});
		})
</script>

Type - timely layer type

Type Number, the default is 0
Layer provides 5 layer types. The values that can be passed in are
0 information box, default

1 page layer

2 iframe layer

3 loading layer

4 tips layer

If you call by * layer.open({type: 1}) *, type is required (except the information box)

Title - title

The type is String/Array/Boolean. The default is information
If you do not want to display the title, title:false
title supports three types

If an ordinary string is passed in, such as Title: 'I am the title', only the title text will be changed;

If you need to customize the title area style, Title: ['text', 'color: red; font size: 18px;'], the second item of the array can be written in any css style

If you do not want to display the title bar, title: false

Content content

Type: String/DOM/Array, default: ''

The page layer is the information prompt
iframe pops up a page, such as Baidu page
tips is a small information prompt box

layer.open({
	type:1,
	title:"System message",
	content:"<div style='height:200px;width:200px'>Hello</div>"
});

layer.open({
	type:2,
	title:"System message",
	content:"https://www.baidu.com/"
});

Content if no scroll bar appears, then content: [url ',' no ']
Content to fix the width and height, content: 'url', area: '500px'

area width height

Type: String/Array, auto by default
By default, the layer is adaptive in width and height

But when you only want to define the width, you can area: '500px', and the height is still adaptive

When you want to define both width and height, you can use area: ['500px', '300px']

<span>Content 1</span>
<span id="sp">Content 2</span>
<span>Content 3</span>
<span>Content 4</span>
	
<script type="text/javascript">
	layui.use("layer",function(){
		var layer=layui.layer;
			/* tips layer */
			 layer.open({
			  	type: 4,
			     content: ['content', '#sp '] / / the second item of the array is the adsorbed element selector or DOM
		});	 
	});
</script>

Icon icon

Type: Number, default: - 1 (information box) / 0 (loading layer)
The information box does not display icons by default. When you want to display icons, the default skin can be passed in 0-6
If it is a loading layer, you can pass in 0-2

script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;
            //Loading layer
            layer.alert('awesome', {
                icon: 1				// 0 ~ 6 can be filled in
            });
        })
</script>

 <script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;
            //Information layer
            layer.msg('unhappy..', {
                icon: 5				// -1 ~ 6 can be filled
            });
        })
 </script>

<script type="text/javascript">
	layui.use('layer', function() {
     	var layer = layui.layer;
			// Loading layer
            layer.load(1); 		// 0 ~ 2 can be filled in
        })
</script>

btn button

Type: String/Array, the default is "confirm"
In the message box (type = 0) mode, btn is a confirmation button by default, other layer types are not displayed by default, and the loading layer and tips layer are invalid.
When you only want to customize one button, you can btn: 'I see'. When you want to define two buttons, you can btn: ['yes',' no ']
Of course, you can also define more buttons, such as BTN: ['button 1', 'button 2', 'button 3',...], the callback of button 1 is yes, and from button 2, the callback is btn2: function() {}, and so on

<body>
    <script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;
            layer.msg('Would you like to be friends with me?', {
                time: 0, //The first pop-up layer does not close automatically (because the default pop-up layer will 5s close automatically)
                btn: ['Of course', 'Cruel refusal'], // Button
                yes: function(index) {
                    layer.close(index); // Closes the current pop-up box
                    layer.msg('Hello, new friend!', {
                        icon: 6, // Icon
                        btn: ['happy', 'happy']
                    });
                }
            });
        })
    </script>
</body>

MS required for time auto shutdown

Type: Number, the default is 0
It is not closed by default. When you want to close it, you can time:5000, which means it will close automatically after 5 s

offset - coordinates

Type: String/Array, default: vertical horizontal center
offset is not set by default. But if you don't want to center vertically and horizontally

Core method

Original core method

layer.open(options)

<body>
    <script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;

            var index = layer.open({
                content: 'test'
            });
            console.log(index);
            //The index obtained is an important credential, which is a required parameter of methods such as layer.close(index).

        })
    </script>
</body>

General information box

layer.alert(content, options, yes)

<script type="text/javascript">
    layui.use('layer', function() {
        var layer = layui.layer;

        //eg1
        //layer.alert('Just want a simple prompt ');
        //eg2
        layer.alert('Added an icon', {
            icon: 1
        });
    })
</script>

Query box

layer.confirm(content, options, yes, cancel)

layer.confirm('is not?', {icon: 3, title:'Tips'}, function(index){
  //do something
  
  layer.close(index);
});

prompt box

layer.msg(content, options, end)

layer.msg('What do you want to do after closing', function(){
  //do something
});

Loading layer

layer.load(icon, options)

var index = layer.load(2, {time: 10*1000}); //Another style is changed, and the maximum waiting time is set to 10 seconds

Date and time selection

Introduce resources

<!-- introduce layui.css -->
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<!-- introduce layui.js -->
<script src="layui-v2.6.8/layui/layui.js"></script>

Use layui.use() in script to load the module; Dependent module: laydate

<body>
    <!-- Use a container element to put our date time selector -->
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date1" />
    </div>
    <script type="text/javascript">
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            // Load laydate instance
            laydate.render({
                elem: "#Date1 "/ / bind the element with id date1
            })
        })
    </script>
</body>

Basic parameter options

Set the basic parameters through the core method: laydate.render(options)

elem binding element

Type: String/DOM, default: None
Required item. The element used to perform binding date rendering. The value is usually a selector or DOM object

<script>
	layui.use('laydate',function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test' 
       //Or elem: document.getElementById('test '), elem: lay('#test '), etc
        })
    })
</script>

The type control selects the type

Type: String, default value: date
It is used to provide different selector types separately. The optional values are shown in the table below

type optional value	name	purpose
year	Year selector	Only year list selection is provided
month	Year / month selector	Only year and month options are available
date	Date Pickers	Optional: year, month and day. The default value of type is generally optional
time	Time selector	Only hours, minutes and seconds are available
datetime	date time picker	Optional: year, month, day, hour, minute and second

<body>
    <!-- Use a container element to put our date time selector -->
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date1" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date2" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date3" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date4" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date5" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date6" />
    </div>

    <script type="text/javascript">
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            // Load laydate instance
            laydate.render({
                elem: "#Date1 ", / / bind the element with id of date1
            });

            laydate.render({
                elem: "#Date2 ", / / bind the element with id of date2
                type: "year", // Year selector
            });

            laydate.render({
                elem: "#Date3 ", / / bind the element with id of date3
                type: "month" // Year / month selector
            });

            laydate.render({
                elem: "#Date4 ", / / bind the element with id of date4
                type: "date" // Date selector
            });

            laydate.render({
                elem: "#Date5 ", / / bind the element with id of date5
                type: "time" // Time (hour, minute and second) selector
            });

            laydate.render({
                elem: "#date6 ", / / bind the element with id of date6
                type: "datetime" // Year month day hour minute second selector
            });

        })
    </script>
</body>

Format custom format

Type: String, default: yyyy MM DD
Set a date format you need through the format and length of the date and time. The formats supported by layDate are as follows:

Formatter	explain
yyyy	Year, at least four digits. If it is less than four digits, fill zero in front
y	The number of digits of the year is not limited, that is, no matter how many digits of the year, zero is not filled in front of it
MM	Month, at least two digits. If it is less than two digits, fill zero in front.
M	Month, one digit allowed.
dd	Date, at least two digits. If it is less than two digits, fill zero in front.
d	Date, one digit allowed.
HH	Hours, at least two digits. If it is less than two digits, fill zero in front.
H	Hours, one digit allowed.
mm	Minutes, at least two digits. If it is less than two digits, fill zero in front.
m	Minutes, one digit allowed.
SS	Seconds, at least two digits. If it is less than two digits, fill zero in front.
S	Seconds, one digit allowed.

The above different format characters are combined into a date time string, which can be arranged arbitrarily, as shown below:

format	Example value
yyyy-MM-dd HH:mm:ss	2017-08-18 20:08:08
MM dd yyyy HH h mm min ss s	August 18, 2017 20:08:08
yyyyMMdd	20170818
dd/MM/yyyy	18/08/2017
M / yyyy	August 2017
d, M	August 18th
Beijing time: HH:00 mm	Beijing time: 20:08
One night in the M month of yyyy, about H o'clock	One night in August 2017, about 20 o'clock

<body>
    <!-- Use a container element to put our date time selector -->
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date1" />
    </div>

    <script type="text/javascript">
        // Loading the laydate module
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            //Custom date format
            laydate.render({
                elem: '#date1',
                format: 'yyyy/MM month dd day' // MM dd of yyyy can be combined arbitrarily
            });
        });
    </script>
</body>

Value initial value

Type: String, default value: new Date()
It supports the input of date format characters that conform to the setting of the format parameter, or new Date()

<script type="text/javascript">
    // Loading the laydate module
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        // Pass in characters in format to the initial value
        laydate.render({
            elem: '#date1',
            value: '2018-08-18' //The format set by the format parameter must be followed
        });
        // Pass in the Date object to the initial value
        laydate.render({
            elem: '#date2',
            value: new Date(1534766888000) //The parameter is the timestamp of 2018-08-20 20:08:08
        });
    });
</script>

lang language

Type: String, default: cn
Built in two language versions: cn (Chinese version) and en (International Version, i.e. English version).

<script type="text/javascript">
    // Loading the laydate module
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1',
            lang: 'en'
        });
    });
</script>

Theme theme

Type: String, default: default
A variety of themes are built in, and the optional values of theme are: default (simple by default), molv (dark green background), # color value (custom color background), grid (grid theme)

<script type="text/javascript">
    // Loading the laydate module
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1',
            theme: 'molv'
        });

    });
</script>

calendar Gregorian Festival

Type: Boolean, default: false
Built in some important Gregorian calendar festivals commonly used in China, which can be opened by setting true. The international version will not be displayed

<script type="text/javascript">
    // Loading the laydate module
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1',
            lang: 'cn',
            calendar: true
        });

    });
</script>

paging

Module loading Name: laypage
The use of laypage is very simple. Point to a container for storing paging. Get some initial values through the server to complete paging rendering

<body>
    <div id="page"></div>
    <script type="text/javascript">
        // Loading laypage module
        layui.use('laypage', function() {
            var laypage = layui.laypage;
            // Load laypage instance
            laypage.render({
                elem: "page", // The elem ent attribute is bound to the ID attribute value of the container and does not need to be added#
                count: 100, // Total quantity, usually obtained from the server
            });

        });
    </script>
</body>

Basic parameter options

Set the basic parameters through the core method: laypage.render(options)

elem binding element

Type: String/Object, filled in by comparison
elem points to the container where pages are stored. The values can be container ID and DOM object

elem: 'id' note: the # ` sign cannot be added here

elem: document.getElementById('id')

Total count data

Type: Number, required
The total number of data is generally obtained through the server
count: 100

limit number of items displayed per page

Type: Number, default value: 10
laypage will calculate the number of pages with count and limit.

<body>
    <div id="page"></div>

    <script type="text/javascript">
        // Loading the laydate module
        layui.use('laypage', function() {
            var laypage = layui.laypage;
            // Load laypage instance
            laypage.render({
                elem: "page", // The elem ent attribute is bound to the ID attribute value of the container and does not need to be added#
                count: 100, // Total quantity, usually obtained from the server
                limit: 5, // Quantity displayed per page
            });
        });
    </script>
</body>

Layout custom layout

Type: Array, default value: ['prev', 'page', 'next']
Custom typesetting. The optional values are:
- count: total entry output area
- limit: entry options area
- prev: Previous page area
- page: paging area
- Next: next page area
- Refresh: page refresh area (new in layui 2.3.0)
- skip: quick jump page area

<body>
    <div id="page"></div>

    <script type="text/javascript">
        // Loading the laydate module
        layui.use('laypage', function() {
            var laypage = layui.laypage;
            // Load laypage instance
            laypage.render({
                elem: "page", // The elem ent attribute is bound to the ID attribute value of the container and does not need to be added#
                count: 100, // Total quantity, usually obtained from the server
                layout: ['prev', 'page', 'next', 'limit', 'skip', 'count', 'refresh']
            });
        });
    </script>
</body>

limits selection of the number of entries per page

Type: Array, default: [10,20,30,40,50]
If limit is enabled for the layout parameter, the select drop-down box for the number of entries per page will appear

Number of consecutive page numbers in groups

Type: Number. The default value is 5
The number of consecutive pages is the number of pages displayed before the ellipsis... In the paging area

jump switch paging callback

Triggered when paging is switched, the function returns two parameters:
obj (all option values of the current page)
First (whether it is the first time, which is generally used to judge the initial loading)

jump: function(obj, first) {
    // obj contains all the parameters of the current page, such as:
    console.log(obj.curr); //Get the current page to request the data of the corresponding page from the server.
    console.log(obj.limit); //Get the number of entries displayed per page
    //Do not execute for the first time
    if (!first) {
    	//do something
    }
}

Data table

It supports fixed header, fixed row, fixed column left / right, drag and drop to change column width, sorting, multi-level header, cell custom template, table overloading (such as search, condition filtering, etc.), check box, pagination, cell editing, etc.
Module loading Name: table

<body>
    <!-- Prepare container (label), set id Attribute value -->
    <div id="demo"></div>

    <script type="text/javascript">
        // Load table module
        layui.use('table', function() {
            var table = layui.table;
            // Load table instance
            table.render({
                elem: "#The demo", //elem attribute is used to bind the id attribute value of the container
                url: "js/user.json", // data interface 
                cols: [
                    [{
                        field: 'id',
                        title: 'User number',
                        sort: true,
                        width: 120
                    }, {
                        field: 'username',
                        title: 'User name',
                        width: 100
                    }, {
                        field: 'sex',
                        title: 'Gender',
                        width: 100,
                        sort: true
                    }, {
                        field: 'city',
                        title: 'city',
                        width: 100
                    }, {
                        field: 'sign',
                        title: 'autograph'
                    }]
                ],
            })

        })
    </script>
</body>

Note: there is a data interface url above, which is usually obtained from the server. Let's simulate the incoming json data locally first

{
	"code": 0,
	"msg": "",
	"count": 50,
	"data": [{
			"id": 10000,
			"username": "user-0",
			"sex": "female",
			"city": "city-0",
			"sign": "autograph-0"			
		},
		{
			"id": 10001,
			"username": "user-1",
			"sex": "male",
			"city": "city-1",
			"sign": "autograph-1"
		},
		{
			"id": 10002,
			"username": "user-2",
			"sex": "female",
			"city": "city-2",
			"sign": "autograph-2"
		},
		{
			"id": 10003,
			"username": "user-3",
			"sex": "female",
			"city": "city-3",
			"sign": "autograph-3"
		},
		{
			"id": 10004,
			"username": "user-4",
			"sex": "male",
			"city": "city-4",
			"sign": "autograph-4"
		}

	]
}

Bind container, set data interface, and set corresponding fields in header

Three initialization rendering methods

Method rendering

1. The basic parameter setting is put in the JS code, and the original table tag only needs a selector

<div id="demo"></div>

2. Render table

layui.use('table',function(){
	var table = layui.table;
    table.render({
                elem: "#demo",
                url: 'js/user.json', // data interface 
                height: 315, // Container height
                page:true, // Open paging
                cols: [[  // Set header
                    {field: 'id', title: 'ID'},
                    {field: 'username', title: 'user name'},
                    {field: 'sex', title: 'Gender'}
                ]]
            });
        });

Note: the table.render() method returns an object: var tableIns = table.render(options), which can be used to "overload" the current table.

Render Automation

Configure the corresponding parameters in a section of table container, and the table module will automatically render it without writing the initial rendering method. We need to pay attention to the following three points

< Table > tag with class = "layui table"
Set the attribute lay data = "" on the label to configure some basic parameters
Set the attribute lay data = "" in the < th > tag to configure header information.

<body>
    <table class="layui-table" lay-data="{height:315, url:'js/user.json', 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}">user name</th>
                <th lay-data="{field:'sex', width:80, sort: true}">Gender</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">
        layui.use('table', function() {
            var table = layui.table;

        })
    </script>
</body>

elem binding element

Type: String/DOM
Specify the selector or DOM method of the original table container, and the rendering method is required

cols set header

Type: Array
Set the header. The value is a two-dimensional array. The header parameters are set in the array. The header parameters are as follows:

parameter	type	explain	Example value
field	String	Set the field name. It is very important to correspond to the table data column one by one	usename
title	String	Set title name	user name
width	Number/String	Set the column width. If it is not filled in, it will be allocated automatically; if it is filled in, the supported values are: number and percentage.	200/30%
type	String	Set the column type. The optional values are: normal (general column, no setting required) checkbox (check box column) Radio (radio box column, new in layui 2.4.0) numbers (serial number column) space (empty column)	Any optional value
sort	Boolean	Allow sorting (default: false). If true is set, the sorting icon will be displayed in the corresponding header, enabling the sorting function for columns.	true
unresize	Boolean	Whether to disable dragging column width (default: false). By default, whether to disable it will be determined according to the column type. For example, the check box column will be disabled automatically. For other ordinary columns, dragging column width is allowed by default. Of course, you can also set true to disable this function.	false
edit	String	Cell editing type (not enabled by default) currently only supports: text (input box)	text

url asynchronous data parameter

In a word, you don't have to remember. You can check, use and modify

page open paging

Type: Boolean/Object, enable paging (false by default)
It supports passing in an object, which can contain all supported parameters of the laypage component (except jump and elem)

<body>
    <!-- Prepare a container,set up id Attribute value -->
    <table id="demo"></table>
    <script type="text/javascript">
        // Load table module
        layui.use('table', function() {
            var table = layui.table;
            // Load table instance
            table.render({
                elem: "#Demo ", / / the elem attribute is used to bind the id attribute value of the container
                url: "js/user.json",// data interface 
                cols:[[
                    // Set serial number
                    {field:'aa',type:"numbers"},
                    // Set check box column
                    {field:'bb',type:"checkbox"},
                    {field:'id',title:'User number',sort:true,width:120},
                    {field:'username',title:'User name',width:100},
                    {field:'sex',title:'Gender',width:100,sort:true},
                    {field:'city',title:'city',width:100},
                    {field:'sign',title:'autograph'}
                ]],
                // Open paging
                page: true
            })
        })
    </script>
</body>

{field: 'aa', type: 'numbers'} serial number
{field: 'bb', type: 'checkbox'} check box column

Toolbar open table header toolbar

Type: String/DOM/Boolean. Open the table header toolbar. This parameter supports four types of values

Toolbar: '#toolbarDemo' points to the custom toolbar template selector
toolbar: '
xxx
’Pass in toolbar template characters directly
toolbar: true only enables the toolbar and does not display the left template
Toolbar: 'default' enables the default built-in template to be displayed on the left side of the toolbar

<body>
    <div id="demo"></div>

    <!-- Table toolbar -->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <!-- lay-event Bind event name to element -->
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
                Get selected row data
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
                Get selected number
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">
                Verify that all are selected
            </button>
        </div>
    </script>

    <!-- Header toolbar -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">edit</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">delete</a>
    </script>

    <script type="text/javascript">
        layui.use('table', function() {
            var table = layui.table;

            table.render({
                elem: "#demo",
                url: 'js/user.json', // data interface 
                cols:[[
						// Set serial number column
						{field:'aa',type:"numbers"},
						// Set check box column
						{field:'aa',type:"checkbox"},
						{field:'id',title:'User number',sort:true,width:120,hide:true},
						{field:'username',title:'User name',width:100,edit:'text'},
						{field:'sex',title:'Gender',width:100,sort:true},
						{field:'city',title:'city',width:100},
						{field:'sign',title:'autograph',edit:'text'},
						// Set header toolbar
						{field:"operation",toolbar:"#barDemo"}
					]],
					// Open paging
					page:true,
					// Set table toolbar
					toolbar:"#toolbarDemo"
            })
        })
    </script>
</body>

defaultTooBlar header toolbar right Icon

Type: Array, default value: ["filter", "exports", "print"]
This parameter can freely configure the icon button on the right side of the header toolbar. The value is an array, and the following optional values are supported:
- Filter: Show filter Icon
- exports: displays the export icon
- Print: displays the print icon

Monitor header toolbar events

Triggered when an element with the attribute lay event = "" is set in the header toolbar area

Syntax: table.on('event(filter) ', callback)
Event is the built-in event name, and filter is the value set by the container lay filter

The callback function returns an object parameter

The ID attribute value can be obtained from the obj.config object, which represents the ID attribute value of the current container
The event name can be obtained from the obj.event object
table.checkStatus(obj.config.id) gets the selected record object of the current table and returns an array

<body>
    <div id="demo" lay-filter="test"></div>

    <!-- Table toolbar -->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <!-- lay-event Bind event name to element -->
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
                Get selected row data
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
                Get selected number
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">
                Verify that all are selected
            </button>
        </div>
    </script>

    <!-- Header toolbar -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">edit</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">delete</a>
    </script>

    <script type="text/javascript">
        layui.use('table', function() {
            var table = layui.table;

            table.render({
                elem: "#demo",
                url: 'js/user.json', // data interface 
                cols: [
                    [
                        // Set serial number column
                        {
                            field: 'aa',
                            type: "numbers"
                        },
                        // Set check box column
                        {
                            field: 'aa',
                            type: "checkbox"
                        }, {
                            field: 'id',
                            title: 'User number',
                            sort: true,
                            width: 120,
                            hide: true
                        }, {
                            field: 'username',
                            title: 'User name',
                            width: 100,
                            
                        }, {
                            field: 'sex',
                            title: 'Gender',
                            width: 100,
                            sort: true
                        }, {
                            field: 'city',
                            title: 'city',
                            width: 100
                        }, {
                            field: 'sign',
                            title: 'autograph',
                            
                        },
                        // Set header toolbar
                        {
                            field: "operation",
                            toolbar: "#barDemo"
                        }
                    ]
                ],
                // Open paging
                page: true,
                // Set table toolbar
                toolbar: "#toolbarDemo"
            })

            /**
             * Header listening event
             * 	Syntax:
             * 		table.on('toolbar(demo)',function(obj){
                 
                    });
                    Note: demo represents the lay filter attribute value set on the container
                */
            
            table.on('toolbar(test)', function(obj) {
                // console.log(obj);
                // The ID attribute value can be obtained from the obj.config object, that is, the ID attribute value of the current container, that is, demo 
                // Get the selected record object of the current table and return data
                var checkStatus = table.checkStatus(obj.config.id);
                console.log(checkStatus);
                // Get event name
                var eventName = obj.event;
                // Judge the event name and execute the corresponding code
                switch (eventName) {
                    case "getCheckData":
                        // Gets the array of selected records
                        var arr = checkStatus.data;
                        // Parses an array into a string
                        layer.alert(JSON.stringify(arr));
                        break;
                    case "getCheckLength":
                        // Gets the array of selected records
                        var arr = checkStatus.data;
                        layer.msg("Checked" + arr.length + "Records!")
                        break;
                    case "isAll":
                        // Judge whether to select all through the isAll attribute
                        var flag = checkStatus.isAll;
                        var str = flag ? 'Select all' : 'Not all selected';
                        layer.msg(str);
                        break;
                    case "LAYTABLE_TIPS":
                        layer.alert("This is a custom icon button");
                        break;
                }
            });

        })
    </script>
</body>

lay-filter="test"
table.on('toolbar(test)', function(obj) {｝

Listen for line toolbar events

Syntax: table.on('tool(filter) ', callback {})

Filter the value set for the container lay filter

The callback function returns an object parameter

obj.data get the current row data
obj.event obtains the value corresponding to lay event (or the value corresponding to the header event parameter)

/**
  * Listen for line toolbar events
  */
table.on('tool(test)', function(obj) {
	// Get the relevant information of the current operation line
    var tr = obj.data;
    console.log(tr);
    // Get event name
    var eventName = obj.event;

    // Judge the event name and execute the corresponding method
    if (eventName == 'del') { // delete
    	// Confirmation box
    	layer.confirm("Are you sure you want to delete?", function(index) {
    		// Delete specified tr del()
     		obj.del();
        	// Close the pop-up layer (index is the subscript of the current pop-up layer)
        	layer.close(index);
     	});
     } else if (eventName == 'edit') { // edit
     	 // Output box
          layer.prompt({
          		// Type of form element 0 = text box 1 = password box 2 = text field
                formType: 0,
                value: tr.username // Set the value of the input box
                }, function(value, index) {
                // Modify the value of the specified cell
                // Value indicates the value entered
                obj.update({
                    username: value
                  });
                  // Turn off pop-up layer
                  	layer.close(index);
                  });
                }
 });

Listen to cell editing

Open cell editing before listening to cell editing

edit type String, cell editing type (not enabled by default). Currently, only: text (input box) is supported

Syntax: table.on('edit(filter) ', callback)

Filter the value set for the container lay filter

Triggered when the cell is edited and the value changes, and the callback function returns an object parameter

obj.value get the modified value
obj.filed get the edited field name
obj.data obtains all relevant data of the row

Listen for cell editing events

The edit attribute is set in the header. The cell editing type (not enabled by default) currently only supports: text (input box)

table.on('edit(test)', function(obj) {
	console.log(obj);
    // Gets the modified value
    var value = obj.value;
   	// Get the currently modified tr object
    var data = obj.data;
    // Get modified field name
    var field = obj.field;
    layer.msg("[ID:" + data.id + "]of" + field + "Change the value of the field to:" + value);
});

Data table reload

Syntax: table.reload(ID,options,deep)

The parameter id is the value corresponding to the basic parameter id
The parameter options is the basic parameter
Parameter deep: whether to adopt deep overloading (i.e. parameter deep cloning, i.e. the parameters at the initial and last overloading are always carried during overloading). The default is false. Note: the deep parameter is added from layui 2.6.0.

1. Add a search box

<div class="demoTable">
   search ID: 
   <div class="layui-inline">
    	<input class="layui-input" name="id" id="demoReload" autocomplete="off">
   </div>
   <button class="layui-btn" id="searchBtn">search</button>
</div>

2. Get a jquery object

var $ = layui.jquery; // Get jquery object

3. Bind events to specified elements

$(document).on('click', '#searchBtn', function(data) {
	// Get search text box object
	var sreach = $("#demoReload");
	// Call the overloaded method table.reload(ID, options) of the data table
	table.reload('demo', {
		where: { // Set the parameters to be passed
			    id: sreach.val(),
			     name: "zhangsan"
			   },
	page: {
	// Indicates that the condition query starts from the first page; If it is not set, the query will start from the current page, and all data in front of this page will not be included in the conditional filter
		curr: 1 // Start on the first page
		}
	});
});

Posted by larissahn on Sat, 18 Sep 2021 03:26:00 -0700

Programmer Group

LayUI framework quick start

LayUI overview

Download and structure

Quick use

layout

Layout container

grid system

Column combination

Column margin

Column offset

Column nesting

Button

Basic button

theme

size

fillet

Icon

Navigation

lateral navigation

Vertical Navigation

Side navigation

theme

crumbs

tab

form

form

Input box

Drop down selection box

check box

switch

Radio

Text field

Assemble inline forms

Form box style

Popup

Two ways of use

Use as a stand-alone component

Use modularization

Basic parameters

Type - timely layer type

Title - title

Content content

area width height

Icon icon

btn button

MS required for time auto shutdown

offset - coordinates

Core method

Original core method

General information box

Query box

prompt box

Loading layer

Date and time selection

Basic parameter options

elem binding element

The type control selects the type

Format custom format

Value initial value

lang language

Theme theme

calendar Gregorian Festival

paging

Basic parameter options

elem binding element

Total count data

limit number of items displayed per page

Layout custom layout

limits selection of the number of entries per page

Number of consecutive page numbers in groups

jump switch paging callback

Data table

Three initialization rendering methods

Method rendering

Render Automation

elem binding element

cols set header

url asynchronous data parameter

page open paging