使用layui前端框架彈出form表單以及提交的示例
第一步: 引用兩個(gè)文件
第二步: 點(diǎn)擊刪除按鈕彈出提示框
/*刪除開(kāi)始*/ $(".del").click(function () { var id = $(this).attr("id"); layer.alert('您確定要?jiǎng)h除操作嗎?', { skin: 'layui-layer-molv' //樣式類名 自定義樣式 , closeBtn: 1 // 是否顯示關(guān)閉按鈕 , anim: 1 //動(dòng)畫類型 , btn: ['確定', '取消'] //按鈕 , icon: 6 // icon , yes: function () { //layer.msg('確定') $.ajax({ type: "POST", url: "@Url.Action("Delete", "UserInfo")", data: { id: id }, success: function (Data) { if (Data == "ok") { location.reload(); } else { layer.msg('刪除失敗') } }, error: function () { alert("出現(xiàn)錯(cuò)誤"); return false; } }) //ajax結(jié)束 } , btn2: function () { layer.msg('取消') } }); }) /*刪除結(jié)束*/
第三步: 放一個(gè)添加按鈕
<div class="layui-form"> <a onclick="func7();" class="layui-btn layui-inline fl w130">添加</a> <table class="layui-table" style="text-align:center"> <tr> <th>ID</th> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>住址</th> <th>電話</th> <th colspan="3">操作</th> </tr> @foreach (var item in ViewData["UserList"] as List<UserInfo>) { <tr> <td>@item.uID</td> <td>@item.uName</td> <td>@item.uSex</td> <td>@item.uAge</td> <td>@item.uAdress</td> <td>@item.uPhone</td> <td><a id="@item.uID" class="del" style="color:blue">刪除</a></td> <td><a href="@Url.Action(" rel="external nofollow" Edit", "UserInfo")" ?id="@item.uID" style="color:blue">編輯</a></td> <td><a id="@item.uID" class="xq" style="color:blue">詳情</a></td> </tr> } </table> </div>
第四步: 點(diǎn)擊添加按鈕彈出form表單填寫信息
function func7() { //頁(yè)面層 layer.open({ type: 1, skin: 'layui-layer-rim', //加上邊框 area: ['350px', '360px'], //寬高 content: "@Url.Action("AddUser", "UserInfo")" //調(diào)到新增頁(yè)面 }); }
注意: content的值就是要展示的表單信息或某個(gè)頁(yè)面url,如果要對(duì)某個(gè)值非空驗(yàn)證就加 lay-verify="required"屬性。如果是手機(jī)號(hào)那 lay-verify="phone" ,數(shù)字lay-verify="number" 等。
需要數(shù)字分頁(yè)幫助類的留言分享。
以上這篇使用layui前端框架彈出form表單以及提交的示例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- layui 解決富文本框form表單提交為空的問(wèn)題
- 淺談layui 綁定form submit提交表單的注意事項(xiàng)
- layui實(shí)現(xiàn)form表單同時(shí)提交數(shù)據(jù)和文件的代碼
- layui form表單提交后實(shí)現(xiàn)自動(dòng)刷新
- layui 解決form表單點(diǎn)擊無(wú)反應(yīng)的問(wèn)題
- layui form.render(''select'', ''test2'') 更新渲染的方法
- layui使用form表單實(shí)現(xiàn)post請(qǐng)求頁(yè)面跳轉(zhuǎn)的方法
- layui的form.on的使用示例詳解
相關(guān)文章
Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證功能
這篇文章主要介紹了Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證功能,需要的朋友可以參考下2017-05-05Bootstrap入門教程一Hello Bootstrap初識(shí)
Bootstrap,來(lái)自 Twitter,是目前很受歡迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt開(kāi)發(fā)的。這篇文章主要介紹了基于Bootstrap3實(shí)現(xiàn)漂亮簡(jiǎn)潔的CSS3價(jià)格表(精美代碼版),需要的朋友可以參考下2017-03-03javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法分析
這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法,簡(jiǎn)單講述了串的概念、功能并結(jié)合實(shí)例形式分析了基于javascript實(shí)現(xiàn)串的遍歷、比較、查找等相關(guān)操作技巧,需要的朋友可以參考下2017-04-04淺談Javascript中的函數(shù)、this以及原型
下面小編就為大家?guī)?lái)一篇淺談Javascript中的函數(shù)、this以及原型。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10JavaScript使用原型和原型鏈實(shí)現(xiàn)對(duì)象繼承的方法詳解
這篇文章主要介紹了JavaScript使用原型和原型鏈實(shí)現(xiàn)對(duì)象繼承的方法,簡(jiǎn)單講述了javascript原型與原型鏈的原理,并結(jié)合實(shí)例形式詳細(xì)分析了javascript中對(duì)象繼承的常見(jiàn)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04WordPress中鼠標(biāo)懸停顯示和隱藏評(píng)論及引用按鈕的實(shí)現(xiàn)
這篇文章主要介紹了WordPress中鼠標(biāo)懸停顯示和隱藏評(píng)論及引用按鈕的實(shí)現(xiàn),順帶顯示和隱藏評(píng)論者信息的實(shí)現(xiàn)方法,非常實(shí)用,需要的朋友可以參考下2016-01-01JavaScript控制listbox列表框的項(xiàng)目上下移動(dòng)的方法
這篇文章主要介紹了JavaScript控制listbox列表框的項(xiàng)目上下移動(dòng)的方法,實(shí)例分析了javascript操作listbox列表框的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03Bootstrap的fileinput插件實(shí)現(xiàn)多文件上傳的方法
這篇文章主要介紹了Bootstrap的fileinput插件實(shí)現(xiàn)多文件上傳的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09