目前出现过的一些问题：
标题1. layui中输入框较短或过长
layui中提供了表单两种形式的长度，分别为
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">单行输入框</label>
<div class="layui-input-block">
<input name="title" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off" lay-verify="title">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证必填项</label>
<div class="layui-input-block">
<input name="username" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">验证手机</label>
<div class="layui-input-inline">
<input name="phone" class="layui-input" type="tel" autocomplete="off" lay-verify="required|phone">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证邮箱</label>
<div class="layui-input-inline">
<input name="email" class="layui-input" type="text" autocomplete="off" lay-verify="email">
</div>
</div>
</div>
</form>
其中
为块元素通常为单独的一块，因此会单独的换一行，
为内联元素，内联元素前后不会产生换行，一系列的inline元素都在一行内显示，直到该行填满。 一般而言，可以根据inline和block改变页面的布局，对于表单而言，虽然layui提供了这两个功能，但是由于长度固定，针对特殊的要求无法满足，因此还需要进行额外的限制。例如需要两个表单单独一行，并且需要占满整个一行时，上面所示的格式便不太满足要求，格式不够美观。因此需要针对输入框和前面文字加入style进行宽度设置。
<div class="layui-inline">
<label class="layui-form-label" style="width: 120px"></label>
<div class="layui-input-inline" style="width: 360px">
<input name="phone" class="layui-input" type="tel" placeholder="13.2%" autocomplete="off" lay-verify="required|phone">
</div>
</div>
标题2.针对layui中修饰格式不显示问题
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>公告管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<%--<link rel="icon" href="favicon.ico">--%>
<link rel="stylesheet" href="${yeqifu}/static/layui/css/layui.css" media="all"/>
<link rel="stylesheet" href="${yeqifu}/static/css/public.css" media="all"/>
<link rel="stylesheet" href="${yeqifu}/static/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="${yeqifu}/static/layui_ext/dtree/font/dtreefont.css">
</head>
<body class="childrenBody">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>金融</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">
<div class="layui-form-item">
<button class="layui-btn layui-btn-primary layui-btn-sm3" type="button">显示过滤器</button>
<button class="layui-btn layui-btn-primary layui-btn-sm3" type="button">重置过滤器</button>
</div>
</form>
<form class="layui-form" method="post" id="searchFrm">
<div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg3">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-inline">
<label class="layui-form-label">报表类型</label>
</div>
<div class="layui-inline">
<select name="city" lay-verify="">
<option value="">请选择评估原因</option>
<option value="010">咨询和顾问</option>
<option value="011">年度审核</option>
<option value="012">指示性指标</option>
<option value="021">中期审查</option>
<option value="031">新的评级</option>
</select>
</div>
</div>
</div>
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg3">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-inline">
<label class="layui-form-label">报表来源:</label>
</div>
<div class="layui-inline">
<select name="city" lay-verify="">
<option value="">请选择评估原因</option>
<option value="010">咨询和顾问</option>
<option value="011">年度审核</option>
<option value="012">指示性指标</option>
<option value="021">中期审查</option>
<option value="031">新的评级</option>
</select>
</div>
</div>
</div>
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg3">
<div class="layui-inline">
<label class="layui-form-label">日期从：</label>
<div class="layui-input-inline">
<input name="date" class="layui-input" id="date" type="text" placeholder="yyyy-MM-dd" autocomplete="off" lay-verify="date">
</div>
</div>
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg3">
<div class="layui-inline">
<label class="layui-form-label">日期至：</label>
<div class="layui-input-inline">
<input name="date" class="layui-input" id="date1" type="text" placeholder="yyyy-MM-dd" autocomplete="off" lay-verify="date">
</div>
</div>
</div>
</div>
</form>
以上代码实现的功能为
以上图片为在layui中调试预览中跑出的结果，说明一下存在 的问题：
1.输入框无法显示，以及显示内容为上述layui中跑出的形式，没有进行渲染。
2.日期格式并没有显示，无法调出显示时间的框图以及两个时间框图只有一个可以选择，另外一个无法选择。
解决方案：
针对第一个问题，输入框无法显示研究了之后发现如果调用form进行限制，那结果就基本没问题，因此在报表类型和报表来源整合入form中。利用layui的经典模块化框架进行渲染。如果没有form进行限制，选择输入框还可能出现浮动的问题，因此必须将内容放入form中，以给以限制。
针对第二个问题，首先发现我之前只是将layui中body内相关的代码copy到我自己的程序中，但是由于中间存在逻辑的控制，因此需要将script内容复制进去才可以实现时间选择框图。
随后我发现只有第一个框图可以选择时间，第二个无法进行选择，随后发现了一个细节，
这很明显不满足需求，由于都是直接从layui中复制粘贴，因此当时没有进行过多思考，所以出现了这样错误，随后在script中加入了date1，将下面框图中的id改为date1，从而实现两个框图都可以进行时间框图选择。
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//日期
laydate.render({
elem: '#date'
});
laydate.render({
elem: '#date1'
});
解决了这两个问题之后，最后的显示结果已经没了问题，如下图：
标题3.script混乱问题
在上述内容完成之后，去实现接下来的内容，但是在实现过程中运行程序，发现上述内容又重新发生了混乱的问题，经过重新编写以及分析，发现问题出现在混乱的script上。
出现错误的原因：将所有表单以及数据表的逻辑方面均写入同一个script内容中，同时针对一些script内容还进行了删除操作，最终导致了错误的发生。
出现错误的解决方法：针对不同功能不同位置的script进行标注，并且单独进行编写，同时需要注意是否重名的情况如果出现重名，则需要考虑将重复命名位置替换。
<%--控制显示表单时间--%>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//日期
laydate.render({
elem: '#date'
});
laydate.render({
elem: '#date1'
});
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '标题至少得5个字符啊';
}
}
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
,content: function(value){
layedit.sync(editIndex);
}
});
//监听指定开关
form.on('switch(switchTest)', function(data){
layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
});
//监听提交
form.on('submit(demo1)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
//表单赋值
layui.$('#LAY-component-form-setval').on('click', function(){
form.val('example', {
"username": "贤心" // "name": "value"
,"password": "123456"
,"interest": 1
,"like[write]": true //复选框选中状态
,"close": true //开关状态
,"sex": "女"
,"desc": "我爱 layui"
});
});
//表单取值
layui.$('#LAY-component-form-getval').on('click', function(){
var data = form.val('example');
alert(JSON.stringify(data));
});
});
</script>
<%--进行表格的内容展示--%>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/demo/table/user/'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,url:'/test/table/demo1.json'
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,cols: [[
{type: 'checkbox', fixed: 'center'}
,{field:'id', title:'ID', fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'报表类型',edit: 'text'}
,{field:'date', title:'报表开始日期', edit: 'text'}
,{field:'date1', title:'报表结束日期', edit: 'text', sort: true}
,{field:'Source', title:'来源', }
,{field:'Currency', title:'货币'}
,{field:'Unit', title:'单位数目', sort: true}
,{field:'Projected', title:'工程', }
,{field:'ProForma', title:'报价单', sort: true}
]]
,page: true
});
//头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
});
</script>
