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

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

青灯夜游
青灯夜游앞으로
2022-01-13 18:28:214183검색

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

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

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

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

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

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

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

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

YY: ...

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

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

요구사항 분석

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

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

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

함수 구현

위의 기능을 실현할 수 있는 메소드 라이브러리와 구성요소가 많이 있습니다. 여기서는 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>
      );复制代码
  • 추가/수정/삭제 기능

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

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

Ant Design은 편집, 검색 및 위치 지정 기능을 구현하는 트리 구성 요소를 생성합니다.삭제 기능은 가장 바깥쪽 레이어가 삭제되면 필터를 통해 직접 필터링합니다. ,

⚠️

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

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

Ant Design은 편집, 검색 및 위치 지정 기능을 구현하는 트리 구성 요소를 생성합니다.실시에서는 검색을 클릭한 후에만 검색되며, 검색어 구분도 없습니다. 문자열을 다운로드하여 구현하려면

공식 예제

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

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

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

탭 역 위치 지정

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

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

드래그 앤 드롭 동작

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

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

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

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

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

프로그래밍 비디오

를 방문하세요! !

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

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제