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. RE：ゼロから始める AFO 生活

    新建这篇博客的时候发现自己在NOI之后只发过两三篇博客,而且都基本上没什么实质性内容. 果然是巨大混混人啊. 本文承接上篇(不过好像烂尾了),旨在记录一些有趣(?)的内容. 12.23 北大集训过去好 ...

  2. C# 交换排序

    用交换排序的方式实现对int类型的数组arrays从小到大排序 思路: 第一步:一个长度为n的数组,把最小的放第一行,第二小的数字放第二行,,,, 0(0为数组的第一项) 第一小的数字 1      ...

  3. sql 给相同属性的数据排序

    UPDATE b SET OrderIndex = a.OrderIndex FROM ( SELECT RTRIM(ROW_NUMBER() OVER ( PARTITION BY [ItemID] ...

  4. extern c 解释

    extern "C"修饰的变量和函数是按照c的方式编译的 如果想用c++方式编译c代码,需要特殊标识 方法 #if defined(__cplusplus) || defined( ...

  5. MRC下delegate 野指针问题

    最近项目开发中,临时被调去修复一个页面返回时crash的问题.出现这个问题的原因也很巧合,正好服务地址在同事电脑上,也正巧网络请求响应时间狂慢!一个请求发出去回来的时间是40秒左右,要是在线上,肯定会 ...

  6. Linux——CentOS7安装gcc编译器详解 查看内核版本

    [root@localhost ~]# uname -a Linux localhost.localdomain 3.10.0-957.el7.x86_64 #1 SMP Thu Nov 8 23:3 ...

  7. openpyxl 设置单元格颜色

    在处理excel数据格式的时候,需要对特定单元格进行颜色标注,方便相关人员查看 醒目 # -*- coding: utf-8 -*- from openpyxl import load_workboo ...

  8. Linux命令——diff、patch

    简介 diff以行为单位比较不同ASCII文件差异,可以输出一组指令,用于指导如何更改一个文件使其与第二个文件相同.diff在软件开发时多用于比较新旧版本代码,和patch连用可以将文件间区别做成补丁 ...

  9. CrawlSpider ---> 通用爬虫 项目流程

    通用爬虫 通用网络爬虫 从互联网中搜集网页,采集信息,这些网页信息用于为搜索引擎建立索引从而提供支持,它决定着整个引擎系统的内容是否丰富,信息是否即时,因此其性能的优劣直接影响着搜索引擎的效果. 不扯 ...

  10. Kinect for Windows SDK开发入门(七)：骨骼追踪基础 下

    http://www.cnblogs.com/yangecnu/archive/2012/04/09/KinectSDK_Skeleton_Tracking_Part2.html 上一篇文章用在UI界 ...