fsLayuiPlugin数据表格弹出form表单说明
时间:2019-12-19
本文章向大家介绍fsLayuiPlugin数据表格弹出form表单说明,主要包括fsLayuiPlugin数据表格弹出form表单说明使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作。
GitHub下载 码云下载
测试环境地址:http://fslayui.itcto.cn
css和js引用
公共css和js必须全部引用
<!-- layui css -->
<link rel="stylesheet" type="text/css" href="/plugins/layui/css/layui.css" media="all"/>
<!-- 引入自定义css -->
<link rel="stylesheet" type="text/css" href="/css/fs.css" media="all"/>
<!-- layui js -->
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<!-- 引入jquery -->
<script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
<!-- 引入数据字典 -->
<script type="text/javascript" src="/plugins/frame/js/fsDict.js?v=1.4.1"></script>
<!-- 引入 js入口文件 -->
<script type="text/javascript" src="/plugins/frame/js/fs.js?v=1.4.1"></script>
<!-- 引入通用数据表格框架js -->
<script type="text/javascript" src="/plugins/frame/js/frame.js?v=1.4.1"></script>
form表单
新增操作
新增只需要关注按钮配置
form表单基于layui.form 监听提交事件,不需要配置function,直接配置提交地址 url 即可
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" name="name" required="" lay-verType="tips" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类型</label>
<div class="layui-input-block">
<input type="checkbox" name="type" title="写作" value="write">
<input type="checkbox" name="type" title="阅读" value="read">
<input type="checkbox" name="type" title="发呆" value="dai">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="男" title="男" checked="checked">
<input type="radio" name="sex" value="女" title="女">
</div>
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<input type="checkbox" name="state" lay-skin="switch" lay-text="开启|关闭" value="1" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<select name="city" lay-verify="required" lay-verType="tips" class="fsSelect" dict="city" addNull="1">
</select>
</div>
<label class="layui-form-label">创建时间</label>
<div class="layui-input-inline">
<input type="text" name="createdTime" autocomplete="off" class="layui-input fsDate" dateType="datetime" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">省份</label>
<div class="layui-input-inline" style="width: 100px;">
<select id="area2222222" name="area1" lay-filter="xxxxxx1" class="fsSelect" dict="area1" addNull="1" childrenSelectId="xxxxxx2">
</select>
</div>
<label class="layui-form-label">城市</label>
<div class="layui-input-inline" style="width: 100px;">
<select id="xxxxxx2" name="area2" lay-filter="xxxxxx2" class="fsSelect" isLoad="0" dict="area2" addNull="1" childrenSelectId="xxxxxx3">
</select>
</div>
<label class="layui-form-label">区</label>
<div class="layui-input-inline" style="width: 100px;">
<select id="xxxxxx3" name="area3" class="fsSelect" isLoad="0" dict="area3" addNull="1">
</select>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">附件</label>
<div class="layui-input-inline">
<input type="text" id="filePath" name="filePath" autocomplete="off" disabled="disabled" class="layui-input"/>
</div>
<div class="layui-input-inline">
<button type="button" class="layui-btn" function="upload" fileElem="#filePath" fileAccept="file" fileExts="" fileSize="1024" inputs="type:test">上传图片</button>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<textarea id="description" name="description" placeholder="请输入描述" class="fsLayedit" height="80"></textarea>
</div>
</div>
<hr/>
<div class="layui-form-item" style="text-align: center;">
<button class="layui-btn" lay-submit="" lay-filter="save" url="/fsbus/1001">新增</button>
<button type="button" class="layui-btn layui-btn-primary" function="close">关闭</button>
</div>
</form>
编辑操作
编辑需要先查询出数据展示,关注form配置和按钮配置
form表单需要配置isLoad 和 loadUrl
<form class="layui-form" id="edit_form" isLoad="1" loadUrl="/fsbus/1003">
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" name="name" required="" lay-verType="tips" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类型</label>
<div class="layui-input-block">
<input type="checkbox" name="type" title="写作" value="write">
<input type="checkbox" name="type" title="阅读" value="read">
<input type="checkbox" name="type" title="发呆" value="dai">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="男" title="男" checked="checked">
<input type="radio" name="sex" value="女" title="女">
</div>
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<input type="checkbox" name="state" lay-skin="switch" lay-text="开启|关闭" value="1" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<select name="city" lay-verify="required" lay-verType="tips" class="fsSelect" dict="city" addNull="1">
</select>
</div>
<label class="layui-form-label">创建时间</label>
<div class="layui-input-inline">
<input type="text" name="createdTime" autocomplete="off" class="layui-input fsDate" dateType="datetime" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">省份</label>
<div class="layui-input-inline" style="width: 100px;">
<select id="area2222222" name="area1" lay-filter="xxxxxx1" class="fsSelect" dict="area1" addNull="1" childrenSelectId="xxxxxx2">
</select>
</div>
<label class="layui-form-label">城市</label>
<div class="layui-input-inline" style="width: 100px;">
<select id="xxxxxx2" name="area2" lay-filter="xxxxxx2" class="fsSelect" isLoad="0" dict="area2" addNull="1" childrenSelectId="xxxxxx3">
</select>
</div>
<label class="layui-form-label">区</label>
<div class="layui-input-inline" style="width: 100px;">
<select id="xxxxxx3" name="area3" class="fsSelect" isLoad="0" dict="area3" addNull="1">
</select>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">附件</label>
<div class="layui-input-inline">
<input type="text" id="filePath" name="filePath" autocomplete="off" disabled="disabled" class="layui-input"/>
</div>
<div class="layui-input-inline">
<button type="button" class="layui-btn" function="upload" fileElem="#filePath" fileAccept="file" fileExts="" fileSize="1024" inputs="type:test">上传图片</button>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<textarea id="description" name="description" placeholder="请输入描述" class="fsLayedit" height="80"></textarea>
</div>
</div>
<hr/>
<div class="layui-form-item" style="text-align: center;">
<button class="layui-btn" lay-submit="" lay-filter="edit" url="/fsbus/1004"><i class="layui-icon"></i>编辑</button>
<button type="button" class="layui-btn layui-btn-primary" function="close">关闭</button>
</div>
</form>
form表单属性说明
属性 | 必输 | 默认值 | 名称 | 描述 |
---|---|---|---|---|
isLoad | 否 | 是否加载 | 1:是,0:否 | |
loadUrl | 否 | 加载数据地址 |
日期控件说明
如果要使用日期控件,必须按照以下配置
- class样式中增加 fsDate
- 在input定义其他的属性
属性 | 必输 | 默认值 | 名称 | 描述 |
---|---|---|---|---|
dateType | 否 | 控件选择类型 | ||
dateRange | 否 | 范围选择 | ||
dateFormat | 否 | 自定义格式 | ||
dateMin | 否 | 最小日期 | ||
dateMax | 否 | 最大日期 |
配置属性值请参考layui官方日期配置http://www.layui.com/doc/modules/laydate.html#options
本文首发于我的博客:ITCTO技术博客
原文地址:https://www.cnblogs.com/homehtml/p/12069896.html
- Url参数中出现+、空格、=、%、&、#等字符的解决办法
- 解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)
- Go语言学习之cgo(golang与C语言相互调用)
- golang之旅--数据类型之字符串
- Android保存图片到系统图库
- 基于Vue.js的大型报告页项目实现过程及问题总结(二)
- 使用Hexo搭建专属Blog
- Android项目中文字乱码问题
- golang中发送http请求的几种常见情况
- 注册中心 Eureka 源码解析 —— Eureka-Server 启动(一)之 ServerConfig
- lua表排序
- Go语言-base64使用
- Gitcafe绑定自定义域名
- 【死磕Java并发】—- J.U.C之并发工具类:CyclicBarrier
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- TinyMCE 优化百度地图 bdmap 插件
- 更新!万字长文带你拿下九大排序的原理、Java 实现以及算法分析
- mysql 同一张表查询 left join
- uni-app运行到浏览器跨域H5页面的跨域问题解决方案
- 手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇)
- 树状数据库表查询2次以上(自连接、内连接、别名)方法
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)
- 【STM32F407】第11章 RL-TCPnet V7.X之TCP服务器
- 如何解决nodejs中cpu密集型的任务
- 博客园主题1【备份】
- 手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)
- POSTGRESQL 到底怎么访问同instance 的库--
- 简单工厂模式
- 这 9 种方法有效帮你提高国内访问 Github 的速度
- python实现sm2和sm4国密(国家商用密码)算法