前端学习之LayUi框架基础_layui-container-CSDN博客

本文链接：https://blog.csdn.net/qq_42121367/article/details/108351700

今天笔者学习了LayUi框架的一些基础内容，总体来说，LayUi框架比BootStrap框架更倾向于后台的搭建和使用，样式更加多样，说明也对国人更加友好，毕竟是国人开发的框架嘛~废话不多少，开始介绍。

LayUI 的介绍

Layui（谐音：类UI) 是⼀款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和 BootStrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。

LayUI 的特点

Layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。
Layui是提供给后端开发人员的ui框架，基于DOM驱动。

使用

在官网首页下载到 layui 的最新版，获得 layui 后，将其完整地部署（拷贝到项目中）到你的项目目录，你只需要引入下述两个文件：

./layui/css/layui.css

./layui/layui.js // 提示：如果是采用非模块化方式，此处可换成：./layui/layui.all.js

基本的入门页面Hello World

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1">
 <title>开始使⽤layui</title>
 <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
<script src="layui/layui.js"></script>
<script>
 // 模块和回调函数
 // ⼀般直接写在⼀个js⽂件中
 layui.use(['layer', 'form'], function(){
 var layer = layui.layer
 ,form = layui.form;
 layer.msg('Hello World');
 });
</script>
</body>
</html>

还需要声明需要使用的模块和回调函数。参照官方文档，选择自己想要的效果就行。比如：

<script>
 // 注意：导航 依赖 element 模块，否则⽆法进⾏功能性操作
 layui.use('element', function(){
 var element = layui.element;
 //…
 });
</script>

页面元素

布局

布局容器

将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应。

<div class="layui-container">
 <div class="layui-row">
 ……
 </div>
</div> 

<div class="layui-fluid">
 <div class="layui-row">
 ……
 </div>
</div>

栅格系统

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 引进了⼀套具备响应式能力的栅格系统。将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

栅格布局规则

采用 layui-row 来定义行，如：
```
<div class="layui-row"></div>
```
采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量 md 代表的是不同屏幕下的标记；变量 * 代表的是该列所占⽤的12等分数（如6/12），可选值为 1 - 12；如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自另起一行。
列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）。
可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
可以在列（column）元素中放入你自己的任意元素填充内容

示例：

<h3>常规布局（以中型屏幕桌⾯为例）：</h3>
<div class="layui-row">
 <div class="layui-col-md9" style="background-color: #00F7DE;">
 你的内容 9/12
 </div>
 <div class="layui-col-md3" style="background-color: rosybrown;">
 你的内容 3/12
 </div>
</div>

响应式规则

栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理。

一眼看去，有没有感觉和BootStrap有点相似？

<div class="layui-container" style="background-color: #007DDB;">
			<div class="layui-row">
				<div class="layui-col-xs10 layui-col-sm6 layui-col-md9 layui-col-lg11" style="background-color: #00F7DE;">
				 你的内容 9/12
				 </div>	
				 <div class="layui-col-xs2 layui-col-sm6 layui-col-md3 layui-col-lg1" style="background-color: rosybrown;">
				 你的内容 3/12
				 </div>
			</div>
		</div>

通过控制台切换设备显示即可查看效果

列边距

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进⼀步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：

layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 layui-col-space8

layui-col-space10 layui-col-space12 layui-col-space14 layui-col-space15 layui-col-space16 layui-col-space18

layui-col-space20 layui-col-space22 layui-col-space24 layui-col-space25 layui-col-space26 layui-col-space28

layui-col-space30

支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔

示例：

<h3>列间距</h3>
<div class="layui-row layui-col-space10">
 <div class="layui-col-md4" >
 <!-- 需要在layui-col-md4⾥⾯再加⼀层div -->
 <div style="background-color: #009688;">
 1/3
 </div>
 </div>
 <div class="layui-col-md4">
 <div style="background-color: burlywood;">
 1/3
 </div>
 </div>
 <div class="layui-col-md4">
 <div style="background-color: silver;">
 1/3
 </div>
 </div>
</div>

注：

layui-col-space：设置后不起作用主要是因为设置的是padding,也就是说是向内缩，所以设置背景色padding也是会添上颜色，看起来好像没有间距一样。可以在里面在加⼀个div，来达到目的。
间距一般不高于30px，如果超过30，建议使用列偏移。

列偏移

对列追加类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度

<h3>列偏移</h3>
<div class="layui-row">
 <div class="layui-col-md4" style="background-color: rosybrown;">
 4/12
 </div>
 <div class="layui-col-md4 layui-col-md-offset4"
 style="background-color: cornflowerblue;">
 偏移4列，从⽽在最右
 </div>
</div>

注：列偏移可针对不同屏幕的标准进行设定，在当前设定的屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。

列嵌套

可以对栅格进行无穷层次的嵌套。在列元素（layui-col-md*）中插入行元素（layui-row），即可完成嵌套。

<h3>列嵌套</h3>
		<div class="layui-row layui-col-space5">
		 <div class="layui-col-md6" style="background-color: thistle;">
		 <div class="layui-row">
		 <div class="layui-col-md3" style="background-color: burlywood;" >
		 内部列
		 </div>
		 <div class="layui-col-md5" style="background-color: indianred;">
		 内部列
		 </div>
		 <div class="layui-col-md4" style="background-color:
		mediumaquamarine;">
		 内部列
		 </div>
		 </div>
		 </div>
		 </div>

基本元素

按钮

用法

向任意HTML元素设定 class="layui-btn"，建立⼀个基础按钮。通过追加格式为 layui-btn-{type} 的 class 来定义其它按钮风格。

<!-- 基础按钮 -->
<button type="button" class="layui-btn">⼀个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">⼀个可跳转的按钮</a>
<div class="layui-btn">⼀个按钮</div>

主题

示例：

<!-- 不同主题的按钮 -->
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖⾊按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁⽤按钮</button>

尺寸

<!-- 不同尺⼨的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">⼤型</button>
<button class="layui-btn">默认</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">⼩型</button>
<button class="layui-btn layui-btn-xs">迷你</button>

圆角

layui-btn-radius

<button class="layui-btn layui-btn-radius">默认按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖⾊按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁⽤按钮</button>

图标

可用字符集，也可用类样式选择

<button type="button" class="layui-btn">
 <i class="layui-icon">&#xe608;</i> 添加
</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon layui-icon-release" style="color: #0000FF"></i> 刷新
<i class="layui-icon layui-icon-face-smile" style="color: #1E9FFF;"></i>  
</button>

水平（垂直、侧边）导航

<ul class="layui-nav">水平
<!--<ul class="layui-nav layui-nav-tree">垂直-->
<!--<ul class="layui-nav layui-nav-tree layui-nav-side">侧边-->
<li class="layui-nav-item"><a href="javascript:void(0);">电竞</a></li>
<li class="layui-nav-item"><a href="javascript:void(0);">美食</a></li>
<li class="layui-nav-item">
<a href="javascript:void(0);">生活</a>
<dl class="layui-nav-child">
<dt><a href="javascript:void(0);">吃饭</a></dt>
<dt><a href="javascript:void(0);">睡觉</a></dt>
<dt><a href="javascript:void(0);">游戏</a></dt>
</dl>
</li>
<li class="layui-nav-item"><a href="javascript:void(0);">电商</a></li>
<li class="layui-nav-item"><a href="javascript:void(0);">体育</a></li>
</ul>

水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：

水平导航：layui-nav

垂直导航需要追加class：layui-nav-tree

侧边导航需要追加class：layui-nav-tree layui-nav-side

导航主题

通过对导航追加CSS背景类，让导航呈现不同的主题色

<!-- 如定义⼀个墨绿背景⾊的导航 -->
<ul class="layui-nav layui-bg-move" >
 …
</ul>

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）

垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

面包屑

<span class="layui-breadcrumb" lay-separator="-">
<a href="javascript:void(0);">吃饭</a>
<a href="javascript:void(0);">睡觉</a>
<a href="javascript:void(0);">游戏</a>
<a href="javascript:void(0);"><cite>视频</cite></a>
</span>

选项卡

依赖加载模块：element

<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">吃饭</li>
<li>睡觉</li>
<li>游戏</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">吃饭</div>
<div class="layui-tab-item">睡觉</div>
<div class="layui-tab-item">游戏</div>
</div>
</div>

选项卡风格

默认风格：layui-tab

简洁风格需要追加class：layui-tab-brief

卡片风格需要追加class：layui-tab-card

带删除的选项卡

可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

表格

常规用法

<table class="layui-table">
 <colgroup>
 <col width="150">
 <col width="200">
 <col>
 </colgroup>
 <thead>
 <tr>
 <th>昵称</th>
 <th>加⼊时间</th>
 <th>签名</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>贤⼼</td>
 <td>2016-11-29</td>
 <td>⼈⽣就像是⼀场修⾏</td>
 </tr>
 <tr>
 <td>许闲⼼</td>
 <td>2016-11-28</td>
 <td>于千万⼈之中遇⻅你所遇⻅的⼈，于千万年之中，时间的⽆涯的荒ᰀ⾥…</td>
 </tr>
</tbody>
</table>

就是在 table 容器中加一个类

基础属性

表单

依赖加载模块：form

在一个容器中设定 class="layui-form" 来标识一个表单元素块

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

</form>

基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。

<div class="layui-form-item">
 <label class="layui-form-label">标签区域</label>
 <div class="layui-input-block">
 原始表单元素区域
 </div>
</div>

输入框

<input type="text" name="title" required lay-verify="required" placeholder="请
输⼊标题" autocomplete="off" class="layui-input" />

required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class="layui-input"：layui.css提供的通用CSS类

下拉选择框

<select  name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>

属性selected可设定默认项
属性disabled开启禁⽤，select和option标签都支持
可以通过 optgroup 标签给select分组

<select name="quiz">
 <option value="">请选择</option>
 <optgroup label="城市记忆">
 <option value="你⼯作的第⼀个城市">你⼯作的第⼀个城市？</option>
 </optgroup>
 <optgroup label="学⽣时代">
 <option value="你的⼯号">你的⼯号？</option>
 <option value="你最喜欢的⽼师">你最喜欢的⽼师？</option>
 </optgroup>
</select>

通过设定属性 lay-search 来开启搜索匹配功能

<select name="city" lay-verify="" lay-search>
 <option value="010">layer</option>
 <option value="021">form</option>
 <option value="0571" selected>layim</option>
</select>

复选框

<h2>默认⻛格：</h2>
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁⽤" disabled>
<h2>原始⻛格：</h2>
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁⽤" lay-skin="primary" disabled>

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格（原始风格：lay-skin="primary"）
设置value="1"可自定义值，否则选中时返回的就是默认的on

开关

将复选框checkbox，通过设定 lay-skin="switch" 形成了开关风格

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本（两种文本用 "|" 隔开）
设置value="1"可自定义值，否则选中时返回的就是默认的on

单选框

<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="⼥" checked>
<input type="radio" name="sex" value="" title="中性" disabled>

属性title可自定义文本
属性disabled开启禁用
设置value="xxx"可自定义值，否则选中时返回的就是默认的on

文本域

<textarea name="remark" required lay-verify="required" placeholder="请输⼊个⼈介
绍" class="layui-textarea"></textarea>

class="layui-textarea"：layui.css提供的通用CSS类

组装行内表单

<div class="layui-form-item">
 <div class="layui-inline">
 <label class="layui-form-label">范围</label>
 <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_max" placeholder="￥"
 autocomplete="off" class="layui-input">
 </div>
 </div>
</div>

class="layui-inline"：定义外层行内
class="layui-input-inline"：定义内层行内

忽略美化渲染

可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格。

<input type="radio" name="sex" value="nan" title="男" lay-ignore>

表单方框风格

通过追加 layui-form-pane 的class，来设定表单的方框风格。

组件示例

弹出层

模块加载名称：layer 独立版本：layer.layui.com

由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

作为独立组件使用 layer

<!-- 引⼊好layer.js后，直接⽤即可 -->
<script src="layer.js"></script>
<script>
 layer.msg('hello');
</script>

在 layui 中使用 layer

layui.use('layer', function(){
 var layer = layui.layer;
 layer.msg('hello');
});

基础参数

type - 基本层类型

类型：Number，默认：0

可传入的值有： 0（信息框，默认） 1（页面层） 2（iframe层） 3（加载层） 4（tips层）

title - 标题

类型：String/Array/Boolean，默认：'信息'

title支持三种类型的值：若传入的是普通的字符串，如 title :'我是标题'，那么只会改变标题文本；

若需要自定义样式，可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意 css样式；若你不想显示标题栏，可以 title: false；

content - 内容

类型：String/DOM/Array，默认：' '

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM。

/* 信息框 */
layer.open({
 type:0,
 title:"系统消息",
 // content可以传⼊任意的⽂本或html
 content:"Hello"
});
/* ⻚⾯层 */
layer.open({
 type:1,
 title:"系统消息",
// content可以传⼊任意的⽂本或html
 content:"<div style='height:100px;width:200px'>Hello</div>"
});
/* iframe */
layer.open({
 type:2,
 title:"系统消息",
 // content是⼀个URL，如果你不想让iframe出现滚动条，你还可以content: ['url',
'no']
 content:"http://www.baidu.com"
 // content:["http://www.baidu.com",'no']
});
/* tips层 */
layer.open({
 type: 4,
 content: ['内容', '#id'] //数组第⼆项即吸附元素选择器或者DOM
});

area - 宽高

类型：String/Array，默认：'auto' 在默认状态下，layer是宽高都自适应的。

当定义宽度时，你可以area: '500px'，高度仍然是自适应的。当宽高都要定义时，你可以area: ['500px', '300px']。

icon - 图标

注：信息框和加载层的私有参数。

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标。当你想显示图标时，默认层可以传入0-6。如果是加载层，可以传入0-2。

// eg1
layer.alert('酷毙了', {icon: 1});
// eg2
layer.msg('不开⼼。。', {icon: 5});
// eg3
layer.load(1); // ⻛格1的加载

日期与时间选择

模块加载名称：laydate 独立版本：http://www.layui.com/laydate/

layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式。

和 layer 一样，可以在 layui 中使用 layDate，也可直接使用 layDate 独立版，请按照实际需求来选择。

在layui模块中使用

<body>
 <div class="layui-inline">
 <input type="text" class="layui-input" id="date1" />
 </div>
 </body>
 <script src="layui/layui.js"></script>
 <script type="text/javascript">
 layui.use('laydate', function(){
 var laydate = layui.laydate;
 //执⾏⼀个laydate实例
 laydate.render({
 elem: '#date1' //指定元素
 });
 });
 </script>

基础参数

elem - 绑定元素

类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值⼀般为选择器，或DOM对象

laydate.render({
 elem: '#test' //或 elem: document.getElementById('test')、elem:
lay('#test') 等
});

type - 控件选择类型

类型：String，默认值：date

用于单独提供不同的选择器类型，可选值如下表：

//年选择器
laydate.render({
 elem: '#test'
 ,type: 'year'
});
//年⽉选择器
laydate.render({
 elem: '#test'
 ,type: 'month'
});
//⽇期选择器
laydate.render({
 elem: '#test'
 //,type: 'date' //默认，可不填
});
//时间选择器
laydate.render({
 elem: '#test'
 ,type: 'time'
});
//⽇期时间选择器
laydate.render({
 elem: '#test'
 ,type: 'datetime'
});

format - 自定义格式

类型：String，默认值：yyyy-MM-dd

通过日期时间各自的格式符和长度，来设定⼀个你所需要的日期格式。layDate 支持的格式如下：

value - 初始值

类型：String，默认值：new Date()

支持传入符合format参数设定的日期格式字符，或者 new Date()

// 传⼊符合format格式的字符给初始值
laydate.render({
 elem: '#test'
 ,value: '2018-08-18' //必须遵循format参数设定的格式
});
// 传⼊Date对象给初始值
laydate.render({
 elem: '#test'
 ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});

分页

模块加载名称：laypage

快速使用

laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。

 <body>
 <div id="test1"></div>
 </body>
 <script src="layui/layui.js"></script>
 <script type="text/javascript">
 layui.use('laypage', function(){
 var laypage = layui.laypage;

 //执⾏⼀个laypage实例
 laypage.render({
 elem: 'test1' //注意，这⾥的 test1 是 ID，不⽤加 # 号
 ,count: 50 //数据总数，从服务端得到
 });
 });
 </script>

基础参数

通过核心方法：laypage.render(options) 来设置基础参数。

数据表格

模块加载名称：table

快速使用

创建一个 table 实例最简单的方式是，在页面放置一个元素，然后通过 table.render() 方法指定该容器。

<body>
 <table id="demo"></table>
</body>
<script type="text/javascript">
 layui.use('table', function(){
 var table = layui.table;
 // 第⼀个实例
 table.render({
 elem: '#demo'
 ,url: 'user.json' // 数据接⼝
 ,cols: [[ // 表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
 ,{field: 'username', title: '⽤户名', width:80}
 ,{field: 'sex', title: '性别', width:80, sort: true}
 ,{field: 'city', title: '城市', width:80}
 ,{field: 'sign', title: '签名', width: 177}
 ]]
 });
 });
 </script>

数据接口 user.json

{
 "code": 0,
 "msg": "",
 "count": 50,
 "data": [{
 "id": 10000,
 "username": "user-0",
 "sex": "⼥",
 "city": "城市-0",
 "sign": "签名-0"
 },
 {
 "id": 10001,
 "username": "user-1",
 "sex": "男",
 "city": "城市-1",
 "sign": "签名-1"
 },
 {
 "id": 10002,
 "username": "user-2",
 "sex": "⼥",
 "city": "城市-2",
 "sign": "签名-2"
 }
]
}

三种初始化渲染方式

方法渲染

将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个选择器，上面的例子便是方法渲染

注：table.render()方法返回⼀个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作。

自动渲染

在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。

带有 class="layui-table" 的标签。
对标签设置属性 lay-data="" 用于配置一些基础参数
在标签中设置属性lay-data=""用于配置表头信息

<table class="layui-table" lay-data="{url:'user.json'}">
 <thead>
 <tr>
 <th lay-data="{field:'id'}">ID</th>
 <th lay-data="{field:'username'}">⽤户名</th>
 <th lay-data="{field:'sex', sort: true}">性别</th>
 </tr>
 </thead>
</table>

转换静态表格

一个固定写死的表格，将自动表格的 lay-data去掉，然后和普通表格加上数据即可

<table lay-filter="demo">
 <thead>
 <tr>
 <th lay-data="{field:'username', width:100}">昵称</th>
 <th lay-data="{field:'experience', width:80, sort:true}">积
分</th>
 <th lay-data="{field:'sign'}">签名</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>贤⼼1</td>
 <td>66</td>
 <td>⼈⽣就像是⼀场修⾏a</td>
 </tr>
 </tbody>
</table>

执行用于转换表格的JS方法

layui.use('table', function(){
 var table = layui.table;
 // 转换静态表格
 table.init('demo', {
 height: 315 // 设置⾼度
 // ⽀持所有基础参数
 });
});

基础参数使用的场景

// 场景⼀：下述⽅法中的键值即为基础参数项
table.render({
 height: 300
 ,url: 'user.json'
});
// 场景⼆：下述 lay-data ⾥⾯的内容即为基础参数项，切记：值要⽤单引号
//<table lay-data="{height:300, url:'user.json'}" lay-filter="demo"> ……
// 更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); // 转化静态表格
> var tableObj = table.render({});
 tableObj.reload(options); // 重载表格