fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作。
GitHub下载
码云下载
测试环境地址:http://fslayui.itcto.cn
通用配置
修改配置文件 plugins/frame/js/fsConfig.js
常量配置
项目中需要调用到的常量、变量修改,根据项目的实际情况来配置。
注意:这里一定要修改为自己项目的配置。
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
| fsConfig["global"] = { "servletUrl":"https://fs.fallsea.com", "loginUrl" : "/login", "uploadUrl" : "https://fs.fallsea.com/upload", "uploadHtmlUrl" : "/plugins/frame/views/upload.html", "loadDataType":"1", "result" : { "statusName": "errorNo", "msgName": "errorInfo", "dataName" : "results.data", }, "page" : { "request": { "pageName": "pageNum", "limitName": "pageSize" }, "response": { "countName": "results.data.total", "dataName" : "results.data", "dataNamePage": "results.data.list" }
} };
|
表单验证配置
拓展form表单验证规则(自定义的表单验证规则)
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
| fsConfig["verify"] = {
"equals": function(value, item){ var equalsId = $(item).attr("equalsId"); if(_.isEmpty(equalsId)){ return '未配置对比id'; } var value2 = $("#"+equalsId).val();
if(!_.eq(value,value2)) { var equalsMsg = $(item).attr("equalsMsg"); if(_.isEmpty(equalsMsg)) { equalsMsg = "值不相等"; } return equalsMsg; } },
"username": [ /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){2,19}$/, '用户名格式不正确!' ],
"length": function(value, item){ var minLength = $(item).attr("minLength"); var maxLength = $(item).attr("maxLength"); if(!_.isEmpty(minLength) && !_.eq('0',minLength) && _.gt(minLength,value.length)){ return "输入内容小于最小值:"+minLength; } if(!_.isEmpty(maxLength) && !_.eq('0',maxLength) && _.gt(value.length,maxLength)){ return "输入内容大于最小值:"+maxLength; } } };
|
页面开发
页面开发只需要引入基础的js和css样式,配置form表单或table表格,通过配置快速实现一个增删改查功能。
列表页
列表页支持通过form表单传参查询table数据,刷新表格等功能。
表格详细配置请参考:fsLayuiPlugin数据表格使用
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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
| <!DOCTYPE html> <html> <head> <meta content="text/html;charset=UTF-8"/> <title>fsLayuiPlugin</title> <meta name="keywords" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" /> <meta name="description" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta http-equiv ="Pragma" content = "no-cache"/> <meta http-equiv="Cache-Control" content="no cache" /> <meta http-equiv="Expires" content="0" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="format-detection" content="telephone=no"/> <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> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <a href="/index.html"><div class="layui-logo">fsLayuiPlugin</div></a> </div>
<div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">案例</a> <dl class="layui-nav-child"> <dd><a href="/index.html">首页</a></dd> <dd class="layui-this"><a href="/views/datagrid/index.html">数据表格</a></dd> <dd><a href="/views/treeDatagrid/index.html">树+表格</a></dd> <dd><a href="/views/multiDatagrid/index.html">多数据表格</a></dd> <dd><a href="/views/tabDatagrid/index.html">tab数据表格</a></dd> <dd><a href="/views/complexDatagrid/index.html">复杂数据表格</a></dd> <dd><a href="/views/linkageDatagrid/index.html">联动数据表格</a></dd> <dd><a href="/views/linkageDatagrid2/index.html">联动数据表格(复杂)</a></dd> </dl> </li> </ul> </div> </div>
<div class="layui-body"> <div class="layui-fluid"> <div class="layui-row layui-col-space1"> <div class="layui-col-md12"> <div class="layui-form-query"> <form class="layui-form" id="query_form"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-mid">id:</label> <div class="layui-input-inline" style="width: 100px;"> <input type="tel" name="id" autocomplete="off" class="layui-input"/> </div> </div> <div class="layui-inline"> <label class="layui-form-mid">名称:</label> <div class="layui-input-inline" style="width: 100px;"> <input type="text" name="name" autocomplete="off" class="layui-input"/> </div> </div> <div class="layui-inline"> <label class="layui-form-mid">时间:</label> <div class="layui-input-inline" style=""> <input type="text" name="createDate" autocomplete="off" class="layui-input fsDate" dateRange="1" placeholder=" - "/> </div> </div> <div class="layui-inline"> <div class="layui-input-inline"> <button class="layui-btn" type="button" function="query"><i class="layui-icon"></i>查询</button> </div> </div> </div> </form> </div> </div> <div class="layui-col-md12"> <div class="layui-row grid-demo"> <div class="layui-col-md3"> <button class="layui-btn" function="top" topUrl="add.html" topWidth="700px" topHeight="500px" topTitle="新增demo"> <i class="layui-icon"></i>新增 </button> <button class="layui-btn layui-btn-danger" function="submit" url="/fsbus/1002" isSelect="1" isConfirm="1" confirmMsg="是否确定删除选中的数据?" inputs="id:"> <i class="layui-icon"></i>删除 </button> <button class="layui-btn" function="refresh"> <i class="layui-icon">ဂ</i>刷新 </button> </div> <div class="layui-col-md12"> <table id="fsDatagrid" lay-filter="fsDatagrid" class="fsDatagrid" isLoad="1" url="/fsbus/1000" isPage="1" defaultForm="query_form" height="full-235"></table>
<div class="fsDatagridCols"> <p type="numbers" title="#"/> <p checkbox="true"/> <p field="id" title="ID" width="100" sort="true"/> <p field="name" title="名称" width="30%"sort="true" /> <p field="city" title="城市" width="100" templet="#cityTpl"/> <p field="sex" title="性别" width="100" /> <p field="state" title="状态" width="100" templet="#stateTpl"/> <p field="createdTime" title="创建时间" width="180"/> <p field="modifiedTime" title="修改时间" width="180"/> <p fixed="right" align="center" toolbar="#barDemo" title="操作" width="150"/> </div>
<script type="text/html" id="cityTpl"> {{# if(d.city == '0'){ }} 北京 {{# } else if(d.city == '1'){ }} 上海 {{# } else if(d.city == '2'){ }} 广州 {{# } else if(d.city == '3'){ }} 深圳 {{# } else if(d.city == '4'){ }} 杭州 {{# } }} </script>
<script type="text/html" id="stateTpl"> <input type="checkbox" name="state" lay-skin="switch" disabled lay-text="开启|关闭" {{ d.state == 1 ? 'checked' : '' }}> </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="top" topUrl="edit.html" topWidth="700px" topHeight="500px" topTitle="编辑demo" inputs="id:">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="submit" url="/fsbus/1002" isConfirm="1" confirmMsg="是否确定删除当前记录?" inputs="id:">删除</a> </script> </div> </div>
</div>
</div> </div> </div>
<div class="layui-footer"> ©2017 www.fallsea.com </div> </div> </body> </html>
|
菜单配置
菜单赋予强大的功能,通过简单的配置,快速达到需要的效果。
例如:
- 弹出一个新的窗口
- 关闭窗口
- 查询talbe
- 提交数据(确认提示按钮)
- 选择table
等…,
菜单信息配置请参考:菜单配置说明
新增弹出窗口
function="top"
描述弹出窗口
topUrl="add.html"
指定打开
topWidth="700px"
弹出窗口宽度
topHeight="500px"
弹出窗口高度
topTitle="新增demo"
弹出窗口标题
1 2 3
| <button class="layui-btn" function="top" topUrl="add.html" topWidth="700px" topHeight="500px" topTitle="新增demo"> <i class="layui-icon"></i>新增 </button>
|
修改弹出窗口
function="top"
描述弹出窗口
topUrl="edit.html"
指定打开
topWidth="700px"
弹出窗口宽度
topHeight="500px"
弹出窗口高度
topTitle="编辑demo"
弹出窗口标题
isSelect="1"
必须单选
inputs="id:"
选中的参数信息
1 2 3
| <button class="layui-btn" function="top" topUrl="edit.html" topWidth="700px" topHeight="450px" isSelect="1" topTitle="编辑功能号信息" inputs="id:"> <i class="layui-icon"></i>编辑 </button>
|
删除数据
function="submit"
描述提交数据
url="/fsbus/1002"
提交的url地址
isSelect="1"
必须单选
isConfirm="1"
弹出确认提示
confirmMsg="是否确定删除选中的数据?"
自定义确认提升内容
inputs="id:"
提交的参数信息
1 2 3
| <button class="layui-btn layui-btn-danger" function="submit" url="/fsbus/1002" isSelect="1" isConfirm="1" confirmMsg="是否确定删除选中的数据?" inputs="id:"> <i class="layui-icon"></i>删除 </button>
|
刷新表格
function="refresh"
描述刷新表格
1 2 3
| <button class="layui-btn" function="refresh"> <i class="layui-icon">ဂ</i>刷新 </button>
|
新增页
新增页面可以直接配置一个url提交地址,自动把form表单数据提交到后台,提交成功后,自动关闭弹出的窗口,刷新table表格数据:fsLayuiPlugin数据表格弹出form表单说明
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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
| <!DOCTYPE html> <html> <head> <meta content="text/html;charset=UTF-8"/> <title>fsLayuiPlugin</title> <meta name="keywords" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" /> <meta name="description" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta http-equiv ="Pragma" content = "no-cache"/> <meta http-equiv="Cache-Control" content="no cache" /> <meta http-equiv="Expires" content="0" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="format-detection" content="telephone=no"/> <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> </head> <body class="layui-layout-body"> <div class="layui-fluid"> <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> </div> </body> </html>
|
编辑页
编辑页面需要配置一个加载当个数据的地址,配置后自动一步查询数据和填充数据;
然后配置一个url提交地址,自动把form表单数据提交到后台,提交成功后,自动关闭弹出的窗口,刷新table表格数据:fsLayuiPlugin数据表格弹出form表单说明
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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
| <!DOCTYPE html> <html> <head> <meta content="text/html;charset=UTF-8"/> <title>fsLayuiPlugin</title> <meta name="keywords" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" /> <meta name="description" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta http-equiv ="Pragma" content = "no-cache"/> <meta http-equiv="Cache-Control" content="no cache" /> <meta http-equiv="Expires" content="0" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="format-detection" content="telephone=no"/> <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> </head> <body class="layui-layout-body"> <div class="layui-fluid"> <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> </div> </body> </html>
|