欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

MVC+Layui彈出表單模態(tài)框的實(shí)現(xiàn)代碼

 更新時(shí)間:2024年01月15日 11:34:05   作者:它朝若是  
這篇文章主要介紹了MVC+Layui彈出表單模態(tài)框的實(shí)現(xiàn)代碼,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1、Html頁(yè)面添加隱藏的form表單

<button class="layui-btn" id="add" lay-on="add">添 加</button>添加按鈕
  <form class="layui-form" id="AddForm" method="post" lay-filter="example" style="width:360px;display:none;margin:auto;margin-top:20px">
    <div class="layui-form-item">
        <label class="layui-form-label">規(guī)格型號(hào):</label>
        <input style="margin:auto" type="text" name="specification" lay-verify="required" autocomplete="off" placeholder="請(qǐng)輸入規(guī)格型號(hào)" class="layui-input">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">物料類(lèi)型:</label>
        <div id="seltype" style="width:280px;margin-left:80px;"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">入庫(kù)數(shù)量:</label>
        <input type="number" style="margin:auto" lay-affix="number" name="storagecount" placeholder="請(qǐng)輸入入庫(kù)數(shù)量" lay-verify="required" step="1" min="1" class="layui-input" onKeyUp="this.value=this.value.replace('.','');">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">入庫(kù)時(shí)間:</label>
        <input type="text" class="layui-input" id="storagetime" name="storagedt" lay-verify="required" placeholder="yyyy-MM-dd HH:mm:ss">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">備注:</label>
        <input style="margin:auto" type="text"  name="remark" placeholder="備注信息" autocomplete="off" class="layui-input">
    </div>
</form>

2、js添加彈出框和提交事件

  layui.use(function () { 
        var layer = layui.layer;//彈出框
        var form = layui.form;//表單
        var laydate = layui.laydate//日期控件
        var util = layui.util;//獲取模塊
        // 日期時(shí)間選擇器
        laydate.render({
            elem: '#storagetime',
            type: 'datetime',//可選多種類(lèi)型,日期/日期時(shí)間等
            theme: 'molv'//墨綠色主題顏色
        });
 util.on('lay-on', {//觸發(fā)控件
            'add': function () {//id為add控件
                $("#AddForm")[0].reset();//重置form表單
                var addLay = layer.open({
                    type: 1 //Page層類(lèi)型
                    , skin: 'layui-layer-molv'//墨綠主題顏色
                    , area: ['430px']//模態(tài)框大小,盡量比f(wàn)orm表單大
                    , title: ['新增物料入庫(kù)', 'font-size:18px;text-align:center']
                    , btn: ['保存', '取消']
                    , closeBtn: 0
                    , shadeClose: false// 點(diǎn)擊遮罩區(qū)域,關(guān)閉彈層
                    , shade: 0.2 //遮罩透明度
                    , content: $('#AddForm')//將form表單追加到彈窗中
                    , success: function (layero) {
                        var mask = $(".layui-layer-shade");
                        mask.appendTo(layero.parent());
                        //彈出層---進(jìn)行校驗(yàn)1、將彈出層的確定按鈕 轉(zhuǎn)為layui的form提交按鈕  2、寫(xiě)自定義的校驗(yàn)規(guī)則 3、通過(guò)from.on實(shí)現(xiàn)
                        //1.1 條件form標(biāo)識(shí)
                        layero.addClass('layui-form');
                        //1.2 將保存按鈕轉(zhuǎn)為提交按鈕
                        layero.find('.layui-layer-btn0').attr({
                            'lay-filter': 'formaddButton',
                            'lay-submit': ''
                        })
                        getmateriallist();//具體實(shí)現(xiàn)看上一篇復(fù)選下拉框
                    }
                    , yes: function () {//yes表示定義的第一個(gè)按鈕
                       //3.1 點(diǎn)擊form表單的 "提交"按鈕,會(huì)先進(jìn)行自定義的校驗(yàn)
                        form.on('submit(formaddButton)', function (data) {
                            data.field.materiallists = seltype.getValue()//具體實(shí)現(xiàn)看上一篇復(fù)選下拉框
                            $.ajax({
                                url: 'XXX',
                                data: data.field,//根據(jù)name值傳遞
                                type: 'POST',
                                success: function (res) {
                                    if (res.Status === "Success") {
                                        layer.close(addLay);//關(guān)閉當(dāng)前窗口
                                        document.getElementById("AddForm").style.display = "none"http://隱藏form表單
                                        //彈出消息框
                                        layer.msg(res.Message, {
                                            icon: 1,
                                            time: 500 //0.5秒關(guān)閉(如果不配置,默認(rèn)是3秒)
                                        }, function () {
                                            //當(dāng)前數(shù)據(jù)進(jìn)行刷新,新增內(nèi)容清空
                                        });
                                    }
                                    else {
                                        layer.msg(res.Message, { icon: 2 });
                                    }
                                }
                            })
                        })
                    }
                    , btn2: function () {
                       document.getElementById("AddForm").style.display = "none"http://隱藏
                        layer.close(addLay);
                    }
                });
            },
        })
 })

到此這篇關(guān)于MVC+Layui彈出表單模態(tài)框的文章就介紹到這了,更多相關(guān)MVC Layui模態(tài)框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論