Laui 테이블 반전의 간단한 구현

테이블 반전 또는 행 및 열 변환은 아마도 여러분에게 익숙할 것입니다. 먼저 렌더링을 살펴보겠습니다.

#🎜 🎜##🎜🎜 #테스트 페이지: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled

제목에 언급된 간단한 구현 방법에 비해, 행 및 열 변환을 위한 테이블 구현 방법의 주요 아이디어는 아마도 원래 테이블 정의가 변경되지 않고 그대로 유지된 다음 데이터 레코드가 열 구성으로 사용되기 때문에 데이터를 통해 새로운 열 구성이 재생성된다는 것입니다.

그런 다음 원래 열 구성을 결합하여 새로운 최종 데이터와 새 열 구성을 생성하고 마지막으로 테이블 내부 렌더링을 사용하여 렌더링합니다. 기본적으로 실제로 일어나는 일은 js가 구성과 데이터를 결합하고 이를 반전시킨 다음 렌더링하는 것입니다. 이론적으로는 가능하지만 실제로 구현하기는 어렵습니다.

생각해 보면 그렇게 복잡할 필요는 없습니다. 일부 스타일 컨트롤을 사용하여 테이블을 뒤집을 수도 있습니다. 하지만 Layui의 테이블 보기 전체 구조는 더 복잡하며 여러 개의 항목으로 구성됩니다. 물론, 단순성은 상대적이며 이 방법에는 몇 가지 단점도 있습니다. 이에 대해서는 나중에 설명하겠습니다.

구현 아이디어를 먼저 살펴보겠습니다.

첫번째이자 가장 중요한 것은 스타일입니다. 가장 중요한 것은 쓰기 모드를 사용하는 것입니다. 현재 대략적인 스타일은 다음과 같습니다:

가장 중요한 것은 .layui-table-view에 수직 클래스가 추가되면 쓰기 순서를 변경하는 것입니다. 그런 다음layui에 대한 테이블의 일부 다른 부분이 해당 스타일 처리에 추가됩니다.

스타일을 추가하고 나면 기본룩은 있지만 아직 다듬어져야 할 부분이 있습니다

주로 전체 통계 부분에서는 오른쪽으로 이동해야 합니다. 하지만 그는 속하지 않습니다. 상자 안에 있으므로 상단을 설정하는 것이 더 어렵습니다. 스타일을 사용해 보았지만 소용이 없었습니다. 마지막으로 헤더 툴바의 높이를 기준으로 상단을 설정하기 위해 js로 전환했습니다.

다른 하나는 원래 테이블 헤더와 통계 행을 똑바로 세워서 왼쪽과 오른쪽 열로 분리하는 것입니다. 이는 필연적으로 콘텐츠의 표시 범위에 영향을 미치므로 스타일이 제대로 처리되지 않습니다. 또한 js Dynamics를 사용하여 주요 부분의 여백 값을 조정하는 방법은 대략 다음과 같습니다.

위 코드는 실제로 단순히 뷰 컨테이너의 세로 스타일을 전환하는 것입니다. 그런 다음 그에 따라 일부 컨테이너의 스타일을 조정합니다. 기본적으로 이 두 조각은 기본적인 원래 효과를 얻을 수 있지만 실제 세부 사항은 여전히 ​​많습니다. 또한 설명에 따르면 이는 단지 예비 구현일 뿐이며 나중에 캡슐화 프로세스가 있을 것이라고 합니다. .

드디어 두 개의 버튼을 사용하기로 결정하고 두 개의 모니터링 프로세스를 작성한 이유는 주로 플러그인 전체를 사용하고 싶지 않고 사용하려는 친구가 있다면 이해의 편의를 위함입니다. 별도의 기능을 사용하면 비교적 원시적인 구현을 참조한 다음 자체 프로젝트에 적합한 방법을 캡슐화할 수 있습니다.

전체 플러그인을 기반으로 하는 현재 캡슐화된 메서드 호출은 다음과 같습니다.

정확히 수행되는 작업:

# 🎜🎜#코드의 일반적인 의미는 모든 테이블 또는 단일 테이블을 변환할 수 있다는 것이며, 두 번째 매개변수 반전에 따라 전달되지 않으면 불리언이 전달되면 반대 효과를 얻게 됩니다. 실제 값이 우선합니다. true: reverse, false: 반전 없음, 마지막 호출은 table.Class

다음 단계에서는 몇 가지 세부 사항을 처리하는 것입니다. 이전에 발생하지 않았던 몇 가지 문제가 폭발합니다

첫 번째는 크기를 조정할 때 역효과인 경우 업데이트해야 하는 이유는 일부 스타일이 js를 사용하여 설정되어 있기 때문입니다. 헤더 도구 모음의 실제 높이는 제한되지 않습니다. 즉, 변경될 경우 이전에 설정된 상단이 부적절합니다.

그래서 현재 처리는 크기 조정 중에 그에 맞게 재조정하는 것입니다. 나중에 최적화 계획이 있고 순수 CSS 처리로 조정하는 경우 이 단계는 생략할 수 있습니다.

또 다른 사항은 초기화 시 되돌릴 수 있나요? 이는 일반적으로 문제가 되지 않습니다. 매개변수가 상태를 결정하고 렌더링이 완료된 후 이를 처리하기 위해 인스턴스의 역방향을 호출하면 됩니다. 물론 새로 추가된 속성에 대한 자세한 내용이 있으므로 다시 요청해야 합니다. 스마트 오버로딩 카테고리에 속하는 속성이므로 처리 추가에도 주의해야 합니다.

done process

지능형 다시 로드 구성 처리:

효과:

폭발된 또 다른 문제는 다음과 같습니다. 현재 확인란이 고정 열인 경우 테이블에는 실제로 두 개의 열이 있습니다. 하나는 고정 열에 있고 다른 하나는 체크박스에 메인인데 클릭시 다른 쌍둥이 형제나 섀도우와 동기화가 되지 않습니다.

행 및 열 변환 후에는 실제 고정 열이 숨겨지기 때문에 이때 작업은 기본입니다. 그러면 작업이 다른 상태로 돌아간 후에는 일부 "이상"이 나타날 수 있습니다. Lay-Filter의 경우 form.on을 사용하여 다음과 같이 모니터링하고 처리할 수 있습니다.

table.on과 충돌하지 않습니다. 더욱 문제는 다음 단일 확인란이lay를 추가하지 않고 생성된다는 것입니다. -filter to them 이번에는 좋은데 모니터가 감지도 못하는데 방법은 사람들이 생각하는 방식입니다. 없으면 동적으로 추가하면 다음과 같은 처리가 됩니다

이벤트 처리와 결합:

layui 프레임워크에 대한 자세한 내용을 보려면

layui 프레임워크 빠른 시작을 따르세요.

위 내용은 Laui 테이블 반전의 간단한 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!