Layui入门(小白必备)

首先我目前用的版本是 layui-v2.5.5 ，后期大家用的版本可能会有所出入，大家可自行去官网自行下载最新版，当然大家如有什么不懂的，请直接留言，我会尽快为你解答，共勉。

一、目录结构

├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─ //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─ //基础核心库
└─ //包含和所有模块的合并文

二、简单介绍

layui分为两种包（模块化、非模块化），非模块化引的是 ,里面包含的所有组件，相当于你去肯德基里面买的全家桶。

模块化引的是，相当于你去肯德基里面按自己的喜好点的单品，吃啥点啥（用到哪个模块就引入哪个模块）避免浪费。

同理在实际开发时，如果你一上来就引了个全包会加大与服务器HTTP时的通信压力，所以我推荐大家使用 layui 时使用模块化的方式去实现 layui 的功能，按模块去熟悉 layui 。

三、模块化使用教程

大家先看下官网给出了哪些模块，如下图：

上面红色框出的部分就是目前版本中所拥有的模块，而我们一般使用最频繁的模块就是layer（弹出层）、table（数据表格）、form（表单），下面我将结合我最近的代码块给大家讲解。

1、数据表格（table）

首先大家通过

([模块名,模块名]),function(){}

引入所需模块，然后结合下图对 table 模块进行初步的认识：

var layer = 
            ,$ = layui.$
			,form = 
            ,laydate = ;

这段代码的意思是对所引入的模块起别名，方便后面大家可直接通过别名调用模块中的方法，该模块中需要注意以下几点：

① 数据表格的数据接口需返回 JSON 格式的数据

② 分页需在后台进行数据的控制，前端只提供了分页参数，默认为 page (页码) limit （每页展示数）

③ 列表中展示列数据不需要处理的直接将 fileld 与后台属性保持一致即可，对于需要特殊处理的，如常见的对象、时间可通过如下图中的方式进行控制。

文末附上 js 格式化时间的方法，方便大家参考。

2、表单（form）

引入方式同上，直接上图：

该模块需要注意的有以下几个方面：

① 表格数据的获取方式一般可直接写但当有附件时，推荐大家用

var formData  = new FormData($("#mealRollForm")[0]);

② 表单方法末尾一定要加上 break ！！！别问我为什么，你可以不加试试...

3、弹出层（layer）

弹出层没啥好说的，直接上官网的介绍：

基础参数

我们提到的基础参数主要指调用方法时用到的配置项，如：({content: ''})('', {time: 3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的、就是内置方法。注意，从2.3开始，无需通过来加载拓展模块

type - 基本层类型

title - 标题

content - 内容

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用({type: 1})方式调用，则type为必填项（信息框除外）

类型：String/Array/Boolean，默认：'信息'

title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false

类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同

这块建议大家直接看官方文档，上面介绍的很详细，这块也没啥坑，附上链接

js 时间格式化

//转换日期格式(时间戳转换为datetime格式)
function changeDateFormat(cellval) {
    var dateVal = cellval + "";
    if (cellval != null) {
        var date = new Date(parseInt(("/Date(", "").replace(")/", ""), 10));
        var month = () + 1 < 10 ? "0" + (() + 1) : () + 1;
        var currentDate = () < 10 ? "0" + () : ();

        var hours = () < 10 ? "0" + () : ();
        var minutes = () < 10 ? "0" + () : ();
        var seconds = () < 10 ? "0" + () : ();

        return () + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
    }else{
        return "";
    }
}

秒客网