使用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 Validate 正则表达式实用验证代码大全
Aug 23 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
Javascript玩转继承(三)
May 08 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
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
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
限制复选框的最大可选数
2006/07/01 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
理解javascript对象继承
2016/04/17 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
浅谈python多线程和队列管理shell程序
2015/08/04 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
简单了解Django项目应用创建过程
2020/07/06 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
医学生临床实习自我评价
2014/03/07 职场文书
优秀学生评语大全
2014/04/25 职场文书
医学生求职自荐书
2014/06/12 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
关于保护环境的建议书
2019/06/24 职场文书