1 layui主要文件：./layui/css/layui.css ./layui/layui.js2 引入配置文件： <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:'列名'，width:宽，rowsoan:夸的单元格数}，一级表头 样式==<tr> <td>内容</td> </tr> {field:'属性名',tetle:'列名'，colspan:跨的行数},二级表头 样式==<tr> <td>内容</td> </tr> <tr> <td>内容</td> </tr>
[{field:'属性名',title:'列名',width:宽度}] ]]
{space:true} 设置一个15px宽度的空列
{sort:true}设置排序（这个是用字典排序方法（基于字母顺序排序）和ASCII排序不同）
{fixed:true}设置固定列列将会被固定，不会随滚动条而滚动
{field:'属性名'，title:'列名',width:宽度，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层
转载于:https://www.cnblogs.com/HQ0422/p/10525595.html
