# 组件案例
# 概述
- 经过上面《功能组件》、《业务组件》两个章节我们详细的介绍组件的原理以及实现方式,充分了考虑了使用场景,进行了多元化、灵活性的扩展封装,具体的细节在此不再累赘的描述,如有不理解的可以查阅上两个章节的文档,本章节我们将重点给大家实例演示下,JS组件库是如何在实际模块开发中
UI部分
的使用,上述章节讲解了那么多,其实那都是在组件内部复杂数据处理、逻辑处理,因为框架是高度化封装,其实真正进行模块开发时使用起来非常的简单,代码量极少,尤其是JS代码,几乎看不到多余的代码,就是简简单单的调用了几个封装好的组件以及两个HTML文件列表页
、编辑页
,整个模块的功能就全部出来,可以直接使用; - 框架UI部分是基于《Thymeleaf模板引擎》 (opens new window),语法非常的简单,尤其在框架进行了封装后,更加的简单便捷,如果不太熟悉的朋友可以直接找《度娘》 (opens new window)或者查阅官网,整体框架我们采用采用的是
Layout
模板布局,对页面进行了拆分头部
、脚本
、主题内容
三个部分,具体内容请查看项目模块;
# 列表页
列表页主要是对数据进行增删改查
的地方,对数据进行精准的维护,下面我们直接展示列表页的相关代码,如下所示:
<html layout:decorator="public/layout" xmlns:miguo="http://www.w3.org/1999/html">
<div layout:fragment="content">
<!-- 表格工具栏 -->
<form class="layui-form toolbar">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="name" placeholder="请输入职级名称" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 状态下拉单选 -->
<div class="layui-inline">
<div class="layui-input-inline">
<!-- 下拉单选 -->
<widget:singleSelect name="status|0|状态|name|id" th:data="${LEVEL_STATUS_LIST}" value="0"/>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline" style="width: auto;">
<widget:btnQuery name="查询"/>
<widget:btnAdd name="添加职级"/>
<widget:btnDAll name="批量删除"/>
</div>
</div>
</div>
</form>
<!-- 数据表格 -->
<table class="layui-hide" id="tableList" lay-filter="tableList"></table>
<!-- 表格操作列 -->
<script type="text/html" id="toolBar">
<widget:btnEdit name="编辑"/>
<widget:btnDel name="删除"/>
</script>
<!-- 状态 -->
<script type="text/html" id="statusTpl">
<input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="正常|停用" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }} >
</script>
</div>
</html>
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
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
HTML页面中涉及的组件部分我们在《UI组件部分》都有详细的讲解,不熟悉的朋友可以查阅;
# 编辑页
编辑表单是表单控件的集合,我们所需要的提交的数据都会有一个完整的控件,如下所示:
<html layout:decorator="public/form" xmlns:miguo="http://www.w3.org/1999/html">
<div layout:fragment="content">
<form class="layui-form model-form" action="">
<input name="id" type="hidden" th:value="${info['id']}?:0">
<div class="layui-form-item">
<label class="layui-form-label">职级名称:</label>
<div class="layui-input-block">
<input name="name" th:value="${info['name']}" lay-verify="required" autocomplete="off" placeholder="请输入职级名称" class="layui-input" type="text">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态:</label>
<div class="layui-input-block">
<widget:switchCheck name="status" data="正常|停用" th:value="${info['status']} ?: 1"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">显示顺序:</label>
<div class="layui-input-block">
<input name="sort" th:value="${info['sort']}" lay-verify="required|number" autocomplete="off" placeholder="请输入显示顺序" class="layui-input" type="text">
</div>
</div>
<widget:btnSubmit name="submit|立即保存,close|关闭"/>
</form>
</div>
</html>
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
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
# 模块JS
上述分别为列表HTML页面
、编辑页HTML页面
,页面交互部分都是交给模块JS
进行处理的,模块JS部分如下所示:
/**
* 职级
* @auth 鲲鹏
* @date 2020-04-20
*/
layui.use(['func'], function () {
//声明变量
var func = layui.func
, $ = layui.$;
if (A == 'index') {
//【TABLE列数组】
var cols = [
{type: 'checkbox', fixed: 'left'}
, {field: 'id', width: 80, title: 'ID', align: 'center', sort: true, fixed: 'left'}
, {field: 'name', width: 200, title: '职级名称', align: 'center'}
, {field: 'status', width: 100, title: '状态', align: 'center', templet: '#statusTpl'}
, {field: 'sort', width: 100, title: '显示顺序', align: 'center'}
, {field: 'createUserName', width: 100, title: '添加人', align: 'center'}
, {field: 'createTime', width: 180, title: '创建时间', align: 'center'}
, {field: 'updateUserName', width: 100, title: '更新人', align: 'center'}
, {field: 'updateTime', width: 180, title: '更新时间', align: 'center'}
, {fixed: 'right', width: 150, title: '功能操作', align: 'center', toolbar: '#toolBar'}
];
//【渲染TABLE】
func.tableIns(cols, "tableList");
//【设置弹框】
func.setWin("职级", 500, 300);
//【设置状态】
func.formSwitch('status', null, function (data, res) {
console.log("开关回调成功");
});
}
});
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
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
模块JS代码部分很简洁,基本都是调用业务JS组件
传入参数表可实现整个模块功能业务的功能,实现就是如此简单,参数分析:
cols
:此参数是列表数据列字段的信息,主要定义了列表具有哪些参数、参数标题、列宽度、操作功能等等;tableIns
:调用组件方法,初始化数据列表,组件动态发起网络请求并进行一系列的数据渲染,是不是特别简单,一个完整的列表功能的实现只需简单的调用func.tableIns(cols, "tableList")
便可完美的实现了;setWin
:调用组件设置弹窗所需参数,当点击添加
、编辑
、详情
等需要弹窗时组件内部的showWin
方法会自动解析;formSwitch
:捕捉开关事件、发起网络请求,实现为记录状态的维护工作;
总结:一个完整的模块就这么简简单单的实现了,对内容不太理解的朋友请转至《UI组件》、《JS组件》章节详细的阅读;
# 效果展示
至此我们的模块可以正式可以运行预览效果了,增删改查整个模块的所有功能全部完毕,下面我们直接看效果吧,请看下图:
职级列表
职级添加/编辑
职级删除