layui 横向表单_fwr-layui-formdesigner
项目说明
本项目是一个基于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相关推荐
- layui 横向表单_对layui中表单元素的使用详解
首先不管是单选框还是复选框或者是下拉框,都要在你写的标签外面套一层div或者是form标签,如: 这样写好了以后,你如果是写在静态页面,这样式可以看见效果,如果写在js里,这样写了还有一步得写,那就是 ...
- layui的表单——自定义验证规则
最近layui的表单用的比较多,所以整理来一下自定义的验证如下(下面是自己写的例子): layui的官网 引入layui之后 html <form action="" cla ...
- 【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法
[Springboot学习笔记]SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法 目录 1.搭建环境 1.1直接从网上下载SpringB ...
- 【Layui】表单验证
author:咔咔 wechat:fangkangfk layui表单验证的属性 required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date( ...
- html怎么校验用户名重复,layui的表单验证支持ajax判断用户名是否重复的实例
如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. ht ...
- layui提交表单自动刷新_layui form表单提交后实现自动刷新
刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪 ...
- layui处理表单验证时, select非空验证自动处理null或underfined.
很多人都在问, 在layui处理表单验证时, 因为后台取值为null时, select非空验证没有自动处理null或underfined. 这里提供一个在我看来比较好的解决办法: 修改form.js ...
- Bootstrap3 横向表单/水平表单
横向表单 通过为表单添加.form-horizontal类,并联合使用 Bootstrap的栅格类,便可以将label标签和控件组水平并排布局.这样做将改变.form-group的行为,使其表现为栅格 ...
- Layui form 表单验证 基本属性
layui 表单 1.表单自带校验 lay-verify:是表单验证的关键字 有以下值供选择: required (必填项) phone(手机号) email(邮箱) url(网址) number(数 ...
最新文章
- 实现根据条件删除_Vue源码解析,keep-alive是如何实现缓存的?
- 深度解读谷歌开源的最精确自然语言解析器SyntaxNet
- 不要放弃,你的梦想是这个世界上最伟大的事情。
- scrum master_从Scrum Master到工程副总裁:职称为何重要
- python的类里的属性是否可以为列表_是否有Python方法可以访问类的所有非私有和非内置属性?...
- Java企业面试算法新得体会之6大数据和空间限制问题6问
- java对列_JAVA实现EXCEL行列号解析(一)——单格解析
- ggplot2作图详解:分面(faceting)
- Delphi XE2有什么新功能
- .bat脚本基本命令合集
- zigbee协议栈工作流程 From zigbee菜鸟笔记(十 一)
- 什么是RS232串口RS232电平
- 3D平面SLAM相关总结与思考
- Kotlin从入门到掉坑
- 手机型号云服务器,手机型号云服务器
- 四大行、城商行等银行都在使用什么数据库?
- Redis源码阅读笔记 ----数据结构部分 sds
- Quadratic Assignment Problem 二次分配问题 QAP
- MySQL连接查询综合应用
- ACL中的permit/deny与traffic policy中behavior的permit/deny之间是什么关系?