fsLayui快速开始

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", //登录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表单验证规则(自定义的表单验证规则)

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){ //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数据表格使用

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">
<!-- 左侧导航区域(可配合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">&#xe615;</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">&#xe654;</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">&#xe640;</i>删除
</button>
<button class="layui-btn" function="refresh">
<i class="layui-icon">&#x1002;</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">&#xe654;</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">&#xe642;</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">&#xe640;</i>删除
</button>

刷新表格

  • function="refresh" 描述刷新表格
1
2
3
<button class="layui-btn" function="refresh">
<i class="layui-icon">&#x1002;</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">&#xe642;</i>编辑</button>
<button type="button" class="layui-btn layui-btn-primary" function="close">关闭</button>
</div>
</form>
</div>
</body>
</html>