通俗易懂，Layui前端框架！

前言

  layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。它更多是为后端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

一、Layui 光速入门

1. 官网下载解压

Layui官网 https://www.layui.com/

2. layui资源引入

• css 引入

  <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>

• js 引入

  <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>>

3. layui 模块化使用 （需要什么模块就加载什么模块)

• 使用格式

layui.use(["模块名","模块名"],function(){
	layui.模块名
});

• 使用实例：此处我们调用弹出层模块，调用弹出层模块方法即可

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

  我们访问html页面会弹出写有hello的弹出层；调用模块需要的模块名都能够在官网获取。

  到此我们已经完成layui的入门任务。由于layui其他内容过于简单，在此不做过多赘述，详情请移步官网了解。本文主要是关于layui数据表格的实现。

二、layui 数据表格

1.准备数据

注：数据表格访问的数据接口的格式固定，格式如下

{
	"code":0,
	"msg":"",
	"count":数量,
	"data":[
		{},
		{}
	]
}

• 准备数据 user.json

{
    "code":0,
    "msg":"",
    "count":50,
    "data":[
        {
            "id":1000,
            "username":"user1",
            "sex":"女",
            "city":"城市1",
            "sign":"签名1"
        },
        {
            "id":1001,
            "username":"user1",
            "sex":"女",
            "city":"城市1",
            "sign":"签名1"
        },
        {
            "id":1002,
            "username":"user1",
            "sex":"女",
            "city":"城市1",
            "sign":"签名1"
        },
        {
            "id":1003,
            "username":"user1",
            "sex":"女",
            "city":"城市1",
            "sign":"签名1"
        },
        {
            "id":1004,
            "username":"user1",
            "sex":"女",
            "city":"城市1",
            "sign":"签名1"
        }
    ]
}

2.数据渲染

• 方法渲染 （常用）
  • table.render()返回一个对象

<table id="demo"></table>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	layui.use("table",function(){
		let table = layui.table;
		table.render({
			//容器对应的id属性
			elem: '#demo',
			//数据接口
			url: 'user.json',
			cols: [[
				//field:要与接口中返回数据的键保持一致  title:表头
				{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:120},
			]]
		});
	});
</script>

• 自动渲染
  • 给table设置class标签

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

3.头部工具栏

(1). 定义头部工具栏

<!-- 表头工具栏 -->
<script id="toolbarDemo" type="text/html">
	<div class="layui-btn-container">
		<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>  

(2). 将头部工具栏绑定到表格

<table id="demoTest" lay-filter="demoTest"></table>
<script type="text/javascript">
	layui.use("table",function(){
		let table = layui.table;
		table.render({
			elem: '#demoTest',
			url: 'user.json',
			cols: [[
				{"type":"checkbox"},
				{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:120},
			]],
			toolbar:'#toolbarDemo'//表头工具栏在这绑定
		});
	});
</script>  

使用toolbar属性，获取头部工具栏的id并绑定,显示效果如下

(3). 绑定头部工具栏监听事件 （与js事件绑定不同）

• 格式

table.on('toolbar(表格元素设置的lay-filter属性值)',function(data){
	//data.event代表的是头部工具栏中按钮设置的lay-event属性值
	//获取当前表格被选中的记录对象，返回数组，data.config.id表示当前选择器的id属性值 即demoTest
	let checkStatus = table.checkStatus(data.config.id);
});  

• 实现

table.on('toolbar(demoTest)',function(data){//代码放在layui.user的函数中
	let checkStatus = table.checkStatus(data.config.id);
	console.log(checkStatus);
	if(data.event == "getCheckData"){
		let result = checkStatus.data;
		layer.alert(JSON.stringify(result));
	}else if(data.event == "getCheckLength"){
		layer.msg("选中数量为："+checkStatus.data.length);
	}else if(data.event == "isAll"){
		layer.msg("是否全选："+checkStatus.isAll);
	}
});  

4.行工具栏

(1). 定义行工具栏

<!-- 行工具栏 -->
<script id="barDemo" type="text/html">
	<div class="layui-btn-container">
		<a class="layui-btn layui-btn-xs" lay-event="datail">查看</a>
		<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>
	</div>
</script>  

(2). 将头部工具栏绑定到表格

<table id="demoTest" lay-filter="demoTest"></table>
<script type="text/javascript">
	layui.use("table",function(){
		let table = layui.table;
		table.render({
			elem: '#demoTest',
			url: 'user.json',
			cols: [[
				{"type":"checkbox"},
				{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:120},
				{title:'操作',toolbar:'#barDemo'}//行工具栏在这绑定
			]],
			toolbar:'#toolbarDemo'
		});
	});
</script>  

使用cols属性绑定,显示效果如下

(3). 绑定行工具栏监听事件 （与js事件绑定不同）

• 格式

table.on('tool(表格元素设置的lay-filter属性值)',function(data){
});

• 实现

table.on('tool(demoTest)',function(data){//代码放在layui.user的函数中
	if(data.event == "edit"){
		//添加自己的事件
		console.log("编辑");
	}else if(data.event == "del"){
		//添加自己的事件
		console.log("删除");
	}
});

4.开启编辑

(1). 开启 只需要在需要编辑的标签加edit标签并指明编辑类型

<!-- 行工具栏 -->
table.render({//代码放在layui.user的函数中
	elem: '#demoTest',
	url: 'user.json',
	cols: [[
		{"type":"checkbox"},
		{field:'id',title:'ID',width:80,sort:true},
		{field:'username',title:'用户名',width:80,edit:'text'},//此处添加edit:'text'表明用户名可以被编辑
		{field:'sex',title:'性别',width:80,sort:true},
		{field:'city',title:'城市',width:80},
		{field:'sign',title:'签名',width:120},
		{title:'操作',toolbar:'#barDemo'}
	]],
	toolbar:'#toolbarDemo'
});  

(2). 添加事件监听

table.on('edit(demoTest)',function(obj){
	let value = obj.value,//修改后的值
	data = obj.data,//得到所在行所有键值
	field = obj.field;//得到字段
	layer.msg('[用户名:'+data.username+']'+field+'[字段更改为:'+value+']');
});

用户名字段可编辑，但只是dom操作，修改数据需要自家添加逻辑，显示效果如下

5.数据表格的重载 （常用于搜索功能）

(1). 添加搜索框

<!-- 在表格之上加入搜索框 -->
<div class="demoTable">
	搜索ID:
	<div class="layui-inline">
		<input class="layui-input" name="id" id="demoReload" autocomplete="off">
	</div>
	<button class="layui-btn" id="searchBtn">搜索</button>
</div>  

(2). 表格重载

document.getElementById("searchBtn").onclick = function(){//代码放在layui.user的函数中
	//获取搜索框对象
	let demoReload = document.getElementById("demoReload");
	//重载
	table.reload('demoTest',{
		where:{//设定异步数据接口的额外参数,任意设
			id:demoReload.value
		},
		page:{
			//让条件查询从第一页开始查询,不写则从当前页开始查询
			curr:1
		}
	});//只重载数据
}

此处通过原生js实现，建议尝试引入jquery实现，效果为搜索的同时，表格数据会进行重载

总结

  本文主要是对layui数据表格学习的总结，其他内容请参考官网教程https://www.layui.com/