layui使用，LayUI select不显示，LayUI文件上传，Layui自定义校验规则

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">&#xe67c</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;">&#x1005</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">&#xe67c</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;">&#x1005</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">&#xe67c</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;">&#x1005</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/