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 否 加载数据地址

日期控件说明

如果要使用日期控件，必须按照以下配置

  1. class样式中增加 fsDate
  2. 在input定义其他的属性
属性 必输 默认值 名称 描述
dateType 否 控件选择类型
dateRange 否 范围选择
dateFormat 否 自定义格式
dateMin 否 最小日期
dateMax 否 最大日期

配置属性值请参考layui官方日期配置 http://www.layui.com/doc/modules/laydate.html#options

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

fsLayuiPlugin数据表格弹出form表单说明的更多相关文章

  1. 用layui前端框架弹出form表单以及提交

    第一步:引用两个文件 第二步:点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr(&q ...

  2. ant-design-pro弹出框表单设置默认值

    项目需求需要使用ant-design-pro的弹出框表单并在表单出现时设置默认值 然而按照官方的示例给 <Input> 标签设置 defaultValue 时发现并没有效果.如下所示: & ...

  3. HTML之表格标签和form表单

    表格标签: table 一般用于信息展示 tr行 td文本单元格 th标题单元格(文本加粗) table属性: cellspacing:单元格间距,一般设置为0 cellpadding:文字到边框的距 ...

  4. Ajax提交数据后，清空form表单

    按钮不同,页面相同,还需要显示的数据不同,这里会由于页面的缓存问题,导致,每次点开这个页面显示的数据相同. 这不是我们想要的.这就需要清楚表单数据了. 如下: $('#myform')[0].rese ...

  5. jQuery插件：Ajax将Json数据自动绑定到Form表单

    jQuery注册方法的两种常用方式: //jQuery静态方法注册 //调用方法$.a1() $.extend({ a1: function () { console.log("a1&quo ...

  6. 及时从数据库中取得数据填放进Form表单的多选框中

    #写上以下代码就不用担心数据库添加了数据而不能及时获取了 def __init__(self, *args, **kwargs): #每次创建Form1对象时执行init方法 super(Form1, ...

  7. 【HTML】--- 列表、表格、form表单标签

    Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...

  8. 浅谈 form 表单提交

    原创文章,转载请注明出处:http://www.cnblogs.com/weix-l/p/7675230.html 若有错误,请评论指出,谢谢! Form 对象代表一个 HTML 表单.在 HTML ...

  9. [php基础]PHP Form表单验证:PHP form validator使用说明

    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

随机推荐

  1. 关于微信小程序发布新版本后的提示用户更新的方法详解

    当小程序发布新的版本后 ,用户如果之前访问过该小程序,通过已打开的小程序进入(未手动删除),则会检测新版本,提醒用户更新新的版本 话不多说,上代码 App({ onLaunch: function ( ...

  2. iOS中的分类（category）和类扩展（extension）

    今天在研究swift的时候看到了分类和扩展.这是两个十分重要有用的功能,但是之前用的不多,没有深入了解过,在今天就从头理一遍. 一.分类(Category): 概念: 分类(Category)是OC中 ...

  3. 13.MyBatis注解式开发

    mybatis 的注解,主要是用于替换映射文件.而映射文件中无非存放着增.删.改.查 的 SQL 映射标签.所以,mybatis 注解,就是要替换映射文件中的 SQL 标签. mybatis 官方文档 ...

  4. NLP学习（2）----文本分类模型

    实战:https://github.com/jiangxinyang227/NLP-Project 一.简介: 1.传统的文本分类方法:[人工特征工程+浅层分类模型] (1)文本预处理: ①(中文) ...

  5. Navicate 12 for mysql

    先下载安装好 navicat工具,在下载下面的工具 链接:https://pan.baidu.com/s/1Y-IOrbnhvhlS6Y3lpABLQg密码: nktc 选其中的一个 请根据自己安装N ...

  6. vue 后台获取文件流导出excel文件

    let params = { compStartTm: Date.parse(this.searchForm.compStartTm) / 1000, compEndTm: Date.parse(th ...

  7. Robot Framework--安装环境

    1.安装python3.7 2.安装pip(python包自带) 3.安装Robot Framework 4.安装RIDE 5.安装wxPython 6.安装selenium2library 7.找到 ...

  8. IP分组

    IP 分组为了更准确地讨论 I n t e r n e t协议处理,我们必须定义一些名词.图 显示了在不同的I n t e r n e t层之间传递数据时用来描述数据的名词.我们把传输协议交给 I P ...

  9. 牛客算法：DNA序列

    import java.util.*; public class Main{ public static void main(String[] args){ try(Scanner in = new ...

  10. Springboot项目启动报org.springframework.beans.factory.UnsatisfiedDependencyException

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'hom ...