遍历结构数据组织成json格式数据

从图中 可以看出该数据深度为4。为每行数据添加一个data-id，可以看树形数据的节点。

遍历思路，获取父节点data-id,组成数组，在根据数组获取子节点数据。具体代码如下

前端代码：

<div class="layui-card">
				<div class="layui-card-header">条件设置</div>
				<div class="layui-card-body">
					<div class="layui-tab">
						<ul class="layui-tab-title">
							<li class="layui-this">一等奖</li>
							<li>二等奖</li>
						</ul>
						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show">
								<div class="layui-form">
									<div class="layui-form-item">
										<button type="button" class="layui-btn layui-btn-normal" id="add_group">添加筛选条件</button>
										<button type="button" class="layui-btn layui-btn-normal">清空条件</button>
									</div>
									<div class="layui-form-item">
										<div class="hug-drop">
											<div class="hug-row"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="hug-bottom-btn">
				<button type="button" class="layui-btn layui-btn-normal save">保存并返回主页面</button>
			</div>
		</div>

树形数据成js方法：

$('#add_group').on('click', function(){
	var len_first =  $('.hug-drop>.hug-row>div').length;
	var num = Date.parse(new Date())/1000;
	if(len_first > 0){
		$('.hug-drop').addClass('active');
		}else if(len_first == 0){
		$('.hug-drop b').hide();
	}
					
	var htmls = '<div class="layui-form-item" data-id="'+ num +'"><h3>且</h3>';
						htmls += '<div class="layui-inline hasdata" data_type="name"><select name=""><option value="A">A</option><option value="B">B</option><option value="C">C</option></select></div>'
						htmls += '<div class="layui-inline hasdata" data_type="operate"><select><option value="=">等于</option><option value=">">大于</option><option value="<">小于</option></select></div>'
						htmls += '<div class="layui-inline hasdata" data_type="value"><select name=""><option value="0">0</option><option value="1">1</option><option value="2">2</option></select></div>'
						htmls += '<div class="layui-inline"><button class="layui-btn layui-btn-primary drop_add drop_add_11" data-type="'+ num +'">添加关联条件</button></div>'
						htmls += '<div class="layui-inline"><span class="drop_del drop_del_11" data-type="'+ num +'"></span></div>'
						htmls += '<div class="hug-row"></div></div>'
						
					$('.hug-drop>.hug-row').append(htmls);
					
					form.render();
				})
				
				// 删除
				$(".hug-drop").on("click", ".drop_del_11", function() {
					$(this).parent().parent().remove();
					var ids = $(this).attr('data-type');
					var len_first =  $('.hug-drop>.hug-row>div').length;
					if(len_first == 0){
						$('.hug-process b').show();
					}else if(len_first == 1){
						$('.hug-drop').removeClass('active');
					}
				})
				
				// 添加关联条件
				$(".hug-drop").on("click", ".drop_add_11", function() {
					var ids = $(this).attr('data-type');
					var len_second =  $('[data-id='+ ids +'] .hug-row>div').length;
					var num2 = Date.parse(new Date())/1000;
					
					if(len_second == 0){
						$('[data-id='+ ids +']').addClass('active');
					}
					var htmls_2 = '';
						htmls_2 += '<div class="layui-form-item" data-id="'+ num2 +'"><h3>或</h3>';
						htmls_2 += '<div class="layui-inline hasdata" data_type="name"><select name=""><option value="A">A</option><option value="B">B</option><option value="C">C</option></select></div>'
						htmls_2 += '<div class="layui-inline hasdata" data_type="operate"><select><option value="=">等于</option><option value=">">大于</option><option value="<">小于</option></select></div>'
						htmls_2 += '<div class="layui-inline hasdata" data_type="value"><select name=""><option value="0">0</option><option value="1">1</option><option value="3">3</option></select></div>'
						htmls_2 += '<div class="layui-inline"><button class="layui-btn layui-btn-primary drop_add drop_add_11" data-type="'+ num2 +'" data-id="'+ ids +'">添加关联条件</button></div>'
						htmls_2 += '<div class="layui-inline"><span class="drop_del drop_del_11" data-type="'+ num2 +'" data-id="'+ ids +'"></span></div>'
						htmls_2 += '<div class="hug-row"></div></div>'
						
					$('[data-id='+ ids +']>.hug-row').append(htmls_2);
					layui.use('form', function(){
						var $ = layui.jquery,
							form = layui.form;
						
						form.render();							
					});
				})
				
				$(".hug-drop").on("click", "h3", function() {
					if($(this).text() == '且'){
						$(this).html('或');
					}else{
						$(this).html('且');
					}
					
				})

该js方法是基于layui,需要引入layui库。

下面是获取树形结构数据生成json的方法

$(".save").on("click",function() {
					var parentJson = [];
					var parent =  $('.hug-drop>.hug-row>div');//第一个父类
					//var son = $('[data-id='+ parent_data_id +'] .hug-row>div');//子类
					if(parent.length > 0){
						var ids=new Array();
						for(var i=0; i<parent.length; i++){
							var parent_main = {};
							var data_id = $(parent[i]).attr("data-id");
							parent_main["data_id"] = data_id;
							var text = parent[i].firstElementChild.innerText;
							parent_main["associate"] = text;
							$(parent[i].children).each(function(ii,vv){
								if($(vv).hasClass("hasdata")){
									var data_type = $(vv).attr("data_type");
									var val = $(vv).find("option:selected").val();
									parent_main[data_type] = val;
								}
							});
							parentJson.push(parent_main);
							ids.push(data_id);
							//子项
							//sonsJson(data_id,0);
						}
						sonsJSON(ids,0);
					}
					console.log(parentJson);
					console.log(result);
				});

 首先获取一级数据组织成json数据，并获取一级数据的data-id组织成数组，既代码中的ids;然后根据data-id，获取子类既二级以上的数据：

function sonsJSON(ids,num){
					if(ids.length > 0){
						eval("var son_json_" +num+ "=" +'[]');
						eval("var ids_" +num+ "=" +'[]');
						for(var i= 0; i< ids.length; i++){
							var evValue =  $('[data-id='+ids[i]+']>.hug-row>div');
							if(evValue && evValue.length> 0){
								for(var j = 0;j<evValue.length;j++){
									var json = {};
									json["parent_data_id"] = ids[i];
									var data_id = $(evValue[j]).attr("data-id");
									eval("ids_"+num).push(data_id);
									json["data_id"] = data_id;
									
									var text = evValue[j].firstElementChild.innerText;
									json["associate"] = text;
									
									$($(evValue[j]).children()).each(function(ii,vv){
										if($(vv).hasClass("hasdata")){
											var data_type = $(vv).attr("data_type");
											var val = $(vv).find("option:selected").val();
											json[data_type] = val;
										}
									});
									eval("son_json_"+num).push(json);
								}
							}
						}
						result["son_"+num] = eval("son_json_"+num);//result为全局变量，定义为：var result= {}
						if(checkDom(eval("ids_"+num))){
							sonsJSON(eval("ids_"+num),num+1);
						}
					}
					//console.log(result);
				}
				//判断该dis下是否有节点
				function checkDom(ids){
					var result = false;
					if(ids.length > 0){
						try{
							for(var i= 0; i< ids.length; i++){
								var evValue =  $('[data-id='+ids[i]+'] .hug-row>div');
								if(evValue && evValue.length> 0){
									result = true;
									throw Error();
								}
							}
						}catch(e){}
					}
					return result;
				}

 由于不知道层级数，所以需要动态的设置json的key值，son_0,son_1....分别对应二级、三级....

最终结果如下：