Dynami c и сложный диапазон строк в HTML таблице из массива json - PullRequest
Новая
       9

Dynami c и сложный диапазон строк в HTML таблице из массива json

0 голосов
/ 18 июня 2020

Я хотел добиться такого же результата, как показано на изображении ниже.

Ожидаемый результат:

Expected result

Вопрос: Ищу Jquery или javascript решение для создания таблицы Dynami c вместе с 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>

Это результат

Ответы [ 2 ]

0 голосов
/ 18 июня 2020

Я пытался решить вашу проблему. Ниже приведены изменения в функции createRow HTML. 

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/

0 голосов
/ 18 июня 2020

Вы можете использовать logi c двоичного дерева. Для вас проблема может отслеживать все узлы без дочерних элементов, на верхнем родительском, добавляя +1 к rowspan к любому родительскому

в вашем примере node без дочерних элементов 

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

первый родитель получает 2 точки "rowspan" ", следующий родитель имеет сумму диапазонов строк его дочерних элементов

Algoritm:

1 обход всех узлов,

2, если найденный узел без дочерних элементов пересекает всех его родителей и добавляет +1 в "rowspan"

...