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:\’列名\’，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层