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/
相关推荐
在Web开发中，模拟select元素的点击事件是一项常见的需求，尤其是当我们希望在不直接与页面交互的情况下改变选项值时。本文将通过实例讲解来阐述如何在使用layui框架的情况下，模拟select的点击事件。 ### 标题知识...
LayUI是一款基于前端MVC模式...在使用TableSelect时，首先需要引入LayUI库和TableSelect的扩展模块。通常，我们会在HTML文件中通过`<link>`标签引入LayUI的CSS和JS文件，以及TableSelect的特定JS文件。例如： ```html ...
通常，你需要引入layui的基础样式文件（如`layui.css`）和核心JS文件（如`layui.all.js`），以及对应的组件JS文件（如`layui.select.js`）。 综上所述，Layui的“layui-select-multiple”提供了一整套美观且功能...
在layui的基础上，把select选择框可更改为多选框，并可进行搜索、筛选值。下拉框内容可物理分页配置、自定义搜索模式(远程搜索)。 存在layui时, 同样也能直接使用xmSelect, 不用必须layui.xmSelect 具有多选上限设置...
1.首先,要给select加一个layui提供的属性 lay-filter=“level” 这里面的level自己定义,下面会用到 2.导入form layui.use('form', function(){ var form = layui.form; //只有执行了这一步，部分表单元素才会自动...
3. 使用layui的API初始化xm-select组件，通过配置项调整组件的行为，如是否开启搜索、显示模式等。 4. 如果需要动态加载数据，可以使用layui的异步请求方法，结合xm-select的回调函数进行数据绑定。 值得注意的是，...
在本篇文章中，我们主要探讨了如何在layui框架中获取select元素的自定义属性。layui是一个前端UI框架，它为Web开发者提供了一套丰富的界面元素和操作方式，尤其在处理表单元素时提供了很多便利。 首先，我们了解到...
通过以上步骤，你就可以在layui项目中成功地集成并使用“xm-select”插件了。这个插件不仅丰富了layui的功能，还让下拉多选框变得更加智能化，提高了用户的操作效率。无论是简单的多选场景，还是复杂的业务逻辑，`xm...
在压缩包`dist`文件夹中，通常包含了layui的CSS和JS文件，以及可能的示例代码和文档，你可以参考这些资源来深入了解和使用layui的`select`下拉框插件。 总的来说，layui的`select`下拉框插件提供了一种优雅的方式来...
标题中提到的关键技术点是“vue+layui实现select动态加载后台数据”，这个知识点涉及了前后端数据交互、前端框架Vue.js以及前端UI组件库Layui的使用。接下来将详细解析标题和内容中涉及的关键知识点。 ### Vue.js ...
layui layer.open()中的select,radio不显示.zip
然而，传统的`<select>`标签并不支持直接在选项中显示图片，只支持纯文本内容。但随着现代Web技术的发展，我们可以通过一些技巧来实现`select`下拉框中显示图片和文本的复合内容。以下是一些关键知识点，用于在`...
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，...
1.页面引入layui.js和layui.css <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>手机银行权限配置</title> <link type=text/css rel=stylesheet href=common/...
本文将深入探讨如何使用layui监听器监听select下拉框，并解决事件绑定不成功的问题。 首先，layui监听器的核心在于其事件绑定机制。在layui中，我们可以使用`form.on()`方法来监听form表单内的元素事件，包括select...
在默认情况下，layui的select是单选的，但通过自定义扩展或插件，我们可以实现多选功能。在描述中提到的“在layui中实现下拉框select多选，取值”就是指如何让select组件支持同时选择多个选项，并获取这些选择的值。...
查看提供的压缩包文件 "layui下拉多选"，其中可能包含了一个完整的示例，演示了如何在实际项目中使用 Layui 的下拉多选框。通过查看和学习此示例，可以更好地理解如何将这些知识点应用到实际开发中。 总的来说，...
本文将详细介绍如何使用 layui 的 `layui-select` 配合 `input` 实现这一功能，以及它们之间的交互逻辑。 首先，我们需要引入 layui 的 CSS 和 JS 文件到我们的HTML页面中。通常在页面的 `<head>` 标签内添加如下...
3. **监听事件**：在JavaScript中，使用`layui.form.on('select(province)', function(data){...})`来监听一级下拉框的选择变化。`data`参数包含了当前选择的值和其他相关信息。 4. **异步请求**：当一级下拉框的值...
这段代码在文档加载完成后，对ID为`imageDropdown`的`<select>`应用了`imageDropdown`方法，从而实现了图标的显示和下拉框的自定义样式。 这个插件还支持分组功能，通过`<optgroup>`标签可以创建选项组，这在处理多...