fsLayuiPlugin单页面操作

最新推荐文章于 2025-09-10 22:21:01 发布

weixin_33694620

最新推荐文章于 2025-09-10 22:21:01 发布

阅读量119

点赞数

CC 4.0 BY-SA版权

文章标签： java

原文链接：https://segmentfault.com/a/1190000012825708

本文介绍了一种在单页面应用中处理新增、修改及查看详情等操作的技术方案。该方案通过共用同一弹出页面和servlet接口来简化前端交互流程，并提供了两种实现方式：一种是通过一个按钮和接口区分不同操作；另一种则是分别定义按钮和接口。

概述

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

使用

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

新增、修改功能共用一个按钮，使用同一个servlet接口提交数据，通过路由判断新增或修改；
定义各自的新增或修改按钮，和普通模式一样，各自提交自己的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">&#xe654;</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技术博客