使用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 相关文章推荐
网上抓的一个特效
May 11 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
Vue项目中跨域问题解决方案
Jun 05 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
详解微信小程序支付流程与梳理
Jul 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
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php正则表达式学习笔记
2015/11/13 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
中层干部竞争上岗演讲稿
2014/01/13 职场文书
研讨会主持词
2014/04/02 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
离婚案件被告代理词
2015/05/23 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS