你还在这样使用layui?【layui-form篇】

ByteRift
• 阅读 2546

1.前言:

layui用了几年,这个框架十分适合我们后台人员开发。简单易用,用的较多的模块肯定是table模块和form模块了。但是在一个开发团队中,不同的人开发水平的差异,如果没有调用统一的公共方法,那就会造成很多样式的不同和公共的bug出现到不同的页面 从而出现耗费过多的精力修改bug。所以我们需要做的是统一样式和方法的调用,将其二次封装以便于开发人员的调用。另一方面也能减少代码的冗余量。

2. layui-form的封装

2.1.针对select组件的封装

你还在这样使用layui?【layui-form篇】

2.1.1 结构

一般不同的是select里面的option不同,所以html里面的select标签 会保留在页面上。

2.1.1.1 解析数据源匹配到前端固有的取值方式

只需要一个select方法,构建页面的下拉框,那select的方法里面需要哪些东西?

肯定需要四部分【重点】:

2.1.1.2 ajax的配置包括请求参数
2.1.1.3 绑定的select集合及它的lay-filter

绑定的select的id的集合,这个肯定是数组,select的lay-filter属性值,这个拥有监听点击事件,以便进行回调,还有就是默认的select的选中值捆绑,可以设置默认选中

2.1.1.4 解析数据设置option

重点就是每个option 的文本值和value的设置,这个在参数keyValues里面设置,使用数组对象,单个里面为{key:'',value:'',extra:''},处理第几个select时采用针对的key value 和extra ,以便正常的数据源正常的取值,另外提醒一下extra是个额外的扩展字段,存于没有option的data-info里面。

2.1.1.5 事件的回调

这个包括下拉框的回调 和 因为后端的格式不一定跟前端的一样,所有返回的数据需要重新解析,这点在parseData的回调方法中得以体现,返回的格式为下图所示,还有就是样式不能适配业务直接走successBack方法,定义了successBack方法,就不能构建select控件了,切记。

你还在这样使用layui?【layui-form篇】

2.1.1.6 局部代码

你还在这样使用layui?【layui-form篇】
你还在这样使用layui?【layui-form篇】

ps: select也有单独封装,引用layui_select.js即开,使用方式:var laySelect = new LaySelect(); laySelect.select({...});

2.1.2 使用demo


var LayForm = new LayForm();
    //非联动 --> 注意同一个表单只能‘使用’一次select 方法 不然原数据会被覆盖
// 需要使用多个 建议引用layui-select.js 通过多次创建对象调用调用select方法
LayForm.select({
    elems: ['#interest', '#profession', '#money'],
    layFilters: ['interest', 'profession', 'money'],
    defaultValues: ['game', 'jiaoshi', '0050'],
    url: 'xxx://192.168.0.xxx:6889/rest/test/getMsg',
    where: {
            root: 'zhongguo'
    }
})

2.2 单纯的构建form [表单]

这里就快速带过了,里面我构建编辑器,一个init方法即可构建整个表单,这里只需要绑定form标签和提交按钮 的lay-filter ,加上了两个回调事件,一个是设置时间 编辑器等控件 、自定义规则、添加事件监听 等业务,另外一个是针对表单提交的回调。

2.2.1 使用demo

var LayForm = new LayForm();
            LayForm.init({
                formFilter: 'demo',
                submitFilter: 'demo1'
        }, {
                "username": "我是谁",
                "phone": "18225840789",
                date: "2020-03-02",
                password: '7324362'

    }, function(form, layer, layedit, laydate) {
                laydate.render({
                    elem: '#date'
        });
}, function(form, layer, layedit, laydate, data) {
                console.log(data)
});

在线文档

https://ten-ken.gitee.io/java...

源码及使用demo

https://gitee.com/ten-ken/sty...

你还在这样使用layui?【layui-form篇】

本文来源于:程序员ken,专属平台有csdn、思否(SegmentFault)、 简书、 开源中国(oschina)、掘金,转载请注明出处。
点赞
收藏
评论区
推荐文章
kenx kenx
3年前
SpringBoot+Maven 多模块项目的构建、运行、打包实战
前言最近在做一个很复杂的会员综合线下线上商城大型项目,单模块项目无法满足多人开发和架构,很多模块都是重复的就想到了把模块提出来,做成公共模块,基于maven的多模块项目,也好分工开发,也便于后期微服务重构使用场景我刚开始创建项目的时候是基于单模块,开发的,我先开发的接口api项目结构是这样的core模块是公共模块,mallapi是小程序api,随然单体
浩浩 浩浩
4年前
【Flutter实战】包管理
2.3包管理在软件开发中,很多时候有一些公共的库或SDK可能会被很多项目用到,因此,将这些代码单独抽到一个独立模块,然后哪个项目需要使用时再直接集成这个模块,便可大大提高开发效率。很多编程语言或开发工具都支持这种“模块共享”机制,如Java语言中这种独立模块会被打成一个jar包,Android中的aar包,Web开发中的npm包等。为了方便表述,我们将
Wesley13 Wesley13
3年前
Java spi机制浅谈
最近看到公司的一些框架和之前看到的开源的一些框架的一些服务发现和接入都采用了java的spi机制。所以简单的总结下javaspi机制的思想。我们系统里抽象的各个模块,往往有很多不同的实现方案,比如日志模块的方案,xml解析模块、jdbc模块的方案等。面向的对象的设计里,我们一般推荐模块之间基于接口编程,模块之间不对实现类进行硬编码。一旦代码里涉及具
Easter79 Easter79
3年前
SpringCloud多模块打包失败问题记录
项目采用了SpringCloud微服务架构,由于存在很多公共配置及工具类,所有抽离出一个公共模块供所有模块引用,但是对SpringCloud项目打包时总是提示找不到公共模块中的某个路径或者找不到main方法。!(https://imgblog.csdnimg.cn/20200923100014598.png?xossprocessimage/
Stella981 Stella981
3年前
RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录
1、RDIFramework.NET框架介绍RDIFramework.NET敏捷开发框架,基于.NET的快速信息化系统开发、整合框架,为企业或个人快速开发系统提供了强大的支持,开发人员不需要开发系统的基础功能和公共模块,框架自身提供了强大的函数库和开发包,开发人员只需集中精力专注于业务部分的开发,因此大大
Wesley13 Wesley13
3年前
@Autowired和@Resource注解的一个意外重要区别
今天上午,因为公司要跟客户展示最近开发的项目,然后安排了我重新构建一个template项目,用来向客户展示参考。基于已开发好的代码,我在进行一些简化抽取的时候出现了一个有趣的问题因为我们有一个springsecurity配置类时需要每个模块都使用,就是可能有些参数不同,现在我把他弄到一个公共的jar包,把之前类拷贝进去,然后把参数写活,结果出现了一些有
基于vite多页面实现多端同构开发和部署
背景由于在开发前端项目中,后台管理端和用户端存在多个模块和页面逻辑可以复用,管理模块和用户端渲染模块使用同一套状态管理机制,只是在管理端和用户端的入口和路由模块不同,为了能够在开发时同时修改管理端和用户端共用模块,不用多项目工程修改和发布,我们基于vite
京东云开发者 京东云开发者
11个月前
微前端父子应用及兄弟应用间组件或方法共享方案
背景我们的很多web应用在持续迭代中功能越来越复杂,参与的人员、团队不断增多,导致项目出现难以维护的问题,这种情况PC端尤其常见,微前端为我们提供了一种高效管理复杂应用的方案。但是在使用微前端的过程中,通常会有一些公共方法或公共组件,本文将对如何实现父子应
京东云开发者 京东云开发者
11个月前
微前端父子应用及兄弟应用间组件或方法共享方案
背景我们的很多web应用在持续迭代中功能越来越复杂,参与的人员、团队不断增多,导致项目出现难以维护的问题,这种情况PC端尤其常见,微前端为我们提供了一种高效管理复杂应用的方案。但是在使用微前端的过程中,通常会有一些公共方法或公共组件,本文将对如何实现父子应
融云IM即时通讯 融云IM即时通讯
6个月前
融云 IM 干货丨如何确保私有云IMKit的跨平台兼容性?
确保私有云IMKit的跨平台兼容性,可以参考以下方法和建议:1.适配不同操作系统和硬件平台统一接口封装:通过抽象出公共的功能模块,使得SDK能在多个平台无缝工作。例如,融云的IMKit通过适配不同操作系统和硬件平台,确保在Android、iOS、Web等多
京东云开发者 京东云开发者
4个月前
微前端父子应用及兄弟应用间组件或方法共享方案
作者:京东物流刘微微背景我们的很多web应用在持续迭代中功能越来越复杂,参与的人员、团队不断增多,导致项目出现难以维护的问题,这种情况PC端尤其常见,微前端为我们提供了一种高效管理复杂应用的方案。但是在使用微前端的过程中,通常会有一些公共方法或公共组件,本
ByteRift
ByteRift
Lv1
燕歌未断塞鸿飞,牧马群嘶边草绿。
文章
3
粉丝
0
获赞
0