这里写目录标题
- 什么是JSON
- layui动态表单----数据
- layui动态表单----表头
什么是JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。
JSON采用完全独立于程序语言的文本格式，但是也使用了类C语言的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。
这些特性使JSON成为理想的数据交换语言。json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。
在JSON中可以使用的数据类型如上图所示，JSON简单来说就是数组与对象相互嵌套形成的一种数据结构。
其中对象是{}括起来的内容，以key-value形式来存储数据，对应java中的Map。
数组是[]括起来的内容，字段值可以是字符串，数字，数组，对象，对应java中的List。
例：
[{"name":"塞尔达","age":"23"},{"name":"林克","age":"18"}]这个JSON很明显，是一个JSON数组，数组的字段值是对象。这个数组的size为2。
layui动态表单----数据
首先我们来解析layui表单提交的JSON数据。
例：
[
{
"addressProvince":"1",
"overValue":"1",
"yearOverArea":"1",
"projectLevel":"1",
"companyName":"1",
"createYear":"2020",
"contractEnd":"2020-04-08",
"monthOverNumber":"1",
"yearDoingValue":"1",
"LAY_TABLE_INDEX":0,
"type":"",
"projectStatusName":"停工",
"layer":"1",
"addressDetail":"1",
"endImageProgress":"1",
"contractName":"1",
"state":0,
"subcompanyName":"山西一建集团有限公司",
"constructionArea":"1",
"addressCity":"1",
"formId":"",
"createMonthName":"1月",
"branchId":"169254",
"monthOverArea":"1",
"yearOverNumber":"1",
"branchName":"材料科",
"startDoingValue":"1",
"createMonth":"1",
"projectStatus":"1",
"monthDoingValue":"1",
"realEnd":"2020-04-10",
"contractPrice":"1",
"structureType":"1",
"createYearName":"2020年",
"addressDistrict":"1",
"realStart":"2020-04-09",
"contractStart":"2020-04-07",
"contractCode":"1"
},
{
"addressProvince":"1",
"overValue":"1",
"yearOverArea":"1",
"projectLevel":"1",
"companyName":"1",
"createYear":"2020",
"contractEnd":"2020-04-08",
"monthOverNumber":"1",
"yearDoingValue":"1",
"LAY_TABLE_INDEX":1,
"type":"",
"projectStatusName":"在施",
"layer":"1",
"addressDetail":"1",
"endImageProgress":"1",
"contractName":"1",
"state":0,
"subcompanyName":"山西一建集团有限公司",
"constructionArea":"1",
"addressCity":"1",
"formId":"",
"createMonthName":"1月",
"branchId":"169254",
"monthOverArea":"1",
"yearOverNumber":"1",
"branchName":"材料科",
"startDoingValue":"1",
"createMonth":"1",
"projectStatus":"0",
"monthDoingValue":"1",
"realEnd":"2020-04-10",
"contractPrice":"1",
"structureType":"1",
"createYearName":"2020年",
"addressDistrict":"1",
"realStart":"2020-04-09",
"contractStart":"2020-04-07",
"contractCode":"1"
}
]看起来比较长，实际上就是一个简单的数组内嵌套对象的JSON串，如下图所示：
先贴出前端传回这个JSON串的ajax
$.ajax({
type: 'post',//必须为post
url: '/em/ext/api/test/create',
contentType : 'application/json;charset=utf-8', //设置请求头信息
dataType:"json",//数据类型为json
data: JSON.stringify(tableData),//通过函数进行转换，将表单数据转化为JSON对象
success:function(res){
if(res.code=="M000000"){
layer.msg("保存成功");
}else{
layer.msg(res.info);
}
},
error:function(err){
console.log(err)
}
})后台Controller的参数：
public Map<String, Object> approval(@RequestBody String jsonStr){
}注意这里一定要加@RequestBody才可接收json数据。
注解@RequestBody接收的参数是来自requestBody中，即请求体。因此前端的ajax方式必须为post，get请求是没有请求体的，因此该注解不适用。
这里因为是动态表单，所以是用的字符串来接收。若是非动态表单，可以使用实体类来接收数据。如果传来的数据是对象类型，可以使用@RequestBody User user 来直接接收。如果传来的对象是数组，数组内的元素是对象，则可使用@RequestBody List<User> user 来接收。
这里我们解析动态表单，所以实体类内的元素是不确定的，因此用String来接收，之后再进行处理。
具体解析代码如下：
public static List<String> parseJsonArray(String jsonStr){
JSONArray jArray = JSON.parseArray(jsonStr);
List<String> res = new ArrayList<>();
for(int i=0;i<jArray.size();i++){
JSONObject jsonObject = jArray.getJSONObject(i);
res.add(jsonObject.toString());
}
return res;
}这个方法我们将json串中的多个对象拆分，存入List<String>中。
首先第一步，我们通过JSON.parseArray(jsonStr);这个函数，将json字符串转化为JSONArray对象。
查看源码我们可以看到，JSONArray类实现了List<Object>接口，因此他实现了List接口的方法。我们可以通过for循环进行遍历，拿到他的具体某一个元素，这里的元素是对象类型的json，因此我们调用它的getJSONObject(i);方法，获取它的JSON对象，最后再转化为字符串存入List中。后续如果需要操作，再通过JSON.parseObject(jsonStr);方法将String类型的json解析成对象即可。
这里我们再看一下JSONObject这个JSON对象。
可以看到它实现了Map<String,Object>接口，因此Map接口定义的方法，在JSONObject中均有实现。
由此我们可以印证之前所说，JSON中的数组就是Java中的LIst，JSON中的对象就是Java中的map。
layui动态表单----表头
首先我们贴出layui动态表单渲染所需要的json串。
[
[
{
"field":"id",
"title":"建筑业企业建筑施工板块完成情况月报",
"colspan":35
}
],
[
{
"field":"subcompanyName",
"title":"子集团名称",
"rowspan":2
},
{
"field":"branchName",
"title":"分公司名称",
"templet":"#branch",
"rowspan":2
},
{
"field":"companyName",
"edit":"text",
"title":"建设单位及单位工程名称",
"rowspan":2
},
{
"field":"createYear",
"templet":"#year",
"title":"创建年份",
"rowspan":2
},
{
"field":"createMonth",
"templet":"#month",
"title":"创建月份",
"rowspan":2
},
{
"field":"contractName",
"edit":"text",
"title":"合同工程名称",
"rowspan":2
},
{
"field":"contractCode",
"edit":"text",
"title":"合同编号",
"rowspan":2
},
{
"field":"contractPrice",
"edit":"text",
"title":"合同价（万元）",
"rowspan":2
},
{
"title":"建设地址",
"colspan":4
},
{
"title":"合同工期",
"colspan":2
},
{
"title":"实际工期",
"colspan":2
},
{
"field":"structureType",
"edit":"text",
"title":"结构类型",
"rowspan":2
},
{
"field":"layer",
"edit":"text",
"title":"层数",
"rowspan":2
},
{
"field":"constructionArea",
"edit":"text",
"title":"施工面积(m²)",
"rowspan":2
},
{
"field":"projectLevel",
"edit":"text",
"title":"项目级别",
"rowspan":2
},
{
"field":"projectStatus",
"templet":"#projectStatus",
"title":"项目状态",
"rowspan":2
},
{
"title":"竣工面积及竣工产值",
"colspan":5
},
{
"title":"施工产值（万元）",
"colspan":3
},
{
"field":"endImageProgress",
"edit":"text",
"title":"期末形象进度",
"rowspan":2,
"width":100
},
{
"title":"操作",
"width":200,
"toolbar":"#toolbar",
"rowspan":2
}
],
[
{
"field":"addressProvince",
"edit":"text",
"title":"省"
},
{
"field":"addressCity",
"edit":"text",
"title":"市"
},
{
"field":"addressDistrict",
"edit":"text",
"title":"区/县"
},
{
"field":"addressDetail",
"edit":"text",
"title":"详细地址"
},
{
"field":"contractStart",
"templet":"#contractStart",
"title":"开工日期",
"rowspan":2
},
{
"field":"contractEnd",
"templet":"#contractEnd",
"title":"竣工日期",
"rowspan":2
},
{
"field":"realStart",
"templet":"#realStart",
"title":"开工日期",
"rowspan":2
},
{
"field":"realEnd",
"templet":"#realEnd",
"title":"竣工日期",
"rowspan":2
},
{
"field":"yearOverArea",
"edit":"text",
"title":"自年初累计_竣工面积（m2）"
},
{
"field":"yearOverNumber",
"edit":"text",
"title":"个数"
},
{
"field":"monthOverArea",
"edit":"text",
"title":"本月_竣工面积（m2）"
},
{
"field":"monthOverNumber",
"edit":"text",
"title":"个数"
},
{
"field":"overValue",
"edit":"text",
"title":"竣工产值（万元）"
},
{
"field":"startDoingValue",
"edit":"text",
"title":"自开工累计"
},
{
"field":"yearDoingValue",
"edit":"text",
"title":"自年初累计完成"
},
{
"field":"monthDoingValue",
"edit":"text",
"title":"本月"
}
]
]因为这是一个三级表单的表头，所以看上去很长，但实际上结构非常清晰。这个表头实际页面里是这样的。
整理后我们发现，JSON结构如下图所示：
最外层是一个List，因为表头是三级，所以List内有3个元素，均为List，我们继续看内层List内部的结构：
如图所示，内部是一个对象。也就是说，表头的JSON结构要稍微复杂一些，嵌套关系是 外数组–内数组–对象。
这里我们要做的是，找出表头内所有含有field属性的对象。因为表单是动态的，所以我们拿到这些field也就相当于拿到了Map的Key，可以去表单数据的JSON串中获取相应的数据。
代码如下：
public static List<String> parseJsonHead(String jsonHead){
JSONArray jArray = JSON.parseArray(jsonHead);//将字符串转化为JSONArray对象，这里是外层数组
List<Map<String, Object>> list = new ArrayList<>();
List<String> res = new ArrayList<>();
for(int i=0;i<jArray.size();i++){//循环，对外层数组进一步拆分
JSONArray jArr = jArray.getJSONArray(i);//得到内层数组对象
for(int j=0;j<jArr.size();j++){
JSONObject jsonObject = jArr.getJSONObject(j);//得到具体的每个对象，存入list
list.add(jsonObject);
}
}
list.forEach(v -> {//这里我们遍历得到的list，若field不为空，则存入结果数组，最终我们得到存有字段名的数组List<String>
String field = (String)v.get("field");
if(field!=null){
res.add(field);
}
});
return res;
}具体步骤见注释。值得注意的是，由外层数组获取内层数组的部分jArray.getJSONArray(i); 我们可以看到JSONArray类型也是可以调用getJSONArray这个api的，这正好与我们的理解相符，数组内部既可以是数组，也可以是对象。
Over~
