使用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之尺寸调整组件的深入解析
Jun 19 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
python实现人机猜拳小游戏
2020/02/03 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
幼儿园招生广告
2014/03/19 职场文书
房屋租赁协议书
2014/04/10 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
python执行js代码的方法
2021/05/13 Python
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
golang实现浏览器导出excel文件功能
2022/03/25 Golang
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技