实现动态表单功能设计思路

实现动态表单功能设计思路

---

一、业务场景

业务只涉及简单的增删改查，但是业务类型繁杂，表单内容不确定，需要用户自定义设置时。

二、设计思路

不单独建表，对表单的属性，表头信息建表维护，业务数据以键值对形式存储

三、数据库设计

表单属性表

字段	注释
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	生成时间

四、页面展示

操作流程

1. 用户录入表单信息
   

2. 表单列表
   

3. 数据展示页
   

4. 数据录入页
   根据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].ID
                        list2.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 //每页默认显示的数量
            });