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)文章
JS限制上傳圖片大小不使用控件在本地實(shí)現(xiàn)
文件上傳之前的檢測(cè),通常是通過(guò)文件名來(lái)判斷文件類(lèi)型是否合法,但是要想檢測(cè)文件的大小很難辦到,除非在本地或者使用控件。使用JS可以輕松解決詞問(wèn)題,本文詳細(xì)介紹,需要了解的朋友可以參考下2012-12-12深入解析JavaScript編程中的this關(guān)鍵字使用
這篇文章主要介紹了深入解析JavaScript編程中的this關(guān)鍵字使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-11-11淺析js中2個(gè)等號(hào)與3個(gè)等號(hào)的區(qū)別
這篇文章介紹了js中2個(gè)等號(hào)與3個(gè)等號(hào)的區(qū)別,有需要的朋友可以參考一下2013-08-08JavaScript Break 和 Continue區(qū)別教程
JavaScript Break 和 Continue區(qū)別教程...2007-04-04JavaScript入門(mén)之語(yǔ)言基礎(chǔ)
本文通過(guò)全面列舉基礎(chǔ)的JavaScript概念這一方式來(lái)闡述該語(yǔ)言的基本原理,以此來(lái)為初學(xué)者提供一個(gè)對(duì)語(yǔ)言的基本了解,隨處可見(jiàn)的代碼例子則是用來(lái)說(shuō)明所有的這些概念是如何在語(yǔ)言中體現(xiàn)出來(lái)的2011-10-10js阻止默認(rèn)事件與js阻止事件冒泡示例分享 js阻止冒泡事件
嵌套的div元素,如果父級(jí)和子元素都綁定了一些事件,那么在點(diǎn)擊最內(nèi)層子元素時(shí)可能會(huì)觸發(fā)父級(jí)元素的事件,下面介紹一下js阻止默認(rèn)事件與js阻止事件冒泡示例,大家參考使用吧2014-01-01