使用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 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
js实现微信分享代码
Oct 11 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
JSONP 的原理、理解 与 实例分析
May 16 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python实现根据文件格式分类
2019/10/31 Python
Python接口测试文件上传实例解析
2020/05/22 Python
如何用python免费看美剧
2020/08/11 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
高中生自我评语大全
2014/01/19 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
教育读书笔记
2015/07/02 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
python神经网络ResNet50模型
2022/05/06 Python