通俗易懂，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/

巴特西

通俗易懂，Layui前端框架！

前言

一、Layui 光速入门

1. 官网下载解压

2. layui资源引入

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

二、layui 数据表格

1.准备数据

2.数据渲染

3.头部工具栏

4.行工具栏

4.开启编辑

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

总结

最新文章

热门文章

巴特西

通俗易懂，Layui前端框架！

前言

一、Layui 光速入门

1. 官网下载解压

2. layui资源引入

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

二、layui 数据表格

1.准备数据

2.数据渲染

3.头部工具栏

4.行工具栏

4.开启编辑

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

总结

最新文章

热门文章

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

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