在前端开发时经常会用到 form 表单来进行数据交互, layui 框架教程栏目为大家介绍了用 layui 前端框架弹出 form 表单以及提交的方法, 希望可以在大家学习 layui 时有一定的帮助.
第一步: 引用两个文件
第二步: 点击删除按钮弹出提示框
- /* 删除开始 */
- $(".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('取消')
- }
- });
- })
- /* 删除结束 */
第三步: 放一个添加按钮
- <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(" 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>
第四步: 点击添加按钮弹出 form 表单填写信息
- function func7() {
- // 页面层
- layer.open({
- type: 1,
- skin: 'layui-layer-rim', // 加上边框
- area: ['350px', '360px'], // 宽高
- content: "@Url.Action("AddUser","UserInfo")" // 调到新增页面
- });
- }
注意: content 的值就是要展示的表单信息或某个页面 url, 如果要对某个值非空验证就加 lay-verify="required" 属性. 如果是手机号那 lay-verify="phone" , 数字 lay-verify="number" 等.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/framework/layui/16719.html