Layui简介

什么是Layui？

Layui（谐音：类UI）是一套开源的WebUI解决方案，采用自身经典的模块化规范，并遵循原生HTML/CSS/JS的开发方式，说明不会像我们之前的Bootstrap里面的js依赖jQuery。Layui则是原生的不会依赖于jQuery，也不会依赖于其他的插件

注意：它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，（它是WebUI的前端框架，但是它更多的是面向后端的开发者）

Bootstrap面向的是前端的一个开发，Layui更多的是面向后端的一个开发

【详情见Layui手册】

Layui手册与Bootstrap框架大致一样，但也有许多不同的地方，具体的见Layui手册

Layui手册里面有许多的元素，则自行去手册里面看，与Bootstrap的差不多，这次讲以后的项目中大量能用到的

Layer既可以做为一个内置模块使用，也可以做为独立组件使用。如果你要是用独立组件除了引入layer.js还要引入jquer3.2.1.min.js的一个插件

Layui例子

弹出层

先新建一个项目

Layer作为layui的内置模块使用，他只需要引入layui.js和layui.css

引入插件之后，定义一个保存layer弹出层模块的变量，然后加载模块；如果你是要用layui里面的模块，都需要把这个模块进行加载，不能直接使用

加载模块里面有两个参数，一个是你要加载的模块，一个是回调函数，如果要加载多个模块，则把要加载的模块放到一个数据里面，加载一个模块则不需要放到数组里面

在把layui中的layer弹出层模块加载了，然后在输出一个弹出层即可（见图表1）

图表 1

这是一个简单的弹出层，在Layui手册里面还有其他的样式内容，比如title - 标题、content - 内容、offset - 坐标等等。（见图表2）

图表 2

弹出层写完了，现在开始看一下，弹出层里面的按钮（见图表3）

图表 3

日期

新建一个视图，把插件引入进来，这里多引入一个bootstrap.min.css的插件

在页面中添加一个或者两个input日期（见图表4）

图表 4

Callback等于回调函数

先定两个变量

加载layDate模块，

执行一个laydate实例

注意：所有的配置项都是写在花括号里面的（见图表5）

图表 5

表格

还是和之前一样，新创一个视图，把相对应的插件引入进去

这次的表格和之前写的表格不同，之前写的表格是在HTML里面通过行和列创建表格，这次使用layui插件去写，就是要在HTML里面放一个table即可，给它一个id。就不需要去写里面的行和列，（见图表6）

图表 6

先定义layer、layTable两个全局变量，通过var声明两个变量，变量的名称可以自定义。

变量定义好了之后，加载Table的模块，可能后面我们会需要用到layer弹出层的模块，我们也一起加载了。（见图表7）

！！！注意：加载模块中的关键字是固定的，不能顺便修改，或修改给一个数据

图表 7

Layui对我们的表格做了三种渲染方式，让我们更方便和快速的去写表格

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

我们这次用的是方法渲染（见图表8）

1、方法渲染有几个必填参数：

1）、elem：指定原始table容器的选择器或DOM

2)、cols：表头的配置

3)、url：采用异步数据接口相关参数，url是必填的，不采用异步接口，url可不填（这个url和异步里面的url是一样的）

2、表头里面的参数

1、title：标题的名称

2、field：字段名。（字段名的设定非常重要，且是表格数据列的唯一标识，如果你是要使用数据库里面的数据，最好与你的数据库里面的名称对应）

3、width：宽高

4、type：设定列类型 {normL：常规列，无需设定；checkbox：复选框；radio：单选框；numbers：序号列；space：空列}

图表 8

如果你想要看一下你创建的表格没有没有显示那就在下面添加一个data[ ]，data：加载本地数据

运行项目检查代码，我们要layui表格在HTML里面就写了图表6这一句代码，里面什么多没有。但我们使用layui里面方法的渲染，在下面多了一个div，里面就添加了一整张表格，里面包括行和列

配置好了之后我们就要去找数据，要么在data[ ]里面传入一些数据，要门就通过异步。我们还是用我们熟悉的异步

在控制器里面去写查询语句，在这之前要把数据库里面的数据引入到Models里面，引入过来之后要实例化（见图表9）

图表 9

实例化之后定一个方法

查询数据则通过LINQ标准数据查询，代码执行到这一句不会去查询，如果想要代码执行到这一句就去查询，在后面加一个ToList()，强行把数据查询出来（见图表10）然后进行返回，注意：他有自己的一个返回格式，不能顺便返回一个格式，不然则接收不到

图表 10

要指定的格式，我们则去定义一个类，在这个类里面就有你想要的一个字段，我把这个类进行返回，只是我们把数据放到那个类里面

在解决方案下面添加一个EntityClass实例类文件夹，把我们要添加的类全放到这里面。（见图表11）

图表 11

因为他这里的数据类型不确定所以这里我们用一个T表示，这个T就表示一个泛型

我们把类封装好了之后，我们就要用到它（见图表12）下面可能会出现显示可能的修补，我们就要把它的一个命名空间引入进来，返回的值就是实例化LayuiTableData对象Student。要把Student进行一个返回

Student里面就有几个数值count总共返回的一个条数还有一个data（见图表12、13）

图表 12

图表 13

Toolber：开启表格头部工具栏区域（具体见layui手册）

Page：设置了page就开启了分页，它的值一个是布尔类型，一个是对象类型

Limit：每页显示的条数

Limits：每页条数的选择项

分页的公式：（page-1）*limit

Skip()：跳过序列中指定数量的元素，然后返回剩余的元素

Take()：从序列中的开头返回指定数量的连续元素

我不想把所有的数据放在一张表格里面，我想把分成几页。怎么分？

先找到所有的数据，然后通过Skip()+公式+ Take()+ToList()就可以完成一个分页（见图表14）

图表 14

这个方法可以实现分页的效果，就是每次要用它的时候每次都要去写就比较麻烦。这样我们就可以去定义一个实体类，把它封装起来（见图表15）

图表 15

注意：在控制器的方法上要调用这个实体类（见图表16）后面是模糊查询的属性

图表 16

这样要用到的时候，就可以去调用它的类就可以了（见图表17）

图表 17

分页做完了就要来做，现在开始写模糊搜索了，在页面上添加一个div（见图表18）

图表 18

模糊查询的作用是什么呢？

模糊查询的作用是为了方便查询数据，不需要一个个去查询数据搜索一下就可以直接把你想要的数据查找出来

方法一：见图表19

方法二：见图表20

图表 19

图表 20

图表 21

图表21是控制器里面的写法和分页的一样都写在同一个方法里面

自定义列模块（见图表22）

图表 22

这是定义了一个自定义列的模块，表格上面则没有这个自定义列，所以我们要在方法渲染上面在添加一个表格（见图表23）

图表 23

这样一个表格的样式就全部完成了

Layui简介、layui例子相关推荐

001-引入layui和layui.code方法
1. layui官方网址: https://www.layui.com/. 2. 点击立即下载按钮, 下载最新版的layui. 3. 下载完成layui-v2.5.7.zip. 4. 解压缩layui ...
springboot+layui样式加载不进来No mapping for GET /layui/css/layui.css
可能是spring boot没有把样式文件扫描进来 @项目目录 1.第一步:在pojo,controller同级目录下创建config目录,并编写MyConfig代码: package ecut.co ...
Layui表格排序例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
layui引入layui的第三方插件（xm-select）
例子插件:xm-select插件 js引入文件(xmSelect.js即插件入口文件):xmSelect/xmSelect.js layui.config({base: '静态文件根路径/'}).ex ...
php layui table,layui table 相关问题汇总
1.表格内容自动换行完美解决默认情况下,layui table表格内容超出表格宽度会自动省略号隐藏需要鼠标放到单元格上,出现次图标然后再点击,才会显示全部,用起来不方便解决方法: 未页面添加c ...
layui概述||layui的学习内容
概述下载地址 https://www.layui.com/ 下载文件说明 layui.all.js 包含了所有模块的js layui.js 框架如果要使用必须使用 layui.use ...
php layui table,Layui table组件相关介绍
出现的问题: 1.使用 Layui 官方提供的 [转换静态表格] 方式初始化加载时报 id 找不到的错误(自己的锅) 2.传递参数问题使用的 table 加载刷新方案有一个页面,左侧是一个 tre ...
ajax返回值并在layui显示,layUI使用layer.open,在content打开数据表格,获取值并返回的方法...
在layUI编写的页面中,遇到这么一种情况,从一个页面中使用layer.open打开一个新窗口,新窗口中是一个数据表格,现在需要选中数据表格中的一列并获取它的值,以便下面这个选择按钮可以使用这个值进行 ...
layui向body添加html_layui使用教程 html引入layui教程-layui下载
layui教程,网站.前端开发.程序开发中layui应用引入教程,layui提供大量的前端美化元素模块.表格排版.表单美化.网页特效等资源,如何应用引入使用到我的项目中? layui使用教程以上UI ...

Layui简介、layui例子

Layui简介

什么是Layui？

Layui例子

弹出层

日期

表格

Layui简介、layui例子相关推荐

最新文章

热门文章