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技术博客

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

用layui前端框架弹出form表单以及提交
第一步:引用两个文件第二步:点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr(&q ...
ant-design-pro弹出框表单设置默认值
项目需求需要使用ant-design-pro的弹出框表单并在表单出现时设置默认值然而按照官方的示例给 <Input> 标签设置 defaultValue 时发现并没有效果.如下所示: & ...
HTML之表格标签和form表单
表格标签: table 一般用于信息展示 tr行 td文本单元格 th标题单元格(文本加粗) table属性: cellspacing:单元格间距,一般设置为0 cellpadding:文字到边框的距 ...
Ajax提交数据后，清空form表单
按钮不同,页面相同,还需要显示的数据不同,这里会由于页面的缓存问题,导致,每次点开这个页面显示的数据相同. 这不是我们想要的.这就需要清楚表单数据了. 如下: $('#myform')[0].rese ...
jQuery插件：Ajax将Json数据自动绑定到Form表单
jQuery注册方法的两种常用方式: //jQuery静态方法注册 //调用方法$.a1() $.extend({ a1: function () { console.log("a1&quo ...
及时从数据库中取得数据填放进Form表单的多选框中
#写上以下代码就不用担心数据库添加了数据而不能及时获取了 def __init__(self, *args, **kwargs): #每次创建Form1对象时执行init方法 super(Form1, ...
【HTML】--- 列表、表格、form表单标签
Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签概念把内容以列表的形 ...
浅谈 form 表单提交
原创文章,转载请注明出处:http://www.cnblogs.com/weix-l/p/7675230.html 若有错误,请评论指出,谢谢! Form 对象代表一个 HTML 表单.在 HTML ...
[php基础]PHP Form表单验证:PHP form validator使用说明
在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

随机推荐

c# 动态获取http通过post传来的json数据
//获取http通过post传来的json数据 using Newtonsoft.Json; public HttpResponseMessage Query() { var request=Syst ...
Flutter——CircleAvatar组件（圆形头像组件）
import 'package:flutter/material.dart'; import 'res/listData.dart'; void main() { runApp(MaterialApp ...
DRDA
在谈到分布式DB2数据时,有必要谈谈DRDA. DRDA代表分布式关系数据库体系结构. 它是由IBM开发的一种体系结构,它使关系数据能够在多个平台之间分布. 平台和平台都可以相互通信. 例如,一个DB ...
No package libmcrypt available.
Centos安装PHP时,安装php依赖包时yum install libmcrypt libmcrypt-devel,报错如下: No package libmcrypt available. No ...
.NET Framework 概述
文章标题:.NET Framework 概述地址:https://docs.microsoft.com/zh-cn/dotnet/framework/get-started/overview NET ...
java中的io流总结（二）——RandomAccessFile类
知识点:RandomAccessFile (随机访问文件)类 (一)描述前一篇博客中https://www.cnblogs.com/shuaifing/p/11490160.html,主要描述Fil ...
css实现背景全透明样式
background-color:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26FFF ...
Python进阶：都说好用的 Python 命令行库click
click 是一个以尽可能少的代码.以组合的方式创建优美的命令行程序的 Python 包.它有很高的可配置性,同时也能开箱即用. 它旨在让编写命令行工具的过程既快速又有趣,还能防止由于无法实现预期的 ...
tp5.1下redis配置和使用
//1.config目录下新建redis.php <?php /** * Created by PhpStorm. * User: Administrator * Date: 2019/12/1 ...
使用 EasyExcel 写Excel数据（表头动态）
引入 jar 包 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel&l ...

fsLayuiPlugin数据表格弹出form表单说明

css和js引用

form表单

新增操作

编辑操作

form表单属性说明

日期控件说明

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

随机推荐

热门专题