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/
相关推荐
今天小编就为大家分享一篇layui问题之模拟select点击事件的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
LayUi组件:TableSelect
html下拉多选框样式,h5下拉多选框整套样式,用layui实现下拉框select多选,取值 layui 多选下拉框 控件 整套样式
1.首先,要给select加一个layui提供的属性 lay-filter=“level” 这里面的level自己定义,下面会用到 2.导入form layui.use('form', function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动...
layui layer.open()中的select,radio不显示.zip
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第三方插件xm-select,layui index.html文件中引入xm-select.js即可实现下拉多选框功能效果
layui的select下拉框插件,可以多选
select下拉框列表实现图片内容显示,$("#***").select()格式
基于layui框架的前端多选下拉框组件,项目中直接导入,复制demo源码就能使用,开发方便,样式美观
今天小编就为大家分享一篇使用layui监听器监听select下拉框,事件绑定不成功的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
在layui的基础上,把select选择框可更改为多选框,并可进行搜索、筛选值。下拉框内容可物理分页配置、自定义搜索模式(远程搜索)。 存在layui时, 同样也能直接使用xmSelect, 不用必须layui.xmSelect 具有多选上限设置...
基于Jquery的自定义下拉框JS插件。 带图标、分组等
layui 的form表单里的select 一开始以为加上lay-verify=”required”就可以验证不空了,可是反复试了几次都不能验证 代码如下: <div class=layui-form-item> <label class=layui-form-label>所属工种: ...
今天小编就为大家分享一篇vue+layui实现select动态加载后台数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
监听select选择 form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 })...
在layui中实现下拉框select多选,取值
select option 自定义图片的js 、css 以及代码展示,javaScript ;
今天小编就为大家分享一篇解决layui的使用以及针对select、radio等表单组件不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧