fsLayui快速开始
fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操做，提供通用的组件，经过配置html实现数据请求，减小前端js重复开发的工做。
GitHub下载
码云下载
测试环境地址： http://fslayui.itcto.cn
通用配置
修改配置文件
plugins/frame/js/fsConfig.js
常量配置
项目中须要调用到的常量、变量修改，根据项目的实际状况来配置。
注意：这里必定要修改成本身项目的配置。
fsConfig["global"] = {
"servletUrl":"https://fs.fallsea.com", //异步请求地址,本地工程能够不填
"loginUrl" : "/login", //登陆url
"uploadUrl" : "https://fs.fallsea.com/upload", //上传附件url
"uploadHtmlUrl" : "/plugins/frame/views/upload.html", //上传附件html地址，默认/plugins/frame/views/upload.html
"loadDataType":"1",//加载数据类型，1：是，0：否，默认0 （编辑或查看是否取缓存数据）
"result" : { //响应结果配置
"statusName": "errorNo", //数据状态的字段名称，默认：errorNo
"msgName": "errorInfo", //状态信息的字段名称，默认：errorInfo
"dataName" : "results.data", //数据列表的字段名称，默认：results.data
},
"page" : { //分页配置
"request": {//请求配置
"pageName": "pageNum", //页码的参数名称，默认：pageNum
"limitName": "pageSize" //每页数据量的参数名，默认：pageSize
},
"response": {//响应配置
"countName": "results.data.total", //数据总数的字段名称，默认：results.data.total
"dataName" : "results.data", //数据列表的字段名称，默认：results.data
"dataNamePage": "results.data.list" //分页数据列表的字段名称，默认：results.data.list
}//,
// "limit":10,//每页分页数量。默认20
// "limits":[10,20,30,50,100]//每页数据选择项，默认[10,20,30,50,100]
}
};
表单验证配置
拓展form表单验证规则（自定义的表单验证规则）
fsConfig["verify"] = {
/**
* 对比两个值相等
*/
"equals": function(value, item){ //value：表单的值、item：表单的DOM对象
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){ //value：表单的值、item：表单的DOM对象
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数据表格使用
<!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">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<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
等...，
菜单信息配置请参考：菜单配置说明javascript
新增弹出窗口
-
function="top"描述弹出窗口 -
topUrl="add.html"指定打开 -
topWidth="700px"弹出窗口宽度 -
topHeight="500px"弹出窗口高度 -
topTitle="新增demo"弹出窗口标题
<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:"选中的参数信息
<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:"提交的参数信息
<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"描述刷新表格
<button class="layui-btn" function="refresh"> <i class="layui-icon">ဂ</i>刷新 </button>
新增页
新增页面能够直接配置一个url提交地址，自动把form表单数据提交到后台，提交成功后，自动关闭弹出的窗口，刷新table表格数据： fsLayuiPlugin数据表格弹出form表单说明
<!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表单说明
<!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>
本文首发于个人博客： ITCTO技术博客
相关文章
- 1. Docker快速开始
- 2. OKHttp3 快速开始
- 3. angular2快速开始
- 4. Hystrix-快速开始
- 5. Elasticsearch 快速开始
- 6. Zipkin快速开始
- 7. JMeter快速开始
- 8. Nacos 快速开始
- 9. HaaS100快速开始
- 10. solr：快速开始
- 更多相关文章...
- • SQL 快速参考 - SQL 教程
- • Eclipse 快速修复 - Eclipse 教程
- • PHP开发工具
- • IntelliJ IDEA 代码格式化配置和快捷键
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Docker快速开始
- 2. OKHttp3 快速开始
- 3. angular2快速开始
- 4. Hystrix-快速开始
- 5. Elasticsearch 快速开始
- 6. Zipkin快速开始
- 7. JMeter快速开始
- 8. Nacos 快速开始
- 9. HaaS100快速开始
- 10. solr：快速开始