LayUI

1 layui主要文件：./layui/css/layui.css
　　　　　　　　./layui/layui.js

2 引入配置文件：
　　　　<link rel ="stylesheet" type="text/css" href="layui的layui.css文件地址">
　　　　普通引入方式：<script type="text/javascript" src ="layui.all.js的地址"/>

　　　　模块化引入方式：<script type="text/javascript">
　　　　　　　　　　　　　　console.dir(layui);
　　　　　　　　　　　　</script>

3 非模块化加载layui文件：
　　　　

　　　　<script>
　　　　　　;!function(){
　　　　　　　　var layer = layui.layer,form = layui.form;

　　　　　　}();
　　　   </script>

　模块化用法：

　　　　

　　　　<script>
　　　　　　layui.config({
　　　　　　　　base: '/res/js/modules/' //你存放新模块的目录，注意，不是layui的模块目录
　　　　　　}).use('index'); //加载入口
　　　　</script>

　　用法：

　　<script>
   　　 layui.use(['layer', 'admin', 'config'], function () {
      　　  var $ = layui.jquery;
        　　var layer = layui.layer;
        　　var admin = layui.admin;
        　　var config = layui.config;
        　　var router = layui.router;
    　　});
　　</script>
 

4 定义容器：layui-container
　　　    定义行用：layui-row

　　　　定义列用：layui-col- xs(最小)/sm(平板)/md(桌面)/lg(超大屏)占的格数

　　　　定义动画：layui-anim-效果

　　　　定义图片：layui-icom(只写这个声明是图片) layui-icon-图片

　　　　定义可变的按钮：layui-btn-fluid

　　　　内联：layui-form-lable

　　　　必填： required

　　　　提示信息:placeholder

　　　　超出长度后变成省略号： layui-elip

　　　　禁止点击：layui-disabled

　　　　设置成圆形：layui-circle

　　　　layui和bootstrap一样带有12栅格

　　　　layui的动画采用css3所以不支持ie8和部分ie9

5 向页面输出参数，渲染表格不显示的话：

　　1.格式错误

　　2.缺少treePidName: 'parentId'

6 layui回显后事件：

　　layuiTable回显完发生的事情

　

　  done:function () {
　　　　$('table.layui-table thead tr th:gt(5)').addClass('layui-hide');
　　}

7 layui填完值后需要从新渲染一遍，改完页面不显示也要从新渲染一下页面

　　例： layui.form.render("select");（从新渲染select框）

　　　　刷新全部：form.render()

　　　　下拉框默认选中 selected

　　　　如果检查查询语句没有错的话，检查插入的数据是否有错

8 admin.closeDialog('#portTranshipmentForm');关闭当前的from表单

9 table渲染返回的值判断：
　　

　　{
　　　　field: 'isTranshipmentShip', sort: true, templet: function (d) {

　　　　　　这里写判断 然后把需要的东西return出去 

　　　　}, title: '标题'
　　},

10 content和url的区别

　　　　content: 'components/base/shipForm.html',这个方法引入到那个地址后layui的加载会失效

　　　　url:'地址'这个就不会使layui失效

11 循环添加select框的内容

　　　　

　　　　<div class="layui-input-block">
　　　　　　<select name="parentId" id="par">

　　　　　　</select>
　　　　</div>

　　　　admin.req("base/flagStateAuthority/query",{},function (data) {

　　　　　　var content="";
　　　　　　for(var i=0;i<data.length;i++){
　　　　　　　　content+="<option value='"+data[i].id+"'>"+"<image src='"+data[i].fsaFlag+"'>"+"</option> ";
　　　　　　}

　　　　　　$("#par").append(content);//从新渲染select
　　　　　　layui.form.render("select");
　　　　},"post");

 12 layui时间控件：

　　　　　　引入 laydate

　　　　　　　　layui.use(['laydate'])

　　　　　　创建时间选择框

　　　　　　　　<input type="text" class="layui-input" id="time" name="time" placeholder="请选择日期">

　　　　　　引用时间控件　

　　　　　　　　laydate.render({

　　　　　　　　　　　　elem: '#time'+i //指定元素

　　　　　　　　　　　　,trigger: 'click' //设置触发方式 如果不加这个循环渲染时间控件会触发闪屏
　　　　　　　　 });

13 layui监听事件：

　　　

　　　 监听document 的失去焦点事件 
　　　　$(document).on('blur',"#shipEmail",function (data) {

　　　　　　alert(data)
　　　　})

14 layuiTable模块的基础参数：
　　　　elem：指定table容器
　　　　cols:[[
　　　　　　{checkbox:true},设定复选框如果设置为true 表示该列内容为复选框，通常他放在第一列
　　　　　　　　　　　　　在后面加 LAY_CHECJED:true 表示复选框默认全部选中

　　　　　　{field:'属性名',title:'列名'，宽，rowsoan:夸的单元格数}，一级表头 样式==<tr> <td>内容</td> </tr>

　　　　　　{field:'属性名',tetle:'列名'，colspan:跨的行数},二级表头 样式==<tr> <td>内容</td> </tr> <tr> <td>内容</td> </tr>

　　　　　　[{field:'属性名',title:'列名',宽度}]

　　　　]]

　　　　{space:true} 设置一个15px宽度的空列

　　　　{sort:true}设置排序（这个是用字典排序方法（基于字母顺序排序）和ASCII排序不同）

　　　　{fixed:true}设置固定列列将会被固定，不会随滚动条而滚动

　　　　{field:'属性名'，title:'列名',宽度，fixed:'固定的方向'}

　　　　{edit:'text'}单元格是否允许编辑（目前只支持input编辑）

15 layui渲染表格中加判断：
　　　　

　　　　{
　　　　　　field: 'isTranshipmentShip', sort: true, templet: function (d) {

　　　　　　　　if(d.isTranshipmentShip==0){

　　　　　　　　　　　　return "a";
　　　　　　　　　}else{
　　　　　　　　　　　　return "b";
　　　　　　　　    }

　　　　　　}, title: '船舶性质'
　　　　},

16 拆取时间的function

　　　　

　　　　{
　　　　　　field: 'createTime',align:"center" ,sort: true, templet: function (d) {
　　　　　　return formatDateTime(d.updateTime);
　　　　　　}, title: '创建时间'
　　　　},

　　　　function formatDateTime(inputTime) {
　　　　　　var date = new Date(inputTime);
　　　　　　var y = date.getFullYear();
　　　　　　var m = date.getMonth() + 1;
　　　　　　m = m < 10 ? ('0' + m) : m;
　　　　　　var d = date.getDate();
　　　　　　d = d < 10 ? ('0' + d) : d;
　　　　　　var h = date.getHours();
　　　　　　h = h < 10 ? ('0' + h) : h;
　　　　　　var minute = date.getMinutes();
　　　　　　var second = date.getSeconds();
　　　　　　minute = minute < 10 ? ('0' + minute) : minute;
　　　　　　second = second < 10 ? ('0' + second) : second;
　　　　　　return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
　　　　};

17 layui批量导出(导出的不是正经的excel)

　　　//导出的标题　
　　　var exportTitle=[];

　　    //导出的内容

　　    var exportData=[];

　　table.exportFile(exportTitle, exportData, 'xls');//导出数据
　

18.layui关闭弹窗层

　　admin.closeDialog('#portTranshipmentForm');关闭当前的from表单

　　layer.closeAll(); //关闭所有层

　　layer.closeAll('dialog'); //关闭信息框

　　layer.closeAll('page'); //关闭所有页面层

　　layer.closeAll('iframe'); //关闭所有的iframe层

　　layer.closeAll('loading'); //关闭加载层

　　layer.closeAll('tips'); //关闭所有的tips层