使用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防止页面被iframe调用的方法
Oct 30 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
vue.js学习之递归组件
Dec 13 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
详解vue引入子组件方法
Feb 12 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
深入分析php之面向对象
2013/05/15 PHP
PHP查询快递信息的方法
2015/03/07 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
js自带函数备忘 数组
2006/12/29 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
Python 占位符的使用方法详解
2019/07/10 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
QML使用Python的函数过程解析
2019/09/26 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
工地门卫岗位职责
2013/12/30 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
大课间活动实施方案
2014/03/06 职场文书
吨的认识教学反思
2014/04/27 职场文书
安全生产大检查方案
2014/05/07 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
node快速搭建后台的实现步骤
2022/02/18 NodeJs