layui使用，LayUI select不显示，LayUI文件上传，Layui自定义校验规则
================================
©Copyright 蕃薯耀 2020-08-06
http://fanshuyao.iteye.com/
一、引入js和css
<link rel="stylesheet" href="../../static/plugin/layui-v2.5.6/css/layui.css"> <script type="text/javascript" src="../../static/plugin/layui-v2.5.6/layui.all.js"></script>
二、使用
1、表单
<div>
<form class="layui-form" autocomplete="off">
<div class="layui-form-item projAuto">
<label class="layui-form-label">开发建设用地面积（s）：</label>
<div class="layui-input-block">
<button id="btnUploadSocialHousingRange" type="button" class="layui-btn layui-btn-sm btnUpload">
<i class="layui-icon"></i>
选择CAD文件
</button>
<input type="hidden" class="uploadFileValue" name="socialHousingRange"/>
<span class="uploadFileName layui-text"></span>
<span class="uploadSuccessText ml15 none oh">
<span class="layui-icon" style="color: #007166;">စ</span>
</span>
<span class="progressText"></span>
</div>
</div>
<div class="layui-form-item projAuto">
<div class="layui-inline">
<label class="layui-form-label"></label>
</div>
<div class="layui-inline">
<label class="layui-form-label-small layui-form-label">一类用地面积：</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="develop_area_1" class="layui-input" lay-verify="numberEmpty" />
</div>
<div class="layui-form-mid layui-word-aux">平方米</div>
<label class="layui-form-label-small layui-form-label">二类用地面积：</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="develop_area_2" class="layui-input" lay-verify="numberEmpty" />
</div>
<div class="layui-form-mid layui-word-aux">平方米</div>
<label class="layui-form-label-small layui-form-label">三类用地面积：</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="develop_area_3" class="layui-input" lay-verify="numberEmpty" />
</div>
<div class="layui-form-mid layui-word-aux">平方米</div>
</div>
</div>
<div class="layui-form-item projAuto">
<div class="layui-inline">
<label class="layui-form-label">开发建设用地内总居住用地面积（S居）：</label>
<div class="layui-input-inline">
<input type="text" name="live_area" class="layui-input" lay-verify="numberEmpty" />
</div>
<div class="layui-form-mid layui-word-aux">平方米</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">非农/城中村用地范围：</label>
<div class="layui-input-inline" style="width: 700px;">
<button id="btnUploadVillageRange" type="button" class="layui-btn layui-btn-sm btnUpload">
<i class="layui-icon"></i>
选择CAD文件
</button>
<input type="hidden" class="uploadFileValue" name="villageRange"/>
<span class="uploadFileName layui-text"></span>
<span class="uploadSuccessText ml15 none oh">
<span class="layui-icon" style="color: #007166;">စ</span>
</span>
<span class="progressText"></span>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label"></label>
</div>
<div class="layui-inline">
<label class="layui-form-label-small layui-form-label">一类用地面积：</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="village_area_1" class="layui-input" lay-verify="numberEmpty" />
</div>
<div class="layui-form-mid layui-word-aux">平方米</div>
<label class="layui-form-label-small layui-form-label">二类用地面积：</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="village_area_2" class="layui-input" lay-verify="numberEmpty" />
</div>
<div class="layui-form-mid layui-word-aux">平方米</div>
<label class="layui-form-label-small layui-form-label">三类用地面积：</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="village_area_3" class="layui-input" lay-verify="numberEmpty" />
</div>
<div class="layui-form-mid layui-word-aux">平方米</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">土地移交率<span class="red">*</span>：</label>
<div class="layui-input-inline">
<input type="text" name="land_scale" class="layui-input" lay-verify="required|numberEmpty" />
</div>
<div class="layui-form-mid layui-word-aux">%</div>
</div>
<div class="layui-form-item">
<div class="layui-inline projAuto">
<label class="layui-form-label">轨道站点500米范围内居住用地面积(S轨)：</label>
<div class="layui-input-inline">
<input type="text" name="track_area" class="layui-input" lay-verify="numberEmpty" />
</div>
<div class="layui-form-mid layui-word-aux">平方米</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">旧工业区（仓储区）或城市基础设施及公共服务设施用地面积改造为住宅（S工）:</label>
<div class="layui-input-inline">
<input type="text" name="old_industry_area" class="layui-input" lay-verify="numberEmpty" />
</div>
<div class="layui-form-mid layui-word-aux">平方米</div>
</div>
</div>
<div class="layui-form-item">
<div class="tac">
<button class="layui-btn layui-btn-normal" id="btnAnalysis" lay-submit lay-filter="formAnalysis">智能分析</button>
<button class="layui-btn layui-btn-primary" type="button" onclick="resetForm()">重置</button>
</div>
</div>
</form>
</div>
2、文件上传（带上传进度）
定义上传的按钮
<div class="layui-form-item projAuto">
<label class="layui-form-label">开发建设用地面积（s）：</label>
<div class="layui-input-block">
<button id="btnUploadSocialHousingRange" type="button" class="layui-btn layui-btn-sm btnUpload">
<i class="layui-icon"></i>
选择CAD文件
</button>
<input type="hidden" class="uploadFileValue" name="socialHousingRange"/>
<span class="uploadFileName layui-text"></span>
<span class="uploadSuccessText ml15 none oh">
<span class="layui-icon" style="color: #007166;">စ</span>
</span>
<span class="progressText"></span>
</div>
</div>
初始化上传的方法
function initUploadSocialHousingRangeInstance(){
var uploadSocialHousingRangeInstance = upload.render({
elem : "#btnUploadSocialHousingRange",
//auto : false,
field : "file",
accept : "file",
//acceptMime : "image/*",
exts : "dwg",
data : {userID : 1},
url : webApi.map.rest.cadAnalysisUrl,
choose : function(obj){
var thisItem = $(this.item);
obj.preview(function(index, file, result){
//console.log("choose filename = " + JSON.stringify(file.name));
$(thisItem).siblings(".uploadFileName").html(file.name);
});
$(this.item).siblings(".progressText").html("");
$(this.item).siblings(".uploadFileValue").val("");
$(this.item).siblings(".uploadSuccessText").hide();
$(":input[name='develop_area_1']").val("");
$(":input[name='develop_area_2']").val("");
$(":input[name='develop_area_3']").val("");
layer.msg("文件上传中，请等待…", {
icon : 16,
shade : 0.05
});
},
progress : function(n, elem){
$(this.item).siblings(".progressText").html(n + "%");
},
done : function(res, index, upload){
layer.closeAll();
//console.log("res = " + JSON.stringify(res));
if(res.DWGRESULT.COORD){
$(this.item).siblings(".uploadFileValue").val(res.DWGRESULT.COORD);
$(this.item).siblings(".uploadSuccessText").show();
}else{
layer.msg("文件解析失败，请重试");
}
},
error : function(index, upload){
layer.closeAll();
layer.msg("文件上传失败，请重试");
}
});
};
执行初始化方法
$(function(){
initUploadSocialHousingRangeInstance()
});
3、LayUI下拉框（LayUI Select）不显示
<div>
<form class="layui-form" autocomplete="off">
<div class="layui-form-item">
<label class="layui-form-label">公配设施类型：</label>
<div class="layui-input-inline">
<select name="publicFacilitiesType" lay-verfify="required" lay-search lay-filter="publicFacilitiesTypeFilter">
<option value="幼儿园">幼儿园</option>
<option value="小学">小学</option>
<option value="中学">中学</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="tac">
<button class="layui-btn layui-btn-normal" id="btnAnalysis" lay-submit lay-filter="formAnalysis">智能分析</button>
<button class="layui-btn layui-btn-primary" type="button" onclick="resetForm()">重置</button>
</div>
</div>
</form>
</div>
注意：上面html代码虽然定义的select元素，但还是不能正常显示的，需要在加载完后使用form.render();重新渲染。
$(function(){
form.on("submit(formAnalysis)", function(data){
initData(data);
return false;
});
form.on("select(publicFacilitiesTypeFilter)", function(data){
//option改变时的操作
//publicFacilitiesTypeChange(data.value);
//console.log("data.elem" + data.elem);
//console.log("data.elem" + data.value);
return false;
});
form.render();
});
重置：
function resetForm(){
layer.confirm("您确定要重置吗？", {
btn : ["确定", "取消"]
}, function(){
window.location = window.location;
}, function(){
//layer.msg("取消");
});
};
4、LayUI自定义校验规则：
<div class="layui-form-item">
<label id="populationText" class="layui-form-label">服务人口数：</label>
<div class="layui-input-inline">
<input type="text" name="population" class="layui-input" lay-verify="required|numberEmpty"/>
</div>
<div id="populationTextTip" class="layui-form-mid layui-word-aux">（万人）</div>
</div>
上面有一个自定义校验规则：numberEmpty
var layer = layui.layer;
var form = layui.form;
$(function(){
form.verify({
numberEmpty : function(value, item){
if(!isEmpty(value)){
if(!isNumber(value)){
return "只能填写数字";
}
}
}
});
//form.render();//不清楚还要不要这个
});
5、Layer提示封装
var layer = layui.layer;
L = {};
L.msg = function(msg){
return layer.msg(msg);
};
L.fail = function(msg){
return layer.alert(msg, {icon: 5, shade: 0.5});
};
L.failMsg = function(msg){
return layer.msg(msg, {icon: 5});
};
L.ok = function(msg){
return layer.alert(msg, {icon: 6, shade: 0.5});
};
L.okMsg = function(msg){
return layer.msg(msg, {icon: 6});
};
L.alert = function(msg){
return layer.alert(msg);
};
L.load = function(msg){
return layer.msg((msg || "数据处理中，请等待…"), {
icon : 16,
shade : 0.2,
time: 0//不关闭
});
};
L.confirm = function(msg){
return layer.msg((msg || "数据处理中，请等待…"), {
icon : 16,
shade : 0.2,
time: 0//不关闭
});
};
/*
使用：
aaa = function(){
alert("bbbcc");
};
L.confirm("你确定？", aaa);
*/
L.confirm = function(msg, callbackFunction){
return layer.confirm((msg || "您确定要操作吗？"), {
btn: ["确定", "关闭"] //按钮
}, function(index, layero){
callbackFunction();
layer.close(index);
}, function(index, layero){
layer.close(index);
});
};
6、Layer处理Ajax请求（遮罩层）
function getFunction(projNo){
var index = L.load("正在处理，请等待…");
$.ajax({
url : "../xxxAction",
type : "post",
dataType : "json",
data : {
projNo : projNo
},
complete : function(XMLHttpRequest, textStatus){
layer.close(index);
},
error : function(XMLHttpRequest, textStatus, errorThrown){
layer.close(index);
if("error" == textStatus){
layer.msg("失败，请重试", {icon: 5});
}else{
layer.msg("请求失败，textStatus="+textStatus, {icon: 5});
}
},
success : function(data){
//console.log("data=" + JSON.stringify(data));
if(data && data.result){
//成功
}else{
layer.msg(data.msg, {icon: 5});
}
}
});
};
7、layui-form-label 长度修改
.layui-form-label{width: 250px;}
.layui-form-label-small{width: 90px;padding: 9px 5px;}
================================
©Copyright 蕃薯耀 2020-08-06
http://fanshuyao.iteye.com/
相关推荐
3. 自定义验证函数：如果预定义的规则不能满足需求，我们还可以自定义验证函数。在JavaScript中，我们可以通过监听`layui.form.on('submit')`事件，然后在事件回调中执行自定义的验证逻辑。例如，检查输入是否为正...
在开发Web应用时，我们经常会遇到各种前端框架的交互问题，其中之一就是在layui中处理form表单与button点击事件冲突的问题。layui是一个轻量级的前端组件库，它提供了丰富的UI元素和交互功能，包括表单组件和按钮。...
基于改进粒子群算法的DG储能选址定容优化模型：解决电力系统时序性问题的可靠程序解决方案,基于改进粒子群算法的DG储能选址定容模型优化解决电力系统问题,DG储能选址定容模型matlab 程序采用改进粒子群算法，考虑时序性得到分布式和储能的选址定容模型，程序运行可靠 这段程序是一个改进的粒子群算法，主要用于解决电力系统中的优化问题。下面我将对程序进行详细分析。 首先，程序开始时加载了一些数据文件，包括gfjl、fljl、fhjl1、cjgs和fhbl。这些文件可能包含了电力系统的各种参数和数据。 接下来是一些参数的设置，包括三种蓄电池的参数矩阵、迭代次数、种群大小、速度更新参数、惯性权重、储能动作策略和限制条件等。 然后，程序进行了一些初始化操作，包括初始化种群、速度和适应度等。 接下来是主要的迭代过程。程序使用粒子群算法的思想，通过更新粒子的位置和速度来寻找最优解。在每次迭代中，程序计算了每个粒子的适应度，并更新个体最佳位置和全局最佳位置。 在每次迭代中，程序还进行了一些额外的计算，如潮流计算、储能约束等。这些计算可能涉及到电力系统的潮流计算、功率平衡等知识点。 最后，程序输
数学建模相关主题资源2
内容概要：本文详细介绍了一系列用于科学研究、工程项目和技术开发中至关重要的实验程序编写与文档报告撰写的资源和工具。从代码托管平台(GitHub/GitLab/Kaggle/CodeOcean)到云端计算环境(Colab)，以及多种类型的编辑器(LaTeX/Microsoft Word/Overleaf/Typora)，还有涵盖整个研究周期的各种辅助工具：如可视化工具（Tableau）、数据分析平台(R/Pandas)、项目管理工具(Trello/Jira)、数据管理和伦理审核支持(Figshare/IRB等)，最后提供了典型报告的具体结构指导及其范本实例链接(arXiv/PubMed)。这为实验流程中的各个环节提供了系统的解决方案，极大地提高了工作的效率。 适合人群：高校学生、科研工作者、工程技术人员以及从事学术写作的人员，无论是新手入门还是有一定经验的人士都能从中受益。 使用场景及目标：帮助读者高效地准备并开展实验研究活动；促进团队间协作交流；规范研究报告的形式；提高对所收集资料的安全性和隐私保护意识；确保遵循国际公认的伦理准则进行实验。
四轮毂驱动电动汽车稳定性控制策略：基于滑模与模糊神经网络的转矩分配与仿真研究,四轮毂驱动电动汽车稳定性控制：基于滑模与模糊神经网络的转矩分配策略及联合仿真验证,四轮毂驱动电动汽车稳定性控制，分布式驱动转矩分配。 上层基于滑模，模糊神经网络控制器决策横摆力矩，下层基于动态载荷分配，最优分配，平均分配均可做。 simulink与carsim联合仿真。 ,四轮毂驱动;电动汽车稳定性控制;分布式驱动;转矩分配;滑模控制;模糊神经网络控制器;横摆力矩;动态载荷分配;最优分配;平均分配;Simulink仿真;Carsim仿真,四驱电动稳定性控制：滑模与模糊神经网络决策的转矩分配研究
本资源提供了一份详细的PyCharm安装教程，涵盖下载、安装、配置、激活及使用步骤，适合新手快速搭建Python开发环境。
毕业设计
原版宋体.ttf，原版宋体安装文件，安装方式，直接右键安装。
利用Xilinx FPGA内嵌的软核处理器MicroBlaze，加上自主编写的AXI_IIC控制器，实现对IMX327传感器IIC总线的控制，同时辅以UART调试串口，实现系统状态的实时监控与调试。
在 GEE（Google Earth Engine）中，XEE 包是一个用于处理和分析地理空间数据的工具。以下是对 GEE 中 XEE 包的具体介绍： 主要特性 地理数据处理：提供强大的函数和工具，用于处理遥感影像和其他地理空间数据。 高效计算：利用云计算能力，支持大规模数据集的快速处理。 可视化：内置可视化工具，方便用户查看和分析数据。 集成性：可以与其他 GEE API 和工具无缝集成，支持多种数据源。 适用场景 环境监测：用于监测森林砍伐、城市扩展、水体变化等环境问题。 农业分析：分析作物生长、土地利用变化等农业相关数据。 气候研究：研究气候变化对生态系统和人类活动的影响。
毕业设计
整个文件的代码
名字微控制器_STM32_DFU_引导加载程序_dapboo_1740989527.zip
详细介绍及样例数据：https://blog.csdn.net/T0620514/article/details/145991332
anaconda配置pytorch环境
立体仓库控制组态王6.55与三菱PLC联机仿真程序：视频教程与IO表接线图CAD详解,9仓位立体仓库控制系统优化方案：组态王6.55与三菱PLC联机仿真程序视频教程及IO表接线图CAD详解,9仓位立体仓库控制组态王6.55和三菱PLC联机仿真程序+视频+带io表接线图CAD ,关键词：立体仓库；控制组态王6.55；三菱PLC；联机仿真程序；视频；io表接线图；CAD,立体仓库控制组态王与三菱PLC联机仿真程序资源包
基于Maxwwell设计的经典外转子永磁同步电机案例：直流母线24V，大功率与高效率驱动设计,基于Maxwell设计的经典永磁同步电机案例：200W功率，外转子结构，直流母线电压与电机参数详解,基于maxwwell设计的经典200W，2200RPM 外转子，直流母线24V，42极36槽，定子外径81.5 轴向长度15 ，0.86Nm, 永磁同步电机（PMSM）设计案例，该案例可用于生产，或者学习用 ,经典设计案例; 200W; 2200RPM外转子; 直流母线24V; 42极36槽; 定子外径81.5; 轴向长度15; 永磁同步电机（PMSM）; 生产学习用。,经典200W永磁同步电机设计案例：Maxwell外转子，高效率2200RPM直流母线系统
C# Modbus RTU协议主站设计工程源码详解：支持多从站访问与多线程实现，带注释开源dll文件,C# Modbus RTU协议主站设计工程源码解析：多线程实现访问多个从站功能的开源dll文件,C# Modbus RTU协议主站设计工程源码带注释，开源dll文件，支持访问多个从站，多线程实现 ,C#; Modbus RTU协议; 主站设计; 工程源码; 注释; 开源dll; 多从站访问; 多线程实现,《C# Modbus RTU主站源码：多线程支持访问多从站开源DLL文件详解》