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. 【vue】过滤器的使用

    一.在methods中使用过滤器------全局定义的过滤器 //main.js中 import Vue from 'vue' Vue.filter('testFilter1',function(va ...

  2. Go part 2 基础语法

    关键字.标识符 标识符: 是用户或系统定义的有意义单词组合,或单词与数字组合(具体意义有定义者决定) 标识符以字母下划线开头,大小写敏感,比如:boy,  Boy,  _boy,  _(匿名变量,用来 ...

  3. 漏洞预警 | ThinkPHP 5.x远程命令执行漏洞

    ThinkPHP采用面向对象的开发结构和MVC模式,融合了Struts的思想和TagLib(标签库).RoR的ORM映射和ActiveRecord模式,是一款兼容性高.部署简单的轻量级国产PHP开发框 ...

  4. Mediawiki 子页链接无效的问题

    添加下面的配置到 LocalSettings.php 中即可: # Enable subpages in the main namespace $wgNamespacesWithSubpages[NS ...

  5. 深度解析Droupout与Batch Normalization

    Droupout与Batch Normalization都是深度学习常用且基础的训练技巧了.本文将从理论和实践两个角度分布其特点和细节. Droupout 2012年,Hinton在其论文中提出Dro ...

  6. Why Go? – Key advantages you may have overlooked

    Why Go? – Key advantages you may have overlooked yourbasic.org/golang Go makes it easier (than Java ...

  7. 字符串的新方法——includes() padStart() padEnd()

    ES6为字符串提供了一个新方法,叫做String.prototype.includes('要包含的字符串'),如果包含,则返回字符串,否则返回false 使用ES6中的字符串新方法String.pro ...

  8. 堆排序Heap_Sort

    堆排序就是借助二叉堆进行排序,不了解二叉堆的可以先看这里.本文以升序排序为例,首先将待排序数组放置在最小堆中,此时堆顶一定是数组中最小的元素,然后删除堆顶元素,此时调整后的最小堆顶会是第二小的元素,从 ...

  9. 六、vue基础--过滤器定义

    七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...

  10. Java锁--非公平锁

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3496651.html 参考代码 下面给出Java1.7.0_40版本中,ReentrantLock和AQ ...