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

Question

I wanted to achieve similar result as shown in below image.

Expected result:

Question: Looking for Jquery or javascript solution to create dynamic table along with Rowspan. I am facing issue to get the parent row and add the rowspan.

Your help is much appreciated.

Here is my JSON format and what I am trying to achieve:

 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>

This is the result

Answer 1

I've tried solving your problem. Below are the changes in createRowHTML function.

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();
});

I hope this is helpful to you.

Working example: http://jsfiddle.net/w8r2a9vs/

Answer 2

You can use logic of binary tree. For you problem can trace all nodes without children, on top parent, adding +1 to rowspan to any parent

in your example node without childrens

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

first parent receive 2 rowspan "points", next parent have summ of rowspans of his children

Algoritm:

1 traversal all nodes,

2 if finded node without childres travers all his parents and add +1 to "rowspan"