使用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中Ajax 缓存带来的影响的解决方法
May 19 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 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
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
基于node实现websocket协议
2016/04/25 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
vue实现分页加载效果
2019/12/24 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
python删除列表中重复记录的方法
2015/04/28 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python区块及区块链的开发详解
2019/07/03 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
2015年元旦活动总结
2014/05/09 职场文书
环保倡议书300字
2014/05/15 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
见习报告格式要求
2014/11/04 职场文书
领导参观欢迎词
2015/01/26 职场文书
培训通知
2015/04/17 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
合作意向书怎么写
2019/06/24 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python