实现动态表单功能设计思路
实现动态表单功能设计思路
文章目录
- **实现动态表单功能设计思路**
- 一、业务场景
- 二、设计思路
- 三、数据库设计
- 四、页面展示
- 操作流程
- 部分代码
一、业务场景
业务只涉及简单的增删改查，但是业务类型繁杂，表单内容不确定，需要用户自定义设置时。
二、设计思路
不单独建表，对表单的属性，表头信息建表维护，业务数据以键值对形式存储
三、数据库设计
表单属性表
| 字段 | 注释 |
|---|---|
| ID | |
| name | 表名 |
| type | 分类 |
| note | 备注 |
表单表头表
| 字段 | 注释 |
|---|---|
| ID | |
| name | 列名 |
| property | 属性名 |
| property_type | 属性类型 |
| form_type | 属性表id |
| input_type | 输入方式（单选/文本框/…） |
| options | 选项（单选多选的选项） |
| sort | 排序 |
业务数据表
| 字段 | 注释 |
|---|---|
| ID | |
| value | 内容（{property1 :value1,property2: value2}） |
| form_type | 属性表id |
| create_time | 生成时间 |
四、页面展示
操作流程
用户录入表单信息
表单列表
数据展示页
数据录入页
根据input_type 设置不同的表单组件
部分代码
录入页提交表单：
var array = $('#form-data-add').serializeArray();var val = JSON.stringify(array)$.ajax({type:"POST",async:false,url: prefix + '/add',data:{value:val,formType:ID},dataType:"json",success:function(data){}});
展示页layui渲染，设置动态表头cols：
var colss = [{type:'checkbox', align : 'center',width : 60},{title : '序号', type : 'numbers', width : 60, align : 'center'},]for(var i=0;i<arr.length;i++){colss.push({field: arr[i].property, title: arr[i].name,align: 'center'})}
table.render({elem: '#demo',cols: [colss],url: prefix + "/list",method:'POST',where: {formType: ID},request: {pageName: 'pageNum' //页码的参数名称，默认：page,limitName: 'pageSize' //每页数据量的参数名，默认：limit},parseData: function(res){ //res 即为原始返回的数据var list = res.rows;var list2 = []for(var i=0;i<list.length;i++){var jsonObj = JSON.parse(list[i].value)jsonObj.ID = list[i].IDlist2.push(jsonObj)}return {"code": res.code, //解析接口状态"msg": res.msg, //解析提示文本"count": res.total, //解析数据长度"data": list2 //解析数据列表};},title:[[${custom.name}]],skin: 'line' //表格风格//,even: true,page: true //是否显示分页,limits: [5,10,20]//,limit: 5 //每页默认显示的数量});
实现动态表单功能设计思路相关推荐
- 碎片数据收集利器-结构化动态表单设计思路
本文基于面向基本公共卫生的业务系统设计经验,抽象出一套适合大型ERP系统的表单业务数据模型,目标是最大限度保留系统弹性的同时,尽可能降低系统复杂度和开发成本.enjoy~ 背景 填写表单应该是所有业务 ...
- SNS中好友动态功能的设计思路
现在大部分SNS网站都有一个功能,就是显示好友的活动状态,比如你的好友上传了一张照片.分享了一篇文章等等动作,都可以显示在你的页面里,这样大大增强了社区的互动性,也成为现在SNS网站的主要特征,对于这 ...
- 【Vue】elementUI实现动态表单功能（实现表格的增加行、删除行的功能）
一.需求 当需要给用户填写表格时,并且用户填写行数未知,需要使用到动态表单功能,这个和通常的写死form表单不同,如下图所示: 二.实现 1.前端代码如下图所示:采用el-form嵌套el-table ...
- mysql动态表单设计与实现_动态表单的数据库结构设计
利用在线编辑器设计的表单,包含输入框,明细表(动态添加行)等需要存储到数据库的信息,现在有三种思路: 1.一个表单对应数据库的一张或多张物理表(主从表),这种设计在很多业务的情况下,其数据库的物理表会 ...
- java动态表单设计解析
于雷劈网的表单设计器扩展,java实现后台解析(插件内容和字段和原版有一定改变).致敬雷劈网.http://formdesign.leipi.org/ 全部代码地址在 https://gitee.co ...
- A B 表的设计思路
AB表设计 以前在一家第三方结算的公司做运维DBA,在一次与开发人员探讨某个表的数据运维.那时我头脑想到AB表来切换使用,比如当A表写满后,就切到B表,那么A表就可以做运维工作.看到系统有管理,业务, ...
- mysql 用户签到表设计_用户签到表的设计思路与数据库实现
签到做为,一个促进用户粘性的手段已经很成熟了. 这里说下,个人的一些设计表思路 添加用户配置表.主键关联User表,即可. CREATE TABLE `cft_user_signin` ( `id` ...
- SNS社区好友动态设计思路
现在大部分SNS网站都有一个功能,就是显示好友的活动状态,比如你的好友上传了一张照片.分享了一篇文章等等动作,都可以显示在你的页面里,这样大大增强了社区的互动性,也成为现在SNS网站的主要特征,对于这 ...
- 基于mongodb的动态表单实现
文章目录 1. 项目背景 2. 术语表 3. 技术选型 4. 概要设计 4.1. 逻辑架构图 4.2. 系统覆盖图 5. 详细设计 5.1. 元数据样例及说明 5.2. 关于uuid 6. 接口清单 ...
最新文章
- office2003/2007/2010如何卸载干净
- [云炬创业基础笔记]第七章创业资源测试1
- 品茗论道说广播(Broadcast内部机制讲解)
- LeetCode 897 递增顺序搜索树
- 向内存中连续存入数据_实例35_在Excel中按条件筛选数据并存入新的表
- 在私企里，男工人能工作到退休年龄60岁吗？
- (转)知乎：维度灾难
- redis数据类型之String
- 游学只缘图利国 求知理应做腾骧
- Ubuntu20.04更换阿里源教程
- pytorch nn.AdaptiveAvgPool2d(1)
- pc微信多开hook版本3.2.1.123
- HPU图论专项（graph）【拓扑--二分图--最小生成树---树的直径---并查集--奇偶树---最小环---强联通】
- echarts去除网格线_echarts实现去掉X轴、Y轴和网格线效果实例分享
- 【转】中国人唯一不认可的成功——就是家庭的和睦，人生的平淡
- 今日早报 每日精选12条新闻简报 每天一分钟 知晓天下事 9月24日
- c语言井字棋程序设计报告,井字棋游戏（课程设计）总结报告.doc
- POI之excel固定模板导出
- 无法挣脱的命运——《巴黎圣母院》读后感4000字
- 高精度运算模板（高精度加减乘除）