fsLayuiPlugin单页面操作

2018-01-13 admin

概述

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

使用

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

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

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

<button class="layui-btn" function="top" topUrl="one.html" topMode="add" topWidth="800px" topHeight="600px" topTitle="新增demo">
  <i class="layui-icon">&#xe654;</i>新增
</button>
<a class="layui-btn layui-btn-xs" lay-event="top" topUrl="one.html" topMode="edit" topWidth="800px" topHeight="600px" topTitle="编辑demo" inputs="id:">编辑</a>
<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技术博客

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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-5822.html

文章标题:fsLayuiPlugin单页面操作

相关文章
JS实现的通用表单验证插件完整实例
本文实例讲述了JS实现的通用表单验证插件。分享给大家供大家参考。具体如下: 这里演示一个通用的JS表单验证插件代码。使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误...
2017-03-29
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta cha...
2017-03-21
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
原生js实现类似fullpage的单页/全屏滚动
前言 单页/全屏滚动页面越来越常见了,它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件,本文实现的效果类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库; css代码: html,b...
2017-02-22
JavaScript实现级联菜单的方法
本文实例讲述了JavaScript实现级联菜单的方法。分享给大家供大家参考。具体实现方法如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;test&lt;&#x2F;title&gt; &lt;scr...
2017-03-27
js实现带圆角的两级导航菜单效果代码
本文实例讲述了js实现带圆角的两级导航菜单效果代码。分享给大家供大家参考。具体如下: 这是一款使用JS做的圆角菜单,支持两级菜单显示,本人比较喜欢的风格,修改使用方便,新手也能上手快。使用有几张圆角图片来修饰了菜单,喜欢的朋友可以下载代码留...
2017-03-29
纯JavaScript实现html转pdf的简单实例(推荐)
项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格、svg图片和样式。 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf。 咋不上天呢…… 查了一下,能够实现html转pdf的方法还...
2017-03-16
JS定义网页表单提交(submit)的方法
本文实例讲述了JS定义网页表单提交(submit)的方法。分享给大家供大家参考。具体如下: 这段代码表示网页表单提交时不是提交到指定的页面,而是执行一个特定的函数 &lt;script&gt; function saveInfo() { ...
2017-03-21
基于javascript实现单选及多选的向右和向左移动实例
本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例。分享给大家供大家参考。具体实现方法如下: 方法 一: &lt;body&gt; &lt;h1&gt;实现单选及多选的向右和向左移动&lt;&#x2F;h1&gt; &...
2017-03-27
回到顶部