• 검색

Excel에서 오버플로 셀

Excel에서 내용이 긴 셀의 경우, 인접한 빈 셀로 내용이 넘어가는 것을 볼 수 있습니다.

물론 인접 셀이 비어 있지 않으면 아래와 같이 셀 내용이 잘리는 것을 볼 수 있습니다.

FlexGrid에서 오버플로 셀 

고객분들이 FlexGrid 에서 셀 오버플로 지원에 대해 질문했을 때, 첫 번째 아이디어는 셀 병합을 사용하여 수행하는 것이 었습니다.

그러나 셀이 인접한 셀로 넘치게하는 것은, 셀을 병합하는 것과 다릅니다. 

만약에 셀 병합으로 구현하는 경우, 사용자는 셀 B11에 내용을 입력 할 수 없게 됩니다. 

이 차이로 인해 우리는 다른 접근법을 사용하기로 결정했습니다.

1. FlexGrid 의 formatItem 이벤트를 사용하여 비어있는 셀 옆에 비어 있지 않은 셀을 감지하고, 해당 셀에 "spill"클래스를 추가하십시오.
2. CSS를 사용하여 "spill"클래스가있는 셀이 인접한 셀로 오버플로되도록 합니다.

formatItem의 이벤트는 렌더링 되는 그리드와 셀의 참조를 제공합니다. 이를 통해, 우리는 비어 있지 않은 셀 주변의 비어 있는 셀을 찾을 수 있습니다.

// add "spill" class if this cell is not empty and the next one is
theGrid.formatItem.addHandler((s, e) => {
  if (e.panel == s.cells) {
    var spill = e.col < s.columns.length - 1 && 
        e.cell.innerHTML && !s.getCellData(e.row, e.col + 1);
    wijmo.toggleClass(e.cell, 'spill', spill);
  }
}

위의 코드는 먼저 셀이 "cell" 패널에 속하는지 확인합니다. 그런 다음 셀이 비어있지 않고, 다음으로 빈 셀이 오는 경우 , "spill"변수를 true로 설정합니다. 마지막으로 셀 요소에서 "spill"클래스를 설정하거나 해제합니다.

다음 단계는 CSS 규칙에서 "spill"클래스 식별자를 사용하여, 셀이 오버플로되도록하는 것입니다. 이것은 조금 복잡할 수 있습니다.

먼저, "spill"셀을 오버플로시키는 규칙을 추가합니다. "overflow"속성을 "visible"로 설정하면됩니다 (기본적으로 잘립니다). 또한 인접한 빈 셀을 렌더링하도록 z-index를 설정합니다.

.wj-cell.spill {
  overflow: visible;
  z-index: 1; /* render over empty cells */
}

또한, spill 셀 위에 렌더링되도록, 그리드 선택 윤곽 요소 및 헤더 패널의 z-index 을 조정해합니다.

.wj-flexgrid .wj-marquee
.wj-flexgrid .wj-colheaders,
.wj-flexgrid .wj-rowheaders,
.wj-flexgrid .wj-topleft {
  z-index: 2; /* render over spill cells */
}

마지막 단계는 확장 선택에서 셀에 적용되는 스타일을 변경하여, 전경색이 검은 색으로 유지되고, 넘쳐나는 내용이 계속 표시되도록하는 것입니다.

.wj-state-multi-selected {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
}

이제 FlexGrid도 Excel과 같은 선택 가능하고, 편집 가능한 오버플로우 셀을 직원합니다.

이것을 아래 jsfiddle 사이트에서 직접 보고, 소스코드를 확인할 수 있습니다.

• https://jsfiddle.net/Wijmo5/j7Lp4k8s/