使用layui前端框架弹出form表单以及提交的示例


Posted in Javascript onOctober 25, 2019

第一步: 引用两个文件

使用layui前端框架弹出form表单以及提交的示例

第二步: 点击删除按钮弹出提示框

/*删除开始*/
$(".del").click(function () {
var id = $(this).attr("id");
layer.alert('您确定要删除操作吗?', {
skin: 'layui-layer-molv' //样式类名 自定义样式
, closeBtn: 1 // 是否显示关闭按钮
, anim: 1 //动画类型
, 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("出现错误");
return false;
}
}) //ajax结束
}
, btn2: function () {
layer.msg('取消')
}
});
})
/*删除结束*/

使用layui前端框架弹出form表单以及提交的示例

第三步: 放一个添加按钮

<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>

使用layui前端框架弹出form表单以及提交的示例

第四步: 点击添加按钮弹出form表单填写信息

function func7() {
//页面层
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['350px', '360px'], //宽高

content: "@Url.Action("AddUser", "UserInfo")" //调到新增页面
});
}

使用layui前端框架弹出form表单以及提交的示例

注意: content的值就是要展示的表单信息或某个页面url,如果要对某个值非空验证就加 lay-verify="required"属性。如果是手机号那 lay-verify="phone" ,数字lay-verify="number" 等。

需要数字分页帮助类的留言分享。

使用layui前端框架弹出form表单以及提交的示例

以上这篇使用layui前端框架弹出form表单以及提交的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
layui form表单提交后实现自动刷新
Oct 25 #Javascript
jquery实现购物车基本功能
Oct 25 #jQuery
vue中@change兼容问题详解
Oct 25 #Javascript
vue下的@change事件的实现
Oct 25 #Javascript
微信小程序(订阅消息)功能
Oct 25 #Javascript
layui 解决form表单点击无反应的问题
Oct 25 #Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 #Javascript
You might like
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
arguments对象
2006/11/20 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
python实现图片转字符小工具
2019/04/30 Python
flask实现验证码并验证功能
2019/12/05 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
zooplus意大利:在线宠物商店
2019/08/07 全球购物
劳动模范事迹材料
2014/01/19 职场文书
初中化学教学反思
2014/01/23 职场文书
毕业设计说明书
2014/05/07 职场文书
计算机实训报告范文
2014/11/05 职场文书
高三毕业评语
2014/12/31 职场文书
体育教师个人工作总结
2015/02/09 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
主婚人致辞精选
2015/07/28 职场文书
初中团委工作总结
2015/08/13 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
Java线程的6种状态与生命周期
2022/05/11 Java/Android
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL