fsLayuiPlugin单页面操作
2024-09-05 06:36:58
概述
单页面
处理新增、修改、查看详情
共用同一个弹出的页面。在线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"></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技术博客
最新文章
- 微信小程序内训笔记
- LNMP源码编译安装(centos7+nginx1.9+mysql5.6+php7)
- String类的compareTo()方法的源码解析
- java任务调度quartz框架的小例子
- IIC总线解析
- 自定义有监听器的ScrollView
- C#对多个集合和数组的操作(合并,去重,判断)
- 连通图模板(HDU 1269)
- Pattern Lab - 构建先进的原子设计系统
- 详解iOS多线程 (转载)
- RMAN catalog备份恢复方案
- easyui常用控件样式收藏
- Android开发常用工具汇总
- zongjie
- 几种经典排序算法的JS实现
- 1.4.2. 实现 Core Data Helper 类(Core Data 应用程序实践指南)
- 利用神经网络算法的C#手写数字识别
- 题解 P2763 【试题库问题】
- java新手入门
- python笔记21-内置函数