layui前端框架的基本使用方法

最新推荐文章于 2023-06-25 16:40:08 发布

月与清酒

最新推荐文章于 2023-06-25 16:40:08 发布

阅读量3.1k

点赞数 4

分类专栏： layui前端框架文章标签：前端框架 layui javascript

本文链接：https://blog.csdn.net/weixin_57839268/article/details/122306526

版权

layui前端框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

镜像站@Layui - 经典开源模块化前端 UI 框架 (gitee.io)https://lh_yun.gitee.io/layui/www.layui.com/index.html 由于layui已经下架，所以在这里我们可以通过镜像站来访问到layui的主页

1.layui的使用

要想在项目中使用layui提供的框架，需要引入layui的css文件和js文件；

下载链接：百度网盘请输入提取码https://pan.baidu.com/s/1OBe3CJsMXRhz6nWWyiDj5g

提取码：ncjq

下载完成后直接复制到项目中即可使用

下面就可以使用layui中的框架了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>layui的使用</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/>
		<script src="layui-v2.2.5/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<script>
		layui.use(['layer', 'form'], function(){
		  var layer = layui.layer,
		  form = layui.form;
		  
		  layer.msg('Hello World');
		});
		</script>
	</body>
</html>

2.布局容器

在这里一般会有两种效果：

1.固定宽度，两边留有空白效果（常用）

2.完整宽度，两边没有空白效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布局容器</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/>
	</head>
	<body>
		<div class="layui-container" style="background-color: #00F7DE;height: 300px;">
			固定宽度，两边留有空白效果
		</div>
		<div class="layui-fluid" style="background-color:  #009688;height: 300px;">
			完整宽度，两边没有空白效果
		</div>
	</body>
</html>

效果如下：

3.栅格系统

        1.定义行       .layui-row
       2.定义列       .layui-col-md*
                   md 表示不同屏幕的标识(xs,sm,md,lg)
                   * 表示列的数量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格系统</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/>
	</head>
	<body>
		<div class="layui-container">
			<!-- 定义行-->
			<div class="layui-row">
				<!-- 定义列 -->
				<div class="layui-col-md5" style="background-color: #007DDB;">
					内容5/12
				</div>
				<div class="layui-col-md7" style="background-color: #00F7DE;">
					内容7/12
				</div>
			</div>
			<div class="layui-row">
				<!-- 定义列 -->
				<div class="layui-col-md4" style="background-color: #EB7350;">
					内容4/12
				</div>
				<div class="layui-col-md4" style="background-color: #FFB800;">
					内容4/12
				</div>
				<!-- 超过12会自动换行 -->
				<div class="layui-col-md6" style="background-color: #C2C2C2;">
					内容6/12
				</div>
			</div>
			<div class="layui-row">
			    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: pink;">
			      移动：6/12 | 平板：6/12 | 桌面：4/12
			    </div>
			    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: palegoldenrod;">
			      移动：6/12 | 平板：6/12 | 桌面：4/12
			    </div>
			    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4" style="background-color: peru;">
			      移动：4/12 | 平板：12/12 | 桌面：4/12
			    </div>
			    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8" style="background-color: powderblue;">
			      移动：4/12 | 平板：7/12 | 桌面：8/12
			    </div>
			    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="background-color: palegreen;">
			      移动：4/12 | 平板：5/12 | 桌面：4/12
			    </div>
			  </div>
		</div>
	</body>
</html>

在网页中的效果如下：

4.表单和按钮

在使用表单和按钮之前需要加载form模块，加载完成后就可以使用layui中的属性了。

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

表单：

        常用属性：
                   required                    浏览器固定的必填字段
                   lay-verify                    需要验证的类型（required表示必填项）
                   class="layui-input"           提供的通用的样式
                   class="layui-input-block"   占据全部宽度
                   class="layui-input-inline"   占据部分宽度
        文本框：
                   placeholder            当文本框为空时，默认显示的文本信息
                   autocomplete            表单元素是否自动填充(当浏览器中缓存中存在相同name属性的值时，会填充)

  下拉框：
                   1.通过selectsd属性设置默认选中项
                   2.通过disabled属性开启禁用，可以设置select和option标签(禁用下拉框和禁用下拉选项)
                   3.可以通过optgroup标签给select分组
                   4.通过lay-search属性开启搜索匹配功能

        复选框：
                   1.通过title属性设置自定义文本（如果不需要显示文本，则不设置title属性）
                   2.通过checked属性设置被选中的框
                   3.通过lay-skin属性设置复选框的样式效果（lay-skin="primary"表示原始效果）
                   4.通过disabled属性禁用元素

        开关：
                   将一个复选框，设置lay-skin="switch"形成开关分格
                       1.通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过"|"分割
                       2.通过checked设置默认打开状态
                       3.通过disabled属性禁用开关
                       4.通过value属性设置选中的值

        单选框：
                   1.通过checked设置默认打开状态
                   2.通过disabled属性禁用开关
                   3.通过value属性设置选中的值

文本域：
class="layui-textarea"来引入文本域

按钮

        1.主题
                   原始   class="layui-btn layui-btn-primary"
                   默认   class="layui-btn"
                   百搭   class="layui-btn layui-btn-normal"
                   暖色   class="layui-btn layui-btn-warm"
                   警告   class="layui-btn layui-btn-danger"
                   禁用   class="layui-btn layui-btn-disabled"
2.尺寸
                   大型   class="layui-btn layui-btn-lg"
                   默认   class="layui-btn"
                   小型   class="layui-btn layui-btn-sm"
                   迷你   class="layui-btn layui-btn-xs"
3.圆角
                   原始   class="layui-btn layui-btn-radius layui-btn-primary"
                   默认   class="layui-btn layui-btn-radius"
                   百搭   class="layui-btn layui-btn-radius layui-btn-normal"
                   暖色   class="layui-btn layui-btn-radius layui-btn-warm"
                   警告   class="layui-btn layui-btn-radius layui-btn-danger"
                   禁用   class="layui-btn layui-btn-radius layui-btn-disabled"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/>
		<script type="text/javascript" src="layui-v2.2.5/layui/layui.js" charset="UTF-8">
			
		</script>
	</head>
	<body>
		
		<form class="layui-form" action="">
			
			<!-- 文本框 -->
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-inline">
					<!-- <input type="text" name="title" class="layui-input"/> -->
					<input type="text" name="title" required="required" placeholder="请输入标题" autocomplete="off" class="layui-input"/>
				</div>
			</div>
			
			
			<div class="layui-form-item">
				<label class="layui-form-label">城市</label>
				<div class="layui-input-inline">
					<select name="city" lay-verify="required" >
					        <option value="">请选择一个城市</option>
					        <option value="0" selected>北京</option>
					        <option value="1">上海</option>
					        <option value="2">广州</option>
					        <option value="3">深圳</option>
					        <option value="4" disabled>杭州</option>
					</select>
					<!-- 分组 -->
					<select name="quiz">
						<option value="">请选择</option>
						<optgroup label="城市记忆">
							<option value="你工作的第一个城市">你工作的第一个城市？</option>
						</optgroup>
						<optgroup label="学生时代">
							<option value="你的工号">你的工号？</option>
							<option value="你最喜欢的老师">你最喜欢的老师？</option>
						</optgroup>
					</select>
					<!-- 开启匹配搜索 -->
					<select name="city" lay-verify="" lay-search>
						<option value="">请选择</option>
						<option value="1">layer</option>
						<option value="2">form</option>
						<option value="4">layim</option>
					</select>
				</div>
			</div>
			
			
			<div class="layui-form-item">
				<label class="layui-form-label">爱好</label>
				<div class="layui-input-block">
					<!-- 默认效果 -->
					<input type="checkbox" name="hobby" title="唱歌" checked value="sing"/>
					<input type="checkbox" name="hobby" title="跳舞" value="dance"/>
					<input type="checkbox" name="hobby" title="Rap" disabled value="Rap"/>
					<input type="checkbox" name="hobby" title="篮球" value="basketball"/>
					<br />
					<!-- 原始效果 -->
					<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" checked value="sing"/>
					<input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance"/>
					<input type="checkbox" name="hobby" title="Rap" lay-skin="primary" value="Rap"/>
					<input type="checkbox" name="hobby" title="篮球" lay-skin="primary" disabled value="basketball"/>
				</div>
			</div>
			
			
			<div class="layui-form-item">
				<label class="layui-form-label">开关</label>
				<div class="layui-input-block">
					<input type="checkbox" name="switch" lay-skin="switch"/>
					<input type="checkbox" name="switch1" lay-skin="switch" checked/>
					<input type="checkbox" name="switch2" lay-skin="switch" checked lay-text="ON|OFF" value="ON"/>
					<input type="checkbox" name="switch3" lay-skin="switch" checked lay-text="ON|OFF" disabled/>
				</div>
			</div>
			
			
			 <div class="layui-form-item">
			 	<label class="layui-form-label">性别</label>
			 	<div class="layui-input-block">
			 		<input type="radio" name="sex" value="man" title="男" checked/>
					<input type="radio" name="sex" value="women" title="女" />
					<input type="radio" name="sex" value="neutral " title="中性" disabled/>
			 	</div>
			 </div>
			 
			
			 <div class="layui-form-item">
			 	<label class="layui-form-label">简介</label>
			 	<div class="layui-input-inline">
			 		<textarea name="remark" required lay-verify="required" placeholder="请输入个人简介" class="layui-textarea"></textarea>
			 	</div>
			 </div>
			
			<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>
		</form>
		<!-- 
			加载模块		
		 -->
		 <script type="text/javascript">
			layui.use("form",function(){
				var form = layui.form;
			});
		 </script>
	</body>
</html>

效果如下：

5.选项卡

使用前需要加载element模块

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

                默认风格：layui-tab
               简洁风格：layui-tab-brief
               卡片风格：layui-tab-card
               对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/>
		<script type="text/javascript" src="layui-v2.2.5/layui/layui.js" charset="UTF-8">
			
		</script>
	</head>
	<body>
		 <!-- 默认风格-->
		<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 layui-show">网站设置</div>
		    <div class="layui-tab-item">用户管理</div>
		    <div class="layui-tab-item">权限分配</div>
		    <div class="layui-tab-item">商品管理</div>
		    <div class="layui-tab-item">订单管理</div>
		  </div>
		</div>
		<hr />
		<!-- 简洁风格 -->
		<div class="layui-tab layui-tab-brief">
		  <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">网站设置</div>
		    <div class="layui-tab-item">用户管理</div>
		    <div class="layui-tab-item">权限分配</div>
		    <div class="layui-tab-item">商品管理</div>
		    <div class="layui-tab-item">订单管理</div>
		  </div>
		</div>
		<hr />
		<!-- 卡片风格 -->
		<div class="layui-tab layui-tab-card">
		  <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">网站设置</div>
		    <div class="layui-tab-item">用户管理</div>
		    <div class="layui-tab-item">权限分配</div>
		    <div class="layui-tab-item">商品管理</div>
		    <div class="layui-tab-item">订单管理</div>
		  </div>
		</div>
		<hr />
		<!-- 带删除的选项卡 -->
		<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">网站设置</div>
		    <div class="layui-tab-item">用户管理</div>
		    <div class="layui-tab-item">权限分配</div>
		    <div class="layui-tab-item">商品管理</div>
		    <div class="layui-tab-item">订单管理</div>
		  </div>
		</div>
		
		<script>
			layui.use('element', function(){
			  var element = layui.element;
			});
		</script>
	</body>
</html>

效果如下：

6.表格

                class="layui-table"
               常用属性
                   lay-even 如果设置了该属性，则可以显示隔行换色的效果
                   lay-skin 设置表单边框风格
                       line （行边框风格）
                       row （列边框风格）
                       nob （无边框风格）
                   lay-size 设置表格尺寸
                       sm （小尺寸）
                       lg （大尺寸）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/>
	</head>
	<body>
		 
		 <table class="layui-table" lay-size="lg">
		   <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>
		 
		 <hr>
		 
		 <!-- 隔行换色-->
		 
		 <table class="layui-table" lay-even lay-skin="row">
		   <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>
			 <tr>
			   <td>贤心</td>
			   <td>2016-11-29</td>
			   <td>人生就像是一场修行</td>
			 </tr>
			 <tr>
			   <td>许闲心</td>
			   <td>2016-11-28</td>
			   <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
			 </tr>
		   </tbody>
		 </table>
		 
	</body>
</html>

效果如下：

7.面板

由于我的layui的版本有点低，有些东西用不了，在这里我找了一个高版本的layui

下载链接：百度网盘请输入提取码

提取码：1swy

在使用前需要加载element模块

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

                常规面板：
                   class="layui-row layui-col-space15" 常规面板
                   class="layui-col-md6"
                   class="layui-panel"
               卡片面板：
                   class="layui-card" 卡片面板
                   class="layui-card-header"   卡片面板标题头
                   class="layui-card-body"       卡片面板内容
               折叠面板：
                   通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板
                   class="layui-collapse" 折叠面板
                   class="layui-colla-title" 折叠面板标题头
                   class="layui-colla-content layui-show" 折叠的内容
               开启手风琴
                   在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>面板</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/css/layui.css"/>
		<script type="text/javascript" src="./layui-v2.2.5/layui/layui.js" charset="UTF-8">
			
		</script>
	</head>
	<body>  
		<!-- 常规面板 -->  
		<div class="layui-row layui-col-space15">
		  <div class="layui-col-md6">
		    <div class="layui-panel">
		      <div style="padding: 30px;">一个面板</div>
		    </div>   
		  </div>
		  <div class="layui-col-md6">
		    <div class="layui-panel">
		      <div style="padding: 30px;">一个面板</div>
		    </div>   
		  </div>
		</div>  
		<hr />
		<!-- 卡片面板 -->
		<div class="layui-card">
		  <div class="layui-card-header">卡片面板</div>
		  <div class="layui-card-body">
		    卡片式面板面板通常用于非白色背景色的主体内<br>
		    从而映衬出边框投影
		  </div>
		</div>
		<hr />
		<!-- 折叠面板 -->
		<div class="layui-collapse" lay-accordion>
		  <div class="layui-colla-item">
		    <h2 class="layui-colla-title">唱歌</h2>
		    <div class="layui-colla-content layui-show">你还要我怎样</div>
		  </div>
		  <div class="layui-colla-item">
		    <h2 class="layui-colla-title">跳舞</h2>
		    <div class="layui-colla-content layui-show">动次打次</div>
		  </div>
		  <div class="layui-colla-item">
		    <h2 class="layui-colla-title">篮球</h2>
		    <div class="layui-colla-content layui-show">在你头上暴扣</div>
		  </div>
		</div>
		
		<script>
			layui.use('element', function(){
			  var element = layui.element;
			});
		</script>
	</body>
</html>

效果如下：

8.时间线

                class="layui-timeline"通过设置该属性来设置一个时间线
               class="layui-timeline-item"
               class="layui-icon layui-timeline-axis" 时间线的样式
               class="layui-timeline-content layui-text" 时间线中的内容
               class="layui-timeline-title" 时间线标题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时间线</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/css/layui.css"/>
		<script type="text/javascript" src="./layui-v2.2.5/layui/layui.js" charset="UTF-8">
			
		</script>
	</head>
	<body>
		<ul class="layui-timeline">
		  <li class="layui-timeline-item">
		    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
		    <div class="layui-timeline-content layui-text">
		      <h3 class="layui-timeline-title">1月1日</h3>
		      <p>元旦假期</p>
		    </div>
		  </li>
		  <li class="layui-timeline-item">
		    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
		    <div class="layui-timeline-content layui-text">
		      <h3 class="layui-timeline-title">12月31日</h3>
		      <p>距离元旦节还有一天</p>
		    </div>
		  </li>
		  <li class="layui-timeline-item">
		    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
		    <div class="layui-timeline-content layui-text">
		      <h3 class="layui-timeline-title">12月30日</h3>
		      <p>距离元旦还有两天</p>
		    </div>
		  </li>
		  <li class="layui-timeline-item">
		    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
		    <div class="layui-timeline-content layui-text">
		      <div class="layui-timeline-title">过去</div>
		    </div>
		  </li>
		</ul>
	</body>
</html>

效果如下：

9.弹出层

在这里需要加载layer模块

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

               type - 基本层类型
               title - 标题
               content - 内容
               skin - 样式类名
               area - 宽高
               offset - 坐标
               icon - 图标，信息框和加载层的私有参数
               btn - 按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出层</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/css/layui.css"/>
		<script type="text/javascript" src="./layui-v2.2.5/layui/layui.js" charset="UTF-8"></script>
	</head>
	<body>
		
		<script> 
		layui.use('layer', function(){
		  var layer = layui.layer;
		  
		  /* layer.msg('hello'); */ 
		  
		  
		  /* layer.alert('开心', {icon: 1});
		  //eg2
		  layer.msg('emo', {icon: 5});
		  //eg3
		  layer.load(1); */
		  
		 layer.confirm('are you ok?', {
		    btn: ['确定', '取消', '未知'] //可以无限个按钮
		    ,btn3: function(index, layero){
		      //按钮【按钮三】的回调
		    }
		  }, function(index, layero){
		    //按钮【按钮一】的回调
		  }, function(index){
		    //按钮【按钮二】的回调
		  });
		   
		  
		  /* layer.open({
		    content: 'wo giao'
		    ,btn: ['1', '2', '3']
		    ,yes: function(index, layero){
		      //按钮【1】的回调
		    }
		    ,btn2: function(index, layero){
		      //按钮【2】的回调
		      
		      //return false 开启该代码可禁止点击该按钮关闭
		    }
		    ,btn3: function(index, layero){
		      //按钮【3】的回调
		      
		      //return false 开启该代码可禁止点击该按钮关闭
		    }
		    ,cancel: function(){ 
		      //右上角关闭回调
		      
		      //return false 开启该代码可禁止点击该按钮关闭
		    }
		  }); */
		  
		  
		  /* layer.open({
		    content: '加载错误',
		    yes: function(index, layero){
		      layer.close(index); 
		    }
		  }); */  
		});   
     
		  
		</script>
	</body>
</html>

效果如下：

10.数据表格

在这里需要加载table模块

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

1.通过lay-filter="test"属性来设置表格
2.三种初始化渲染方式
                   1).方法渲染       用JS方法的配置完成渲染
                   2).自动渲染       HTML配置，自动渲染
                   3).转换静态表格   转化一段已有的表格元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据表格</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/css/layui.css"/>
		<script type="text/javascript" src="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/layui.js" charset="UTF-8"></script>
	</head>
	<body>
		<!-- 
			数据表格
				1.需要加载独立的组件
				2.通过lay-filter="test"属性来设置表格
				3.三种初始化渲染方式
					1).方法渲染		用JS方法的配置完成渲染
					2).自动渲染		HTML配置，自动渲染
					3).转换静态表格	转化一段已有的表格元素
		 -->
		<!-- <table id="demo" lay-filter="test"></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> -->
		  
		  <!-- <table class="layui-table" lay-data="{基础参数}">
		    <thead>
		      <tr>
		        <th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
		        <th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
		        <th lay-data="{align:'center'}" colspan="3">地址</th>
		      </tr>
		      <tr>
		        <th lay-data="{field:'province', width:80}">省</th>
		        <th lay-data="{field:'city', width:120}">市</th>
		        <th lay-data="{field:'county', width:300}">详细</th>
		      </tr>
		    </thead>
		  </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>
		    <tr>
		      <td>贤心2</td>
		      <td>88</td>
		      <td>人生就像是一场修行b</td>
		    </tr>
		    <tr>
		      <td>贤心3</td>
		      <td>33</td>
		      <td>人生就像是一场修行c</td>
		    </tr>
		  </tbody>
		</table>
		<script type="text/javascript">
			layui.use('table', function(){
			  var table = layui.table;
			  
			   
			  //转换静态表格
			  table.init('demo', {
			    height: 315 //设置高度
			    ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
			    //支持所有基础参数
			  }); 
			  
			  //第一个实例
			 /* table.render({
			    elem: '#demo'
			    ,height: 312
			    ,url: '../../demo/table/user/-page=1&limit=30.js' //数据接口
			    ,page: true //开启分页
			    ,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}
			      ,{field: 'experience', title: '积分', width: 80, sort: true}
			      ,{field: 'score', title: '评分', width: 80, sort: true}
			      ,{field: 'classify', title: '职业', width: 80}
			      ,{field: 'wealth', title: '财富', width: 135, sort: true}
			    ]]
			  }); */
			  
			  /* 加载*/
			  /* table.render({
				  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
				    ,height: 315 //容器高度
				    ,cols: [{}] //设置表头
				    //,…… //更多参数参考右侧目录：基本参数选项
			  }); */
			  
			});
		</script>
	</body>
</html>

效果如下：

月与清酒

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
4
评论
layui前端框架的基本使用方法

镜像站@Layui - 经典开源模块化前端 UI 框架 (gitee.io)https://lh_yun.gitee.io/layui/www.layui.com/index.html 由于layui已经下架，所以在这里我们可以通过镜像站来访问到layui的主页目录1.layui的使用2.布局容器3.栅格系统4.表单和按钮5.选项卡6.表格7.面板8.时间线9.弹出层10.数据表格1.layui的使用要想...
复制链接

扫一扫