fsLayui 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作。
GitHub下载 码云下载
测试环境地址:http://fslayui.itcto.cn
css和js引用
公共css和js必须全部引用
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <link rel="stylesheet" type="text/css" href="/plugins/layui/css/layui.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/css/fs.css" media="all"/>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<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>
<script type="text/javascript" src="/plugins/frame/js/fs.js?v=1.4.1"></script>
<script type="text/javascript" src="/plugins/frame/js/frame.js?v=1.4.1"></script>
|
新增操作
新增只需要关注按钮配置
form表单基于layui.form 监听提交事件,不需要配置function,直接配置提交地址 url 即可
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
| <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
| <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>
|
属性 |
必输 |
默认值 |
名称 |
描述 |
isLoad |
否 |
|
是否加载 |
1:是,0:否 |
loadUrl |
否 |
|
加载数据地址 |
|
日期控件说明
如果要使用日期控件,必须按照以下配置
- class样式中增加 fsDate
- 在input定义其他的属性
属性 |
必输 |
默认值 |
名称 |
描述 |
dateType |
否 |
|
控件选择类型 |
|
dateRange |
否 |
|
范围选择 |
|
dateFormat |
否 |
|
自定义格式 |
|
dateMin |
否 |
|
最小日期 |
|
dateMax |
否 |
|
最大日期 |
|
配置属性值请参考layui官方日期配置 http://www.layui.com/doc/modules/laydate.html#options