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. Python练习_数据类型_day5

    1. 1.作业 1,有如下变量(tu是个元祖),请实现要求的功能 tu = ("alex", [11, 22, {"k1": 'v1', "k2&qu ...

  2. TypeScript入门八：TypeScript的命名空间

    初识命名空间(namespace指令) 命名空间与文件拆分 多重命名空间与三斜杠指令引入依赖文件 一.初识命名空间(namespace指令) TypeScript的命名空间可以说就是ES6的模块化,其 ...

  3. JS中this和call

    首先来了解一下JS中this的原理: 要访问自己的属性就必须使用 this.属性名 1.this总是指向它的直接调用者: var a={ user:'Artimis', fn:function(){ ...

  4. Array + two points leetcode.18 - 4Sum

    题面 Given an array nums of n integers and an integer target, are there elements a, b, c, and d in num ...

  5. SpringDataJPA第三天讲义

    第1章     Specifications动态查询 有时我们在查询某个实体的时候,给定的条件是不固定的,这时就需要动态构建相应的查询语句,在Spring Data JPA中可以通过JpaSpecif ...

  6. 使用JavaScript实现录入信息生成名片

    首先是布局: 一个大的盒子模型套两个小的盒子模型:左边是录入信息生成界面,右边是名片显示界面. 框架: 这里新建一个css文件,用于外部链接使用装饰 /*最外层div,主框架*/ .frame{ wi ...

  7. 爬虫部署 --- scrapyd部署爬虫 + Gerapy 管理界面 scrapyd+gerapy部署流程

    ---------scrapyd部署爬虫---------------1.编写爬虫2.部署环境pip install scrapyd pip install scrapyd-client 启动scra ...

  8. 机器学习 三剑客 之 pandas + numpy

    机器学习 什么是机器学习? 机器学习是从数据中自动分析获得规律(模型),并利用规律对未知数据进行预测 机器学习存在的目的和价值领域? 领域: 医疗.航空.教育.物流.电商 等... 目的: 让机器学习 ...

  9. How to resolve the 403 error when send POST request from Postman

    Root cause: the site refused the connection from the http request origin, by default it is setted as ...

  10. Python计算AUC

    AUC(Area under curve)是机器学习常用的二分类评测手段,直接含义是ROC曲线下的面积.另一种解释是:随机抽出一对样本(一个正样本,一个负样本),然后用训练得到的分类器来对这两个样本进 ...