Ant Design은 편집, 검색 및 위치 지정 기능을 구현하는 트리 구성 요소를 생성합니다.

Ant Design 트리 구성요소를 사용자 정의하여 편집, 검색 및 역위치 지정 기능을 구현하는 방법은 무엇입니까? 다음 기사에서는 트리 구성 요소를 만들고 이러한 기능을 구현하는 방법을 소개합니다. 도움이 되길 바랍니다.

이번에 나무 모양의 디스플레이 기능을 만들어 봤는데 의외로 제품이 아직 미완성이네요.

PD: 뭐요? 확장, 축소 기능만 있나요? 이것이 어떻게 작동할 수 있나요? 우리의 가장 기본적인 것은 편집과 검색을 지원하는 것입니다. 가능하다면 역방향 위치 지정도 가능합니다...

YY: 왜 미리 말하지 않았나요? 요구사항 문서에도 없는데...

PD: 누구 문서가 한 번에 적힌 것 같나요? 어떤 PD가 요구사항을 추가하지 않습니까?

YY: 그렇게 말하지만 일은 그렇지 않습니다...

PD: 아, 시간 낭비하지 말고 그냥 하세요!

YY: ...

위 이야기는 순전히 허구입니다. 유사점이 있으면 댓글란에 메시지를 남겨주세요...

트리 데이터는 폴더, 조직 등 개발에서 비교적 일반적입니다. 구조, 생물학적 분류, 국가, 지역 등 세상 모든 것의 대부분의 구조는 나무 구조입니다. 트리 컨트롤은 계층 관계를 완전히 표시할 수 있으며 확장 및 축소 선택과 같은 대화형 기능을 갖추고 있습니다.

요구사항 분석

• 편집: 추가/수정/삭제/이동
• 검색 기능: 이름/작성자/소유자 필터
• 위치 지정: 탭 역 위치 지정

프로젝트 저장소: https://github.com/peakice/ editable-tree

함수 구현

위의 기능을 실현할 수 있는 메소드 라이브러리와 구성요소가 많이 있습니다. 여기서는 Ant Design의 모든 구성요소인 그중 하나에 대해서만 설명합니다.

• Tree.DirectoryTree 디렉토리 Tree
• 드롭다운 마우스 오른쪽 버튼 클릭 메뉴 컨테이너
• 메뉴 메뉴 내용
• 탭 오른쪽 탭 페이지
• 입력.검색 상자
• 스위치 스위치 연결 상태
• shortid 고유 ID 생성

import { Tree, Dropdown, Menu, Tabs, Input, Switch } from 'antd';import shortid from 'shortid';复制代码

재귀적 방법

트리 행 작동 마지막으로 중요한 전제는 편리한 재귀적 방법을 갖는 것입니다:

/**
 * 如果需要修改tree，action就返回修改后的item， 不修改就不返回
 */export const deepTree = (tree = [], action = () => {}) => {  return tree.map((item) => {    const newItem = action({ ...item }) || item;    if (newItem.children) {
      newItem.children = deepTree(newItem.children, action);
    }    return newItem;
  });
};复制代码

마우스 오른쪽 클릭 메뉴

오른쪽 클릭 메뉴는 제목에 따라 작동하며 Dropdown은 트리의 데이터 소스에 작성되어야 합니다. 구성 요소:

    <directorytree> setRightClickKey(node.key)}
          onSelect={onSelect}
          selectedKeys={rightConnect ? [activeTabKey] : selectedKeys}
          onExpand={onExpand}
          treeData={[
            ...deepTree(treeData, (item) => {              return {
                ...item,                titleWord: item.title,                title: (                  <dropdown> setRightClickKey()}
                    overlayStyle={{ width: 80 }}
                    overlay={menu(item)}
                  >                    <div>
                      {item.title}                    </div>                  </dropdown>
                ),
              };
            }),
          ]}
        />复制代码</directorytree>

오른쪽 클릭 메뉴에 대한 몇 가지 사항이 있습니다. 추가 설명:

• Dropdown의 트리거 속성은 contextMenu로 설정되어야 합니다.
• Dropdown에 의해 표시되는 위치는 제목과 관련이 있습니다. 남은 공간을 채우기 위해 외부 컨테이너의 너비를 설정해야 합니다.

.ant-tree-node-content-wrapper {  display: flex;
}.ant-tree-title {  flex: 1;
}复制代码

• 드롭다운의 숨겨진 표시는 기록된 키를 마우스 오른쪽 버튼으로 클릭하여 판단됩니다.
• 드롭다운 메뉴는 현재 항목을 전달해야 합니다.

    const menu = (node) => (    <menu> {
          domEvent.stopPropagation();
          console.log('menuClick', node, key);
          // 如果要添加操作顶层文件夹,可以直接操作
          switch (key) {
            case 'add':
              setTreeData(
                deepTree(treeData, (item) => {
                  if (item.children && item.key === node.key) {
                    return {
                      ...item,
                      children: [
                        ...item.children,
                        {
                          title: 'new add',
                          key: shortid.generate(),
                          isLeaf: true,
                        },
                      ],
                    };
                  }
                })
              );
              break;
            case 'delete':
              const outer = treeData.find((item) => item.key === node.key);
              if (outer) {
                setTreeData(treeData.filter((item) => item.key !== node.key));
                return;
              }
              setTreeData(
                deepTree(treeData, (item) => {
                  if (item.children) {
                    return {
                      ...item,
                      children: item.children.filter(
                        ({ key }) => key !== node.key
                      ),
                    };
                  }
                  return item;
                })
              );
              break;
            case 'edit':
              setTreeData(
                deepTree(treeData, (item) => {
                  if (item.key === node.key) {
                    console.log('editle', {
                      ...item,
                      title: 'new edit',
                    });
                    return {
                      ...item,
                      title: 'new edit',
                    };
                  }
                  return item;
                })
              );
              break;
          }
        }}
      >      <menu.item>新增</menu.item>      <menu.item>
          删除      </menu.item>      <menu.item>编辑</menu.item>    </menu>
    );复制代码

추가/수정/삭제 기능

추가 기능은 기본적으로 폴더에만 추가할 수 있으며 추가 여부는 여기서 처리되는 키 값으로 판단됩니다. 비교적 간단한 코드만 보여줍니다.

에는 수정 기능에 대한 간단한 예도 나와 있습니다. 공식 프로젝트에서는 일반적으로 팝업 창 편집이 필요하거나 트리 구성 요소의 제목에 입력 상자를 포함해야 합니다. 변수를 사용하여 편집 중인 항목을 기록하고 최종적으로 저장하고 재귀를 통해 트리 데이터에 삽입할 수 있습니다.

삭제 기능은 가장 바깥쪽 레이어가 삭제되면 필터를 통해 직접 필터링합니다. ,

⚠️

otherwisedelete 기능은 어린이에 의해 필터링되므로 여기서 특히 주의하세요. 검색 기능

제목 색상이 빨간색으로 바뀌면서 검색 기능이 실행됩니다.

실시에서는 검색을 클릭한 후에만 검색되며, 검색어 구분도 없습니다. 문자열을 다운로드하여 구현하려면

공식 예제

를 참조하세요. autoExpandParent 속성은 기본적으로 상위 노드를 활성화합니다. 그렇지 않으면 위로 재귀하는 데 약간의 노력이 필요할 수 있습니다.

데이터 소스를 필터링해야 하는 또 다른 요구 사항이 있는데, 이는 간단히 공식 인스턴스를 수정하여 달성할 수 있습니다.

탭 역 위치 지정

Tree 컴포넌트 항목을 클릭하거나, 오른쪽에 Tab을 추가하거나, Tab을 활성화하는 것은 정방향 위치 지정으로 간주할 수 있습니다. 역방향 위치 지정은 오른쪽 Tab 페이지가 전환되면 왼쪽의 Tree 구성 요소가 해당 항목을 선택하는 것을 의미합니다. , 그리고 핵심 코드는 selectedKeys를 지정하는 것입니다. 난이도는 기본적으로 해당 상위 노드를 여는 것입니다. 물론, autoExpandParent 속성을 제어하는 ​​것이 좋습니다.

드래그 앤 드롭 동작

드래그 앤 드롭 동작은 Tree 컴포넌트 자체에서 지원되며, 두 번째로 공식에서 제공한 드래그 앤 드롭 동작 예제만 약간 수정했습니다. 예를 들어 여기서는 자세히 다루지 않겠습니다. :

End

검색 및 역위치 지정의 어려움은 실제로 관련 폴더를 여는 것입니다. 그러나 공식 예에서는 autoExpandParent 속성이 사용됩니다. 훨씬 간단합니다.

아직 늦지 않았습니다. 오늘은 여기까지입니다.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 Ant Design은 편집, 검색 및 위치 지정 기능을 구현하는 트리 구성 요소를 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!