[javascript] 유동적인 테이블 셀병합을 위한 데이터 가공

예전에 셀병합을 자동으로 해주는 소스를 올린 적이 있다.([jQuery] 유동적인 테이블 셀병합 - rowspan (tistory.com)) 데이터가 무엇인지에 따라 병합을 해주다보니, 실데이터가 달라도 세세하게 병합할 부분을 조절하고 싶은데 그러지 못했다.

그래서 만든 소스가 아래의 소스. 한땀 한땀 코딩했다.

기준 데이터는 실데이터가 아닌, 그룹sort("groupSort")와 세부sort("detailSort").

데이터의 key 이름이 달라도 사용할 수 있도록 구현했다.

필요하신 분들은 갖다 쓰시길.

 

document.addEventListener("DOMContentLoaded", function(event) {
  let dataList = {"dataList":[{"groupSort":1,"detailSort": 1,"pName":"김땡땡","addr":"서울특별시 강남구 어딘가 1번지"},{"groupSort":1,"detailSort": 2,"pName":"이땡땡","addr":"인천광역시 부평구 가나동 12-3번지"},{"groupSort":2,"detailSort": 1,"pName":"박땡땡","addr":"서울특별시 성동구 행복동 138-1번지"},{"groupSort":3,"detailSort": 1,"pName":"최땡땡","addr":"경기도 수원 어딘가"},{"groupSort":3,"detailSort": 2,"pName":"황땡땡", "addr":"경기도 이천시 수영장"},{"groupSort":4,"detailSort": 1,"pName":"심땡땡", "addr":"충청남도 천안시 유리하우스"},{"groupSort":4,"detailSort": 2,"pName":"오땡땡", "addr":"경기도 과천시 과일나라"},{"groupSort":5,"detailSort": 1,"pName":"지땡땡", "addr":"제주도 어딘가 피부나라"}]};
  let groupingDataList = getGroupDataList(dataList.dataList, "groupSort", "detailSort");
  console.log(groupingDataList);
});


function getPropValue(obj, prop) {
  return obj[prop];
}

function settingCntInGrDispN(dataList, standardGroupKey, standardValue, standardDetailKey, cntInGr){
  dataList.map((currElem, index) => {
    if(standardValue == getPropValue(currElem, standardGroupKey)){
      // if(currElem.sort == 1){
      if(getPropValue(currElem, standardDetailKey) == 1){
        dataList[index].cntInGr = cntInGr;
      }else{
        dataList[index].displayNone = "style='display: none;'";
      }
    }
  });
}ㅁ

function getGroupDataList(dataList, standardGroupKey, standardDetailKey){
	var cntInGr = 1;
  var standardValue = "";
  var trClassStr = "";
  for(var i=0; i<dataList.length; i++) {
    if(i==0){
      standardValue = getPropValue(dataList[0], standardGroupKey); // 가장 첫행은 데이터 비교를 위해 일단 넣어줌.
      trClassStr = "fff"; // 가장 첫행은 데이터 비교를 위해 일단 넣어줌.
      dataList[0].trClass = trClassStr; // row 배경색
    }

    let nowValue = getPropValue(dataList[i], standardGroupKey);
    if(standardValue == nowValue && i !== 0){ // 같은 그룹이라면,
      cntInGr++;
      dataList[i].trClass = trClassStr; // row 배경색

      // 마지막 로우라면.
      if(i == dataList.length-1) settingCntInGrDispN(dataList, standardGroupKey, standardValue, standardDetailKey, cntInGr);
    }else{ // 새로 시작하는 그룹이라면,
      settingCntInGrDispN(dataList, standardGroupKey, standardValue, standardDetailKey, cntInGr);
      if(trClassStr == "fff"){
        trClassStr = "f5f5f5";
      }else if(trClassStr == "f5f5f5"){
        trClassStr = "fff";
      }
      dataList[i].trClass = trClassStr; // row 배경색

      standardValue = nowValue; // 비교할 그룹번호 리셋
      cntInGr = 1; // 리셋
    }
  }

  return dataList;
}

 

데이터는 아래와 같이 가공된다.

// Before!
{
	"dataList": [{
		"groupSort": 1,
		"detailSort": 1,
		"pName": "김땡땡",
		"addr": "서울특별시 강남구 어딘가 1번지"
	}, {
		"groupSort": 1,
		"detailSort": 2,
		"pName": "이땡땡",
		"addr": "인천광역시 부평구 가나동 12-3번지"
	}, {
		"groupSort": 2,
		"detailSort": 1,
		"pName": "박땡땡",
		"addr": "서울특별시 성동구 행복동 138-1번지"
	}, {
		"groupSort": 3,
		"detailSort": 1,
		 "pName": "최땡땡",
		"addr": "경기도 수원 어딘가"
	}, {
		"groupSort": 3,
		"detailSort": 2,
		"pName": "황땡땡",
		"addr": "경기도 이천시 수영장"
	}, {
		"groupSort": 4,
		"detailSort": 1,
		"pName": "심땡땡",
		"addr": "충청남도 천안시 유리하우스"
	}, {
		"groupSort": 4,
		"detailSort": 2,
		"pName": "오땡땡",
		"addr": "경기도 과천시 과일나라"
	}, {
		"groupSort": 5,
		"detailSort": 1,
		"pName": "지땡땡",
		"addr": "제주도 어딘가 피부나라"
	}]
};


// After!
{
	"dataList": [{
		"groupSort": 1,
		"detailSort": 1,
		"pName": "김땡땡",
		"addr": "서울특별시 강남구 어딘가 1번지",
		"cntInGr": 2, // 해당 groupSort가 같은 데이터가 몇 개가 있는지? 표로 뿌릴 때 rowspan에 값을 넣어주기 위함.
		"trClass": "f5f5f5" // 로우의 색깔을 칠해주기 위한 클래스
	}, {
		"groupSort": 1,
		"detailSort": 2,
		"pName": "이땡땡",
		"addr": "인천광역시 부평구 가나동 12-3번지",
		"displayNone": "style='display: none;'", // 위의 김땡땡과 같은 그룹이므로 display none 데이터를 심어줌
		"trClass": "f5f5f5" // 위의 김땡땡과 같은 색깔 클래스
	}, {
		"groupSort": 2,
		"detailSort": 1,
		"pName": "박땡땡",
		"addr": "서울특별시 성동구 행복동 138-1번지",
		"cntInGr": 1, // 해당 groupSort가 같은 데이터가 몇 개가 있는지?
		"trClass": "fff" // 위의 groupSort 1번과 다른 2번이기에, 다른 색깔 클래스
	}, {
		"groupSort": 3,
		"detailSort": 1,
		"pName": "최땡땡",
		"addr": "경기도 수원 어딘가",
		"cntInGr": 2, // 해당 groupSort가 같은 데이터가 몇 개가 있는지?
		"trClass": "f5f5f5" // 위의 groupSort 2번과 다른 3번이기에, 다른 색깔 클래스
	}, {
		"groupSort": 3,
		"detailSort": 2,
		"pName": "황땡땡",
		"addr": "경기도 이천시 수영장",
		"displayNone": "style='display: none;'", // 위의 최땡땡과 같은 그룹이므로 display none 데이터를 심어줌
		"trClass": "f5f5f5" // 위의 최땡땡과 같은 색깔 클래스
	}, {
		"groupSort": 4,
		"detailSort": 1,
		"pName": "심땡땡",
		"addr": "충청남도 천안시 유리하우스",
		"cntInGr": 2,
		"trClass": "fff"
	}, {
		"groupSort": 4,
		"detailSort": 2,
		"pName": "오땡땡",
		"addr": "경기도 과천시 과일나라",
		"displayNone": "style='display: none;'",
		"trClass": "fff"
	}, {
		"groupSort": 5, // 얘는 단독이라 cntInGr도 displayNone도 없음.
		"detailSort": 1,
		"pName": "지땡땡",
		"addr": "제주도 어딘가 피부나라",
		"trClass": "f5f5f5"
	}]
};