정렬 가능한 라이브러리를 사용하여 행 순서를 변경하지 않고 테이블 열의 드래그 앤 드롭 정렬을 구현하는 방법은 무엇입니까?

정렬 가능한 라이브러리를 사용하여 테이블 열의 드래그 앤 드롭 순서를 구현하고 행을 변경하지 않도록하십시오.

많은 개발자들이 드래그 앤 드롭 분류를 위해 정렬 가능한 라이브러리를 사용하는 경우, 행을 변경하지 않은 상태에서만 드래그 앤 드롭 정렬의 기능을 구현해야합니다. 이 기사는 정렬 가능한 라이브러리를 사용 하여이 기능을 구현하는 방법을 자세히 설명합니다.

문제 설명 :

테이블 데이터가 2 차원 배열로 저장된다고 가정하면, 목표는 "value11"열을 "value22"열의 위치로 이동하는 것과 같은 열의 드래그 앤 드롭 정렬을 구현하는 것입니다. 최종 효과는 두 열이 교환되지만 행 데이터는 변경되지 않은 것입니다. (그림 예제는 여기서 생략됩니다)

해결책:

핵심 아이디어는 정렬 가능한 라이브러리를 사용하여 열 인덱스를 정렬 한 다음 새로운 인덱스 순서에 따라 테이블 데이터를 다시 렌더링하는 것입니다. 정렬 가능한 라이브러리는 배열 요소의 순서대로 작동합니다. 정렬 가능한 이동 배열 요소에서 직접 작동하지 않지만 데이터를 재구성하기 위해 제공하는 인덱스 정렬 결과를 사용합니다.

데이터 구조가 다음과 같다고 가정합니다.

 데이터를하자 = [
  [ 'value11', 'value12', 'value13'],
  [ 'value21', 'value22', 'value23'],
  [ 'value31', 'value32', 'value33']
];

정렬 가능한 라이브러리를 사용한 후 새 열 인덱스 순서를 얻는다고 가정합니다.

 Neworder = [1, 0, 2]; // 정렬 가능한에 의해 반환 된 새 순서는 두 번째 열이 이제 처음이라는 것을 의미합니다.

newOrder 에 따라 테이블 데이터를 재건하십시오.

 let newData = data.map (row => row.map ((_, index) => row [neworder [index]]);

newData 에는 이제 재정렬 열 데이터가 포함되어 있으며 newData 로 테이블을 다시 렌더링 할 수 있습니다. 배열 인덱스는 0에서 시작하고 표시 할 때 테이블을 1에 추가해야 할 수도 있습니다. 정렬 가능한 라이브러리는 인덱스 분류를 담당하며 데이터 재구성은 정렬 가능한 인덱스 순서에 따라 수동으로 수행해야합니다.

이런 식으로, 정렬 가능한 라이브러리의 드래그 앤 드롭 함수를 사용하여 행 순서를 변경하지 않고 테이블 열의 정렬을 달성하여 예상 결과를 달성 할 수 있습니다. 핵심은 정렬 가능한 라이브러리가 데이터 자체가 아닌 인덱스에서 작동한다는 것을 이해하는 것입니다. 개발자는 인덱스에 따라 데이터를 재구성해야합니다.

위 내용은 정렬 가능한 라이브러리를 사용하여 행 순서를 변경하지 않고 테이블 열의 드래그 앤 드롭 정렬을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!