使用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 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
小程序实现投票进度条
Nov 20 Javascript
JS实现前端路由功能示例【原生路由】
May 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 array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python+opencv识别图片中的圆形
2020/03/25 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
采购员的工作职责
2013/12/26 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
买房协议书范本
2014/10/23 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
MySQL详细讲解变量variables的用法
2022/06/21 MySQL