요약: 이 기사는 원래 Grape City의 기술 팀이 CSDN에 게시했습니다. 재인쇄 출처를 명시하십시오: Grape City 공식 웹사이트 Grape City는 개발자에게 전문적인 개발 도구, 솔루션 및 서비스를 제공하여 개발자에게 권한을 부여합니다.
양식 채우기 요구 사항에서 채울 수 있는 영역은 현재 로그인한 사용자의 다양한 수준에 따라 다릅니다. 프런트 엔드 테이블 컨트롤 SpreadJS를 기반으로 하는 이 기사에서는 프런트 엔드 권한 분할 편집을 위한 구현 체계를 소개합니다.
(브라우저 측의 SpreadJS 표시 효과)
SpreadJS가 무엇인지 살펴보겠습니다.
SpreadJS는 Excel과 유사한 프런트 엔드 테이블 컨트롤로, 작동 및 기능이 Excel과 매우 유사하지만 Office와는 완전히 독립적입니다. SpreadJS를 프런트 엔드 프로젝트에 통합하고 배포한 후 사용자는 H5 표준을 충족하는 브라우저(Chrome, Firefox, Edge 등)를 PC에 설치하기만 하면 브라우저 측에서 SpreadJS를 열 수 있습니다.
SpreadJS에 대해 더 깊이 이해하고 싶다면 공식 온라인 경험 주소 및 학습 가이드를 열 수 있습니다.다음으로 권한 기반 편집의 구체적인 구현 계획을 소개합니다.
SpreadJS를 사용하는 이유는 무엇입니까?
권한 편집을 위한 기본 양식 구성 요소로 SpreadJS를 선택한 이유는 주로 비즈니스 직원에게 영감을 받았습니다. Excel에는 시트 보호라는 메커니즘이 있습니다. 양식 보호는 셀 잠금 상태와 워크시트의 보호 상태의 조합으로, 셀 편집 가능 여부를 제어하는 데 사용할 수 있습니다. 이 편집 가능한 제어의 최소 세분성은 셀 레벨에 도달할 수 있습니다.
그것을 달성하는 방법?
SpreadJS는 양식 보호 기능이 있는 Excel과 유사한 양식 컨트롤입니다. 편집 제어를 위한 핵심 API에는 주로 셀 잠금 및 양식 보호가 포함됩니다 . 편집 권한 제어를 전체적으로 다음과 같은 세 가지 범주로 나눕니다.
(1) 워크시트 전체를 편집할 수 없습니다.
Excel 파일을 통합 문서라고 하며 통합 문서에는 여러 워크시트가 포함됩니다. 기본적으로 워크시트 잠금 상태는 true이며, 이때 전체 워크시트를 편집 불가능으로 설정하려면 워크시트 보호와 관련된 코드만 실행하면 됩니다.
(전체 워크시트는 SpreadJS를 통해 편집할 수 없습니다.)
위 그림의 빨간색 박스에 표시된 코드를 통해 Sheet1의 모든 셀을 더 이상 편집할 수 없게 됩니다. 설정 후에도 셀을 편집할 수 있는 경우 원본 엑셀 파일에서 기본 셀의 잠금 상태가 false로 변경되었기 때문일 수 있습니다. 이때 코드를 사용하거나 마우스 오른쪽 버튼을 클릭하여 설정할 수 있습니다. 셀 형식 → 셀 보기 보호.잠금 상태.
전체 통합 문서를 편집할 수 없어야 하는 경우 통합 문서에서 각 워크시트의 보호 상태를 설정하기 위해 순환하기만 하면 됩니다.
(2) 일부 셀을 편집할 수 있음을 인식
앞서 언급한 바와 같이 편집 불가 원칙은 셀 잠금과 양식 보호가 동시에 적용된다는 것입니다. 편집 가능한 대상 셀이 이 AND 조건을 만족하지 않는 한 편집할 수 있습니다. 양식 보호는 워크시트의 제어 매개변수로 셀에 해당할 수 없으므로 조건이 실패하도록 하려면 해당 셀의 잠금 상태를 false로 설정하기만 하면 됩니다.
(일부 셀은 SpreadJS를 통해 수정 가능)
위 그림의 노란색 영역에 있는 코드를 통해 A1:C6 셀은 편집 가능, 다른 셀은 편집 불가 조건을 설정할 수 있는데 여기 파일의 기본 셀 잠금 상태는 참입니다. 효과를 보려면 다른 셀의 잠금 상태를 확인해야 하며 상태가 false로 변경되었는지 여부, 그렇다면 다른 셀의 잠금 상태를 true로 변경해야 합니다.
(3) 일부 셀은 편집할 수 없음을 인식
기본 셀 잠금 상태는 true로 되어 있는데 수정이 불가능한 셀이 적은 경우에는 워크시트의 기본 셀 잠금 상태를 false로 변경한 후 수정할 수 없는 일부 셀의 잠금 상태를 true로 설정하는 것을 권장합니다.
(일부 셀은 SpreadJS를 통해 편집할 수 없습니다.)
위 그림의 빨간박스 안의 코드를 통해 오렌지색 영역은 수정가능, 수정불가 영역은 조건을 구현할 수 있다. 여러 영역을 편집 가능하도록 설정해야 하는 경우 계속해서 영역 잠금(잠금) 관련 API를 호출할 수 있습니다.자세한 UI 구현 설정 및 코드는 SpreadJS 공식 포럼의 관련 튜토리얼 링크를 참조하십시오.
간단한 요약
셀 편집 제어를 이해한 후 다음으로 할 일은 로그인 사용자 권한을 기반으로 편집 제어를 구현하기 위해 사용자 권한을 셀과 연결하는 것입니다. 웹 측의 요구를 충족시키기 위해 SpreadJS는 표시할 필요가 없는 셀과 관련된 일부 추가 정보를 기록하는 데 사용되는 셀 태그 (Tag) 속성을 지원합니다. 셀의 관련 정보를 기록할 수 있습니다. 태그 셀의 편집 권한. 전반적인 구현 아이디어는 다음과 같습니다.
(1) 미리 셀 태그에 권한 관련 정보를 설정합니다. 이 솔루션에서 편집 가능한 사용자는 문자열 형식으로 셀에 기록됩니다. 예를 들어 셀 태그가 'user1'이면 현재 셀은 1레벨 사용자가 편집할 수 있음을 의미하고, 셀 태그가 'user1, user2'이면 현재 셀은 두 수준 모두 편집 가능함을 의미합니다. 첫 번째 수준 사용자와 두 번째 수준 사용자.
(2) 현재 셀 태그에 사용자 수준 태그 정보가 포함되어 있는지 탐색하여 쿼리합니다. 포함된 경우 현재 사용자가 이 셀을 편집할 수 있으며 해당 셀에 해당하는 잠금 상태를 거짓으로 변경할 수 있음을 나타냅니다.
전체 구현 데모를 보려면 여기를 클릭하십시오 . 자세한 코드를 이해하려면 이동하십시오. 이 문서는 권한 편집에 대한 참조 구현 아이디어를 제공하며 더 나은 구현 방법이 있으면 댓글 영역에서 논의하십시오.
확장 링크:
Spring Boot 프레임워크에서 Excel 서버 측 가져오기 및 내보내기 구현