来自json数组的HTML表中的动态和复杂行跨度

Question

我想达到如下图所示的类似结果。

预期结果：

问题：寻找 Jquery 或 javascript 解决方案来创建动态表以及 Rowspan。我面临获取父行并添加行跨度的问题。

非常感谢您的帮助。

这是我的 JSON 格式以及我想要实现的目标：

var data={"result": [
    {
      "RMP_MASTER_WILAYAH_ID": "20190402080337958516",
      "RMP_MASTER_WILAYAH_KODE": "02",
      "RMP_MASTER_WILAYAH_detail": [
        {
          "RMP_MASTER_WILAYAH_ID": "20190402080403561417",
          "RMP_MASTER_WILAYAH": "KUALA ENOK",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190329144213331884",
              "RMP_MASTER_PERSONAL_NAMA": "YANTO KHO",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190329144712243937",
              "RMP_MASTER_PERSONAL_NAMA": "USMAN",
            }
          ]
        },
        {
          "RMP_MASTER_WILAYAH_ID": "20190402080355461744",
          "RMP_MASTER_WILAYAH": "ENOK",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190329150712446114",
              "RMP_MASTER_PERSONAL_NAMA": "NURDIN",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190329151404711228",
              "RMP_MASTER_PERSONAL_NAMA": "H. HARUNA RASYID",
            }
          ]
        },
        {
          "RMP_MASTER_WILAYAH_ID": "20190402080411413459",
          "RMP_MASTER_WILAYAH": "PARIT PINANG",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190329153052471217",
              "RMP_MASTER_PERSONAL_NAMA": "SUWANDI",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190329153610274231",
              "RMP_MASTER_PERSONAL_NAMA": "BEDDU",
            }
          ]
        }
      ]
    },
    {
      "RMP_MASTER_WILAYAH_ID": "20190402080607764729",
      "RMP_MASTER_WILAYAH_KODE": "03",
      "RMP_MASTER_WILAYAH_detail": [
        {
          "RMP_MASTER_WILAYAH_ID": "20190402132520833736",
          "RMP_MASTER_WILAYAH": "PULAU KIJANG",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190402132304152471",
              "RMP_MASTER_PERSONAL_NAMA": "H. BAHARUDIN",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190402132622621585",
              "RMP_MASTER_PERSONAL_NAMA": "HM. NUR HDP",
            }
          ]
        },
        {
          "RMP_MASTER_WILAYAH_ID": "20190402140031812644",
          "RMP_MASTER_WILAYAH": "BENTENG",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190402135920441438",
              "RMP_MASTER_PERSONAL_NAMA": "SURGAWI",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20200325091038411761",
              "RMP_MASTER_PERSONAL_NAMA": "M. TANG",
            }
          ]
        },
        {
          "RMP_MASTER_WILAYAH_ID": "20190402140141611248",
          "RMP_MASTER_WILAYAH": "KOTA BARU",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190402140121737955",
              "RMP_MASTER_PERSONAL_NAMA": "H. RAMLI",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190402140908815557",
              "RMP_MASTER_PERSONAL_NAMA": "H. SYAMSUDDIN",
            }
          ]
        }
      ]
    }
  ]
};
function createRowHTML(){
          var record='';	
					var record1Nya='';	
					var record_detailNya='';
					
					var record1=[];	
					var record_detail=[];
					
					var record1_relasi=[];	
					var record_relasi_detail=[];	
					
					var jlhRowRelasi=[];
					var jlhRowDetailWilayah=0;
					var jlhRowSpan=0;
          
					for(i=0;i<data.result.length;i++)
					{
						var jlhRowDetailWilayah=data.result[i].RMP_MASTER_WILAYAH_detail.length;
						for(iDetail=0;iDetail<data.result[i].RMP_MASTER_WILAYAH_detail.length;iDetail++)
						{
							jlhRowRelasi[i]=data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi.length;
							for(iRelasi=0;iRelasi<data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi.length;iRelasi++)
							{
								if(iRelasi==0)
								{
									record1_relasi[i] = record1_relasi[i]+"<td>"+
																			data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi[iRelasi].RMP_MASTER_PERSONAL_NAMA+
																	"</td>";
								}else
								{
									record_relasi_detail[i] = record_relasi_detail[i]+"<tr>"+
												"<td>"+
													data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi[iRelasi].RMP_MASTER_PERSONAL_NAMA+
												"</td>"+
											"</tr>";
								}
							}
							
							
							if(iDetail==0)
							{
								record1[i] = record1[i]+"<td rowspan='"+jlhRowRelasi[i]+"'>"+
													data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH+
											"</td>"+record1_relasi[i];
							}else
							{
								record_detail[i] = record_detail[i]+"<tr>"+
											"<td rowspan='"+jlhRowRelasi[i]+"'>"+
												data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH+
											"</td>"+
										"</tr>"+record_relasi_detail[i];
							}
						}
							
						record1Nya=record1[i];
						record_detailNya=record_detail[i];
						
				
						jlhRowSpan=parseInt(jlhRowDetailWilayah)+parseInt(jlhRowRelasi);
						record = record+"<tr>"+
											"<td rowspan='"+jlhRowSpan+"'>"+
												data.result[i].RMP_MASTER_WILAYAH_KODE+
											"</td>"+
											record1Nya+
										"</tr>"+record_detailNya;					
					}
					
					
					$("tbody#zone_data").html(record);
}
$(function(){
	createRowHTML();
});

<table>
				<tr>
					<td>Wil</td>
					<td>Lokasi</td>
					<td>Relasi</td>
         </tr>
				<tbody id="zone_data">
				</tbody>
			</table>

这是结果

Answer 1

你可以使用二叉树的逻辑。对于您的问题，可以在顶级父节点上跟踪所有没有子节点的节点，将行跨度 +1 添加到任何父节点

在您的示例节点中没有子节点

        {
          "RMP_MASTER_PERSONAL_ID": "20200325091038411761",
          "RMP_MASTER_PERSONAL_NAMA": "M. TANG",
        }

第一个父母获得 2 个行跨“点”，下一个父母获得他孩子的行跨总和

算法：

1遍历所有节点，

2 如果找到没有子节点的节点遍历他的所有父节点并在“rowspan”中添加 +1

Answer 2

我已尝试解决您的问题。下面是 createRowHTML 函数的变化。

function createRowHTML() {
    var tableContent = "";
    for (var result = 0; result < data.result.length; result++) {
        // calculate rowspan for first cell
        var rowspan = 0;
        var detailLength = data.result[result].RMP_MASTER_WILAYAH_detail.length;
        rowspan += detailLength;
        for (var i = 0; i < detailLength; i++) {
            rowspan += data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi.length;
        }

        // create rows
        tableContent += "<tr><td rowspan=" + parseInt(1 + rowspan) + ">" + data.result[result].RMP_MASTER_WILAYAH_KODE + "</td></tr>";
        var relasiLength = 0;
        for (var i = 0; i < detailLength; i++) {
            relasiLength = data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi.length;
            tableContent += "<tr><td rowspan=" + parseInt(1 + relasiLength) + ">"
                + data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH + "</td></tr>";
            for (var j = 0; j < relasiLength; j++) {
                tableContent += "<tr><td>" + data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi[j].RMP_MASTER_PERSONAL_NAMA + "</td></tr>";
            }
        }
    }
    $("tbody#zone_data").append(tableContent);
}
$(function () {
    createRowHTML();
});

工作示例：http://jsfiddle.net/w8r2a9vs/