项目说明

本项目是一个基于layui表单组件的表单设计器,秉承Layui的设计风格,符合Layui插件规范,不需要进行nodejs编译,直接使用。

本项目基于Layui、Jquery、Sortable

项目中的js代码格式化使用了js_beautify

3、项目已经基本实现了拖动布局,父子布局

4、项目实现了大部分基于Layui的Form表单控件布局,包括输入框、编辑器、下拉、单选、单选组、多选组、日期、滑块、评分、轮播、图片、颜色选择

5、项目实现了一行多列布局

开发计划

开发基于 layui 的表单布局

开发基于数据库的表单重新布局

开发日志

2020-04-18

当天增加计划说明

增加数据库导入的数据结构包括了数据库.数据表.数据字段

{

tableName:abc,

tableId:1,

data:[

{

columnId:1,

columnName:"dept_name",

dataType:"varchar",

javaType:"String",

javaField:"deptName",

pk:true,

required:true,

insert:true,

update:true,

delete:true,

list:true,

query:true,

sort:1,

defaultValue:"s",

}

]

}

根据数据库结构生成表单元素

可在线修改数据库结构的表单组件展示状态

拖动布局

一键布局

生成java spring 的后台代码

2020-04-08

增加关于说明

解决拖动到grid中不能默认选择的bug

增加导入json功能

优化拖动过程中的背景为虚线方框(height:40px)

增加对表单的检测,并在input等控件中增加表达式设计如使用 email 或 mobile 控件

2020-04-07

修复一些不能用的控件属性

修改了除了image控件外的所有空间属性

2020-04-06

修正只读、禁用、必填选项问题

增加获取生成的form表单html可以直接在html中运行

2020-04-04

更新算法,不在用selectIndex来索引,而是ID

根据最新的算法,可以支持无限极嵌套布局(grid嵌套)

重新整合导出json数据

修复select下拉框宽度改变没有反应

修复radio删除问题

修复评分控件问题

2020-04-03

重构表单设计区组件名称为 formDesigner.js 使其符合 layui 组件规范

重构的组件,把整个html都包括进了组件中,不用再外部提供html支持

重构的组件把 css 样式独立出来

支持标识的更改 更改后重新显然设计区

修正从布局控件中拖动到非布局控件中的时候的bug

修复删除布局内的组件就会删除整个布局的问题

2020-03-27

复选框,当点击checkbox的时候同步显示设计区域

增加评分

增加轮播图

增加颜色选择器

增加上传图片

增加日期

增加开关控件

增加数据导出弹框

2020-03-26

增加grid可以设置多列

修正多列大于2列的点击事件不能显示拖动图标的bug

增加select下拉控件值,下拉控件的option操作比较复杂

增加 radio 单选组

增加 checkbox 复选组

增加 checkbox 新增的时候同步视图,使用 #ID

增加 checkbox 删除的时候同步设计视图,使用 #ID

2020-03-25

从组件拖动到设计区,设置 com.selectItem 为当前选择元素

从设计区拖动的一级层次组件,设置 com.selectItem 为当前选择元素,并设置 com.selectItem.index=evt.newIndex

从组件拖动到设计区的grid子布局,实现子布局控件为当前布局选项

重新整理拖动逻辑

从组件去拖动,拖动到表单设计区,拖动到grid设计区

从设计区拖动,拖动到表单设计区,拖动到grid设计区

copy 问题

renderForm copy 完成后显示焦点控件问题 没有设置selectItem? 因为拷贝后未对index的值设置或者renderForm中没对子控件的index设置值

为什么控件要点击第二次才能选择到子控件?(因为当设置选中项目的时候 没有设置copy的事件信息,copy的事件信息只在点击的时候设置了。)(解决:在初始化的时候加入)

点击子控件,显示的属性不正确 (已解决,因为设置属性的时候没有使用 selectItem 来设置)

layui 横向表单_fwr-layui-formdesigner相关推荐

  1. layui 横向表单_对layui中表单元素的使用详解

    首先不管是单选框还是复选框或者是下拉框,都要在你写的标签外面套一层div或者是form标签,如: 这样写好了以后,你如果是写在静态页面,这样式可以看见效果,如果写在js里,这样写了还有一步得写,那就是 ...

  2. layui的表单——自定义验证规则

    最近layui的表单用的比较多,所以整理来一下自定义的验证如下(下面是自己写的例子): layui的官网 引入layui之后 html <form action="" cla ...

  3. 【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法

    [Springboot学习笔记]SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法 目录 1.搭建环境 1.1直接从网上下载SpringB ...

  4. 【Layui】表单验证

    author:咔咔 wechat:fangkangfk layui表单验证的属性 required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date( ...

  5. html怎么校验用户名重复,layui的表单验证支持ajax判断用户名是否重复的实例

    如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. ht ...

  6. layui提交表单自动刷新_layui form表单提交后实现自动刷新

    刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪 ...

  7. layui处理表单验证时, select非空验证自动处理null或underfined.

    很多人都在问, 在layui处理表单验证时, 因为后台取值为null时, select非空验证没有自动处理null或underfined. 这里提供一个在我看来比较好的解决办法: 修改form.js ...

  8. Bootstrap3 横向表单/水平表单

    横向表单 通过为表单添加.form-horizontal类,并联合使用 Bootstrap的栅格类,便可以将label标签和控件组水平并排布局.这样做将改变.form-group的行为,使其表现为栅格 ...

  9. Layui form 表单验证 基本属性

    layui 表单 1.表单自带校验 lay-verify:是表单验证的关键字 有以下值供选择: required (必填项) phone(手机号) email(邮箱) url(网址) number(数 ...

最新文章

  1. 实现根据条件删除_Vue源码解析,keep-alive是如何实现缓存的?
  2. 深度解读谷歌开源的最精确自然语言解析器SyntaxNet
  3. 不要放弃,你的梦想是这个世界上最伟大的事情。
  4. scrum master_从Scrum Master到工程副总裁:职称为何重要
  5. python的类里的属性是否可以为列表_是否有Python方法可以访问类的所有非私有和非内置属性?...
  6. Java企业面试算法新得体会之6大数据和空间限制问题6问
  7. java对列_JAVA实现EXCEL行列号解析(一)——单格解析
  8. ggplot2作图详解:分面(faceting)
  9. Delphi XE2有什么新功能
  10. .bat脚本基本命令合集
  11. zigbee协议栈工作流程 From zigbee菜鸟笔记(十 一)
  12. 什么是RS232串口RS232电平
  13. 3D平面SLAM相关总结与思考
  14. Kotlin从入门到掉坑
  15. 手机型号云服务器,手机型号云服务器
  16. 四大行、城商行等银行都在使用什么数据库?
  17. Redis源码阅读笔记 ----数据结构部分 sds
  18. Quadratic Assignment Problem 二次分配问题 QAP
  19. MySQL连接查询综合应用
  20. ACL中的permit/deny与traffic policy中behavior的permit/deny之间是什么关系?

热门文章

  1. 量化交易系统用例图(一)
  2. python程序化交易实例-用 Python 实现你的量化交易策略
  3. 一键上手时下最火AI作画工具
  4. linux系统下的shell是什么,Linux系统中shell各命令的区别有什么?
  5. 【spring】切入点(Pointcut)、方面/切面(Aspect、Advisor)详解
  6. Android项目实战--【谁是歌手-布局篇】
  7. URL请求加密 参数的sign签名 与验签
  8. LZY的计算器(暴力)
  9. Jira中的全流程开发管理
  10. K8S集群扩容多master大概思路步骤