LayUI

最新推荐文章于 2024-08-08 08:30:49 发布

最不会程序的程序猿

最新推荐文章于 2024-08-08 08:30:49 发布

阅读量1.9k

点赞数

分类专栏： LayUI的学习文章标签： layui

本文链接：https://blog.csdn.net/weixin_44720982/article/details/123907405

版权

LayUI的学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

LayUI

一、lauui的使用

1.引入css

	<script type="text/javascript" src="layui-v2.6.8/layui/layui.js"></script>

2.布局容器

1.固定宽度

<div class="layui-container" style="background-color: #009688; height: 300px;"></div>

2.完整宽度

<div class="layui-fluid" style="background-color: #5FB878; height: 300px;"></div>

3.栅格系统

为了丰富⽹⻚布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能⼒，layui 引进了⼀套具备

响应式能⼒的栅格系统。将容器进⾏了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平

板、桌⾯中/⼤尺⼨四种不同的屏幕下发挥着各⾃的作⽤。

3.1.1栅格布局规则

采⽤ 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-offffset3 这样的预设类来定义列的间距和偏移
可以在列（column）元素中放⼊你⾃⼰的任意元素填充内容

<div class="layui-container">
			<!--定义行-->
			<div class="layui-row" style="background-color: #FF0000;" >
				<!--定义列-->
				<div class="layui-col-md5" style="background-color: #00FFFF;">内容的5/12
				</div>
				<div class="layui-col-md7"  style="background-color:#1E9FFF;">内容的7/12
				</div>
			</div>
			<!--
            	描述：超过自动换行
            -->
            <div class="layui-row" style="background-color: #FF0000;" >
				<!--定义列-->
				<div class="layui-col-md10" style="background-color: #FFFF00;">内容的10/12
				</div>
				<div class="layui-col-md5"  style="background-color:#FF00FF;">内容的5/12
				</div>
			</div>
</div>

3.1.2响应式规则

栅格的响应式能⼒，得益于CSS3媒体查询（Media Queries）的强⼒⽀持，从⽽针对四类不同尺⼨的

屏幕，进⾏相应的适配处理

找对应的屏幕进行适配如:

<h3>平板、桌面端的不同表现：</h3>
			<div class="layui-row">
			    <div class="layui-col-sm6 layui-col-md4"  
			         style="background-color: thistle">
			        平板≥768px：6/12 | 桌面端≥992px：4/12
			    </div>
			</div>
			
			<div class="layui-row">	    
			    <div class="layui-col-sm4 layui-col-md6"  
			         style="background-color: mediumaquamarine;">
			        平板≥768px：4/12 | 桌面端≥992px：6/12
			    </div>
			</div>
			
			<div class="layui-row">
			    <div class="layui-col-sm12 layui-col-md8" 
			         style="background-color: coral">
			        平板≥768px：12/12 | 桌面端≥992px：8/12
			    </div>
			</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DZtL1vBN-1648817250408)(C:\Users\11319\AppData\Roaming\Typora\typora-user-images\image-20220326105248546.png)]

3.1.3 列边距

通过“列间距”的预设类，来设定列之间的间距。且⼀⾏中最左的列不会出现左边距，最右的列不会出

现右边距。列间距在保证排版美观的同时，还可以进⼀步保证分列的宽度精细程度。我们结合⽹⻚常⽤

的边距，预设了 12 种不同尺⼨的边距，分别是：

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

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

<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，建议使⽤列偏移。

3.1.4 列偏移

对列追加类似 layui-col-md-offffset* 的预设类，从⽽让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。

如：layui-col-md-offffset3，即代表在“中型桌⾯屏幕”下，让该列向右偏移 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>

3.1.5 列嵌套

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

<h3>列嵌套</h3> <div class="layui-row layui-col-space5">
 <div class="layui-col-md5" 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>

总结：

4.基本元素

4.1按钮元素

<button type="button" class="layui-btn">默认按钮</button>
		<hr>
		<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
		<hr>
		<button type="button" class="layui-btn layui-btn-normal">百搭</button>
		<hr>
		<button type="button" class="layui-btn layui-btn-warm">暖色</button>
		<hr>
		<button type="button" class="layui-btn layui-btn-danger">警告</button>
		<hr>
		<button type="button" class="layui-btn layui-btn-disabled">禁用</button>

4.2 尺寸

尺寸	组合
大型	class=“layui-btn layui-btn-lg”
默认	class=“layui-btn”
小型	class=“layui-btn layui-btn-sm”
迷你	class=“layui-btn layui-btn-xs”

4.3 圆角

class=“layui-btn layui-btn-radius”

4.4 图标

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4TPHpR1B-1648817250409)(C:\Users\11319\AppData\Roaming\Typora\typora-user-images\image-20220327201346256.png)]

4.5导航

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。

依赖加载模块：element

4.5.1水平导航

layui-nav：导航
layui-nav-item:导航子项
layui-this：被选中
layui-nav-child：二级菜单

<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child"> <!-- 二级菜单 -->
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

4.5.2 垂直导航

<ul class="layui-nav layui-nav-tree"></ul>

4.5.3 侧边导航

<ul class="layui-nav layui-nav-tree layui-nav-side"></ul>

4.5.4导航主题

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

<ul class="layui-nav layui-bg-green" lay-filter=""></ul>

4.5.5面包屑

<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>

lay-separator="-" 来自定义分隔符

lay-separator="|"

4.6选项卡

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。

依赖加载模块：element

实现步骤：

1.引入资源:

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

2.依赖加载模块

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

3.加载HTML

layui-this:默认选中

layui-show：默认选中内容

<div class="layui-tab">
			<ul class="layui-tab-title">
				<li class="layui-this">⽹站设置</li>
				<li>⽤户管理</li>
				<li>权限分配</li>
				<li>商品管理</li>
				<li>订单管理</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item">内容1</div>
				<div class="layui-tab-item layui-show">内容2</div>
				<div class="layui-tab-item">内容3</div>
				<div class="layui-tab-item">内容4</div>
				<div class="layui-tab-item">内容5</div>
			</div>
</div>

选项卡风格

默认⻛格：layui-tab
简洁⻛格需要追加class：layui-tab-brief
卡⽚⻛格需要追加class：layui-tab-card

带删除的选项卡

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

<div class="layui-tab" lay-allowClose="true">
 <ul class="layui-tab-title">
 <li class="layui-this">⽹站设置</li>
 <li>⽤户管理</li>
 <li>权限分配</li>
 <li>商品管理</li>
 <li>订单管理</li>
 </ul>
 <div class="layui-tab-content">
 <div class="layui-tab-item layui-show">内容1</div>
 <div class="layui-tab-item">内容2</div>
 <div class="layui-tab-item">内容3</div>
 <div class="layui-tab-item">内容4</div>
 <div class="layui-tab-item">内容5</div>
 </div>
</div>

4.7表格

4.1.7.1常用属性

lay-even：隔行换色
lay-skin=“line” ：行边框
lay-skin=“row” ：列边框
lay-skin= “nob” ：无边框风格
lay-size=“sm”：小尺寸
lay-size=“lg”：大尺寸
使用默认尺寸可不设置这些属性

4.8表单

依赖加载模块：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>
```

4.8.1输入框

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

<div class="layui-form-item">
 	<label class="layui-form-label">标签名称</label>
 	<div class="layui-input-block">
 		<input type="text" name="title" required lay-verify="required" placeholder="请
输⼊标题" autocomplete="off" class="layui-input" />
 	</div>
 	//可进行验证lay-verify
 	<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
	</div>
</div>

4.8.2下拉选择框

可以通过 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>

4.8.3复选框

			<div class="layui-form-item">
				<label class="layui-form-label">爱好</label>
				<div class="layui-input-block">
					<input type="checkbox" name="" title="写作" checked>
					<input type="checkbox" name="" title="发呆"> 
					<input type="checkbox" name="" title="唱歌"> 
					<input type="checkbox" name="" title="禁⽤" disabled>
				</div>
			</div>
			//设置风格
			<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

4.8.4开关

其实就是checkbox复选框的“变种”，通过设定 lay-skin=“switch” 形成了开关风格

<div class="layui-form-item">
				<label class="layui-form-label">爱好</label>
				<div class="layui-input-block">
					<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>
				</div>
</div>

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

4.8.5单选框

<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="nan" title="男"> 
					<input type="radio" name="sex" value="nv" title="⼥" checked>
				</div>
</div>

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

4.8.6文本域

class=“layui-textarea”：layui.css提供的通⽤CSS类

<div class="layui-form-item">
				<label class="layui-form-label">文本域</label>
				<div class="layui-input-block">
					<textarea name="" required lay-verify="required" 
						placeholder="请输入" class="layui-textarea">
					</textarea>
				</div>
</div>

4.8.7组装行内表单

可以让文本框在一行显示

class=“layui-inline”：定义外层行内

class=“layui-input-inline”：定义内层行内

<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">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="password" name="" autocomplete="off" class="layui-input">
					</div>
				</div>
</div>

4.8.9忽略美化渲染

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

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

4.8.10表单方框风格

通过追加 layui-form-pane 的class，来设定表单的⽅框⻛格

5.组件示例

5.1弹出层

1.两种加载方式:

1、作为独立组件使用

//1.引入相关css js jquery
<link rel="stylesheet" type="text/css" href="layer/layer.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
//2.测试
<script type="text/javascript">
		layer.msg("hello");
</script>

2.layui 模块化使用

//1.引入相关css js
<link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css" />
<script src="layui-v2.6.8/layui/layui.js"></script>
//2.实现
<script type="text/javascript">
			layui.use('layer', function() {
				var layer = layui.layer;
				layer.msg("hello");
			})

2.基础参数

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。

3.信息框

layer.open({
 type:0,
 title:"系统消息",
 // content可以传⼊任意的⽂本或html
 content:"Hello"
});

4.页面层

layer.open({
	type:1,
	title:"系统消息",
	content:"<div style='height:30px;width:200px;'>hello</div>"
})

5.iframe

layer.open({
 type:2,
 title:"系统消息",
 // content是⼀个URL，如果你不想让iframe出现滚动条，你还可以content: ['url',
'no']
 content:"http://www.baidu.com"
 // content:["http://www.baidu.com",'no']
});

6.tips层

layer.open({
 type: 4,
 content: ['内容', '#id'] //数组第⼆项即吸附元素选择器或者DOM
});

7.设置宽高

类型：String/Array，默认：‘auto’

在默认状态下，layer是宽⾼都⾃适应的。

当定义宽度时，你可以area: ‘500px’，⾼度仍然是⾃适应的。

当宽⾼都要定义时，你可以area: [‘500px’, ‘300px’]

8.图标

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

5.2日期与时间选择

layui 模块化使⽤: 通过*layui.use(‘laydate’, callback)*加载模块后，再调⽤⽅法

<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>
		<script type="text/javascript">
			layui.use('laydate',function(){
				var laydate = layui.laydate;
				laydate.render({
					elem:"#date1"
				});
			})
			layui.use('laydate',function(){
				var laydate = layui.laydate;
				laydate.render({
					elem:"#date2",
					type:"year"
				});
			})
		</script>

2.基础参数

elem - 绑定元素

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

type - 控件选择类型
format - ⾃定义格式

类型：String，默认值：yyyy-MM-dd
laydate.render({
 elem: '#test'
 ,format: 'yyyy年MM⽉dd⽇' //可任意组合
});

4.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 的时间戳
});

5.3分页

依赖加载模块：laypage

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css" />
		<script src="layui-v2.6.8/layui/layui.js"></script>
	</head>
	<body>
		<div id="page">
		</div>
		<script type="text/javascript">
			layui.use('laypage',function(){
				var laypage = layui.laypage;
				laypage.render({
					elem:"page",//elem属性绑定的是容器的id属性值 不需要加#
					count:100, //总数量一般是从服务器获取的值
					limit:5,//每页显示的数量
					limits:[5,10,20,30],//每页条数的选择项
					layout:['prev','page','next','limit','count']
				})
			})
		</script>
	</body>
</html>

5.4数据表格

依赖加载模块：table

创建一个table实例最简单的方式是，在页面放置一个元素

，然后通过 table.render() 方法指定该容器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css"/>
		<script src="layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>	
	</head>
	<body>
		<div id="demo"></div>
		<script type="text/javascript">
			layui.use('table',function(){
				var table = layui.table;
				table.render({
					elem:"#demo", //绑定容器的id
					url:"js/user.json",
					cols:[[
						{field:'id',title:'用户编号',sort:true,width:120},
						{field:'username',title:'姓名',sort:true,width:100},
						{field:'sex',title:'性别',width:100},
						{field:'city',title:'城市',width:100,sort:true},
						{field:'sign',title:'签名',width:90}
					]],
				});
			})
		</script>
	</body>
</html>

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"
		}, {
			"id": 10003,
			"username": "user-3",
			"sex": "⼥",
			"city": "城市-3",
			"sign": "签名-3"
		}, {
			"id": 10004,
			"username": "user-4",
			"sex": "男",
			"city": "城市-4",
			"sign": "签名-4"
		}
	]
}

三种渲染方式

方式	机制	使用场景
方法渲染	用JS方法的配置完成渲染	（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
自动渲染	HTML配置，自动渲染	无需写过多 JS，可专注于 HTML 表头部分
转换静态表格	转化一段已有的表格元素	无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

5.4.1 方法渲染

将基础参数的设定放在了JS代码中，且原始的 table 标签只需要⼀个选择器

<table id="demo"></table>

渲染表格

layui.use('table', function(){
 var table = layui.table;
 // 执⾏渲染
 table.render({
 elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
 ,url: 'user.json' // 数据接⼝
 ,height: 315 // 容器⾼度
 ,page:true // 开启分⻚
 ,cols: [[ // 设置表头
 {field: 'id', title: 'ID'}
 ,{field: 'username', title: '⽤户名'}
 ,{field: 'sex', title: '性别'}
 ]]
 }); 
});

注：*table.render()*⽅法返回⼀个对象：var tableIns = table.render(options)，可⽤于对当前表格

进⾏“重载”等操作

5.4.2自动渲染

在⼀段 table 容器中配置好相应的参数，由 table 模块内部⾃动对其完成渲染，⽽⽆需你写初始的渲

染⽅法

带有 class=“layui-table” 的标签

2）对标签设置属性 lay-data="" ⽤于配置⼀些基础参数

3）在标签中设置属性lay-data="" ⽤于配置表头信息

page:true//用于分页

<table class="layui-table" lay-data="{url:'user.json',page:true}">
 <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>

5.4.3转换静态表格

⻚⾯已经存在了⼀段有内容的表格，由原始的table标签组成，只需要赋予它⼀些动态元素。

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

5.4.4基础参数使用场景

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

5.4.5开启分页

page:true,

5.4.6开启头部工具栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css"/>
		<script src="layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>	
	</head>
	<body>
		<!--方法渲染-->
		<div id="demo"></div>
		<!-- 表格⼯具栏 -->
		<script type="text/html" id="toolbarDemo">
 			<div class="layui-btn-container">
 				<!-- lay-event 给元素绑定事件名 -->
 				<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
 					获取选中⾏数据
 				</button>
 				<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
 					获取选中数⽬
 				</button>
				<button class="layui-btn layui-btn-sm" lay-event="isAll">
 					验证是否全选
 				</button>
 			</div>
 			<!-- 表头⼯具栏 -->
			<script type="text/html" id="barDemo">
				 <a class="layui-btn layui-btn-xs" lay-event="edit">
				 	编辑
				 </a>
				 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
				 	删除
				</a>
			</script>
		</script>
		<script type="text/javascript">
			layui.use('table',function(){
				var table = layui.table;
				table.render({
					elem:"#demo", //绑定容器的id
					url:"js/user.json",
					cols:[[
						{field:'bb',type:'checkbox'},
						{field:'aa',type:'numbers'},
						{field:'id',title:'用户编号',sort:true,width:120},
						{field:'username',title:'姓名',sort:true,width:100},
						{field:'sex',title:'性别',width:100},
						{field:'city',title:'城市',width:100,sort:true},
						{field:'sign',title:'签名',width:90},
						{field:'操作',title:'操作',toolbar:"#barDemo"}
					]],
					page:true,
					toolbar:"#toolbarDemo"
				});
			})
		</script>
	</body>
</html>

5.4.6.1 头监听事件

 语法:
	table.on('toolbar(demo)',function(obj){
				 		
	});
	注: demo表示的是容器上设置的lay-filter属性值

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css"/>
		<script src="layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>	
	</head>
	<body>
		<!--方法渲染-->
		<table id="demo" lay-filter="test"></table>
		<!-- 表格⼯具栏 -->
		<script type="text/html" id="toolbarDemo">
 			<div class="layui-btn-container">
 				<!-- lay-event 给元素绑定事件名 -->
 				<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
 					获取选中⾏数据
 				</button>
 				<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
 					获取选中数⽬
 				</button>
				<button class="layui-btn layui-btn-sm" lay-event="isAll">
 					验证是否全选
 				</button>
 			</div>
 			<!-- 表头⼯具栏 -->
			<script type="text/html" id="barDemo">
				 <a class="layui-btn layui-btn-xs" lay-event="edit">
				 	编辑
				 </a>
				 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
				 	删除
				</a>
			</script>
		</script>
		<script type="text/javascript">
			layui.use('table',function(){
				var table = layui.table;
				table.render({
					elem:"#demo", //绑定容器的id
					url:"js/user.json",//数据接口
					cols:[[
						{field:'bb',type:'checkbox'},
						{field:'aa',type:'numbers'},
						{field:'id',title:'用户编号',sort:true,width:120},
						{field:'username',title:'姓名',sort:true,width:100},
						{field:'sex',title:'性别',width:100},
						{field:'city',title:'城市',width:100,sort:true},
						{field:'sign',title:'签名',width:90},
						{field:'操作',title:'操作',toolbar:"#barDemo"}
					]],
					page:true,
					toolbar:"#toolbarDemo"
				});
				/*
				 头监听事件
				 语法:
				 	table.on('toolbar(demo)',function(obj){
				 		
				 	});
				 	注: demo表示的是容器上设置的lay-filter属性值
				 * */
			table.on('toolbar(test)',function(obj){
				//console.log(obj);
				//obj.config对象中可以获取id属性值，即表示当前容器的ID属性
				//获取当前表格被选中记录对象 返回数据
				var checkStatus = table.checkStatus(obj.config.id);
				//console.log(checkStatus);
				//判断事件名，执行对应的代码
				var eventName = obj.event;
				switch(eventName){
					case "getCheckData" :
					//获取被选中的记录的数组
					var arr = checkStatus.data;
					//将数组解析成字符串
					layer.alert(JSON.stringify(arr));
						break;
					case "getCheckLength":
						var arr = checkStatus.data;
						layer.msg("选中了:"+arr.length+"条记录");
						break;
					case "isAll":
						var sel = checkStatus.isAll;
						var str = sel?'全选':"未全选";
						layer.msg(str);
						break;
					case 'edit':
						layer.msg("编辑");
						break;
				}
			});
			})
		</script>
	</body>
</html>

5.4.6.2 监听行工具事件

table.on('tool(test)',function(obj){
					var tr = obj.data;
					var eventName = obj.event;
					if(eventName=="del"){//删除
						layer.confirm("您确定删除吗?",function(index){
							//删除指定tr
							obj.del();
							//关闭弹出层
							layer.close(index);
						});
					}else if(eventName=="edit"){//编辑操作
						//输出框
						layer.prompt({
							//表单元素类型 0=文本框 1=密码框 2=文本域
							formType:0,
							value:tr.username
						},function(value,index){
							//修改单元格的值
							//value表示输入的值
							obj.update({
								username:value
							});
							//关闭弹出层
							layer.close(index);
						});
					}	
				})

5.4.7开启单元格编辑

edit:true;

{field:'id',title:'用户编号',sort:true,width:120,edit:true},

/*
				 * 监听单元格编辑事件
				 * 表头设置edit属性 单元格编辑类型（默认不开启） 目前只支持:text(输入框)
				 */
				table.on('edit(test)',function(obj){
					//获取修改后的值
					var value = obj.value;
					//获得当前修改的tr
					var data = obj.data;
					//获得修改的字段名
					var field = obj.field;
					layer.msg("[ID:"+data.id+"]的"+field+"字段的值修改为: "+value)
				});

5.4.8数据表格的重载

/*给指定元素绑定事件*/
				$(document).on('click','#searchBtn',function(data){
					//获取搜索文本框对象
					var search = $("#demoReload");
					//调用数据表格的重载方法  table.reload(ID,options)
					table.reload('demo',{
						url:'js/user.json',
						where:{//设置需要传递的参数
							id:search.val()
							
						},
						page:{
							//表示让条件查询从第一页开始;如果未设置则从当前页开始查询，此页前面的数据不纳入
							curr:1
						}
					});
				});

layuimini的使用

/删除指定tr
obj.del();
//关闭弹出层
layer.close(index);
});
}else if(eventName==“edit”){//编辑操作
//输出框
layer.prompt({
//表单元素类型 0=文本框 1=密码框 2=文本域
formType:0,
value:tr.username
},function(value,index){
//修改单元格的值
//value表示输入的值
obj.update({
username:value
});
//关闭弹出层
layer.close(index);
});
}
})




##### 5.4.7开启单元格编辑

edit:true;

{field:‘id’,title:‘用户编号’,sort:true,width:120,edit:true},

/*
* 监听单元格编辑事件
* 表头设置edit属性单元格编辑类型（默认不开启）目前只支持:text(输入框)
*/
table.on(‘edit(test)’,function(obj){
//获取修改后的值
var value = obj.value;
//获得当前修改的tr
var data = obj.data;
//获得修改的字段名
var field = obj.field;
layer.msg("[ID:"+data.id+"]的"+field+"字段的值修改为: "+value)
});




##### 5.4.8数据表格的重载

/给指定元素绑定事件/
$(document).on(‘click’,’#searchBtn’,function(data){
//获取搜索文本框对象
var search = $("#demoReload");
//调用数据表格的重载方法 table.reload(ID,options)
table.reload(‘demo’,{
url:‘js/user.json’,
where:{//设置需要传递的参数
id:search.val()

					},
					page:{
						//表示让条件查询从第一页开始;如果未设置则从当前页开始查询，此页前面的数据不纳入
						curr:1
					}
				});
			});


#### layuimini的使用

最不会程序的程序猿

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

LayUI

LayUI

一、lauui的使用

1.引入css

2.布局容器

1.固定宽度

2.完整宽度

3.栅格系统

3.1.1栅格布局规则

3.1.2响应式规则

3.1.3 列边距

3.1.4 列偏移

3.1.5 列嵌套

4.基本元素

4.1按钮元素

4.2 尺寸

4.3 圆角

4.4 图标

4.5导航

4.5.1水平导航

4.5.2 垂直导航

4.5.3 侧边导航

4.5.4导航主题

4.5.5面包屑

4.6选项卡

4.7表格

4.8表单

4.8.1输入框

4.8.2下拉选择框

4.8.3复选框

4.8.4开关

4.8.5单选框

4.8.6文本域

4.8.7组装行内表单

4.8.9忽略美化渲染

4.8.10表单方框风格

5.组件示例

5.1弹出层

1.两种加载方式:

2.基础参数

3.信息框

4.页面层

5.iframe

6.tips层

7.设置宽高

8.图标

5.2日期与时间选择

2.基础参数

5.3分页

依赖加载模块：laypage

5.4数据表格

5.4.1 方法渲染

将基础参数的设定放在了JS代码中，且原始的 table 标签只需要⼀个选择器

5.4.2自动渲染

5.4.3转换静态表格

5.4.4基础参数使用场景

5.4.5开启分页

5.4.6开启头部工具栏

5.4.6.1 头监听事件

5.4.6.2 监听行工具事件

5.4.7开启单元格编辑

5.4.8数据表格的重载

layuimini的使用