使用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 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
javascript二维数组转置实例
Jan 22 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 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的无限分类实现想法~
2007/01/02 PHP
php 魔术方法使用说明
2009/10/20 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php常用数学函数汇总
2014/11/21 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
js计数器代码
2006/11/04 Javascript
javascript事件问题
2009/09/05 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
Python笔记(叁)继续学习
2012/10/24 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Python global全局变量函数详解
2018/09/18 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
自主招生推荐信范文
2014/05/10 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
Redis Lua脚本实现ip限流示例
2022/07/15 Redis