概述

单页面处理新增、修改、查看详情 共用同一个弹出的页面。在线demo数据表格2

使用

提供2种处理方式(主要区别区弹出窗口的html配置),根据实际情况选择使用那种方式。

  1. 新增、修改功能共用一个按钮,使用同一个servlet接口提交数据,通过路由判断新增或修改;
  2. 定义各自的新增或修改按钮,和普通模式一样,各自提交自己的servlet接口。

需要在按钮中增加topMode标签,描述弹出的模型(add:新增窗口,edit:编辑窗口,readonly:只读窗口)。

  • 新增窗口demo
<button class="layui-btn" function="top" topUrl="one.html" topMode="add" topWidth="800px" topHeight="600px" topTitle="新增demo">
<i class="layui-icon"></i>新增
</button>
  • 编辑窗口demo
<a class="layui-btn layui-btn-xs" lay-event="top" topUrl="one.html" topMode="edit" topWidth="800px" topHeight="600px" topTitle="编辑demo" inputs="id:">编辑</a>
  • 查看详情demo(只读窗口)
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="top" topUrl="one.html" topMode="readonly" topWidth="800px" topHeight="600px" topTitle="查看demo" inputs="id:">查看</a>

方式一

新增、修改功能共用一个按钮,使用同一个servlet接口提交数据,通过路由判断新增或修改;

此方式提交参数中会自带一个系统参数_mode,servlet接口通过获取此参数判断新增或修改。
add:新增
edit:修改

<button class="layui-btn" lay-submit="" lay-filter="save" url="/fsbus/1006">保存</button>

方式二

定义各自的新增或修改按钮,和普通模式一样,各自提交自己的servlet接口。

特别说明:
新增和编辑按钮必须设置特定的class样式。通过样式判断隐藏和显示。
新增按钮需要配置fsAdd
编辑按钮需要配置fsEdit

<button class="layui-btn fsAdd" lay-submit="" lay-filter="save" url="/fsbus/1001">新增</button>
<button class="layui-btn fsEdit" lay-submit="" lay-filter="edit" url="/fsbus/1004">编辑</button>

本文首发于我的博客:ITCTO技术博客

fsLayuiPlugin单页面操作的更多相关文章

  1. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

  2. 开发日志系列:一个表单页面的呈现与提交(一)——JSON的操作

    JSON操作 引子 最近在做一个表单页面,大概是这个样子的 这里打算用一个JSON存储所有的信息,我们可以理解为,所有东西都存在一个字符串里面.方便,快捷,易读,数据库操作也方便了.甚至,可以将很多不 ...

  3. vue-router(配置子路由--单页面多路由区域操作)

    1.配置子路由: import Post from "@components/Post" export default new Router({ routers:[ { path: ...

  4. 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  6. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  7. 浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  8. 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  9. angular(3)服务 --注入---自定义模块--单页面应用

    ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...

随机推荐

  1. MSSQL 获取数据库、表、字段信息语句

    --获取所有数据库名称 SELECT Name FROM Master..SysDatabases ORDER BY Name --获取库里所有表名 SELECT * FROM SysObjects ...

  2. js 数组扁平

    // 数组扁平和去重 var arr = [[1,2,2],[3,4,5,5],[6,7,7,9,[11,12,[12,13,[14]]]],10]; function hello (arr) { l ...

  3. [AT2062] ~K Perm Counting

    AT2602 , Luogu 求对于 \(n\) 个数的排列 , 有多少种方案满足对于所有的 \(i\) , \(|P_i - i| != K\) , 答案对 \(924844033\) 取模 . \ ...

  4. 关于SpringMVC中的转发与重定向的说明

    写的非常详细,参看该地址:https://www.zifangsky.cn/661.html 总结: 1.请求转发:url地址不变,可带参数,如?username=forward 2.请求重定向:ur ...

  5. java微信token校验

    1.微信验证接口 package com.park.utils.wechatUtil; import org.springframework.web.bind.annotation.RequestMa ...

  6. shell实践--简单抓取网页内容

    #!/bin/bash base_path="https://testerhome.com/"user_path="ycwdaaaa/topics?page=" ...

  7. 三分钟搞定Python中的装饰器

    python的装饰器是python的特色高级功能之一,言简意赅得说,其作用是在不改变其原有函数和类的定义的基础上,给他们增添新的功能. 装饰器存在的意义是什么呢?我们知道,在python中函数可以调用 ...

  8. Python---通配符的使用

    苹果单价 9.00 元/斤,购买了 5.00 斤,需要支付 45.00 元 在 Python 中可以使用 print 函数将信息输出到控制台 如果希望输出文字信息的同时,一起输出 数据,就需要使用到  ...

  9. LASSO回归与L1正则化 西瓜书

    LASSO回归与L1正则化 西瓜书 2018年04月23日 19:29:57 BIT_666 阅读数 2968更多 分类专栏: 机器学习 机器学习数学原理 西瓜书   版权声明:本文为博主原创文章,遵 ...

  10. Nginx安装启动过程报错libpcre.so.1 cannot open shared object file: No such file or directory

    具体报错信息如下: nginx: error while loading shared libraries: libpcre.so.1: cannot open shared object file: ...