Ant Design 트리 구성요소를 사용자 정의하여 편집, 검색 및 역위치 지정 기능을 구현하는 방법은 무엇입니까? 다음 기사에서는 트리 구성 요소를 만들고 이러한 기능을 구현하는 방법을 소개합니다. 도움이 되길 바랍니다.
이번에 나무 모양의 디스플레이 기능을 만들어 봤는데 의외로 제품이 아직 미완성이네요.
PD: 뭐요? 확장, 축소 기능만 있나요? 이것이 어떻게 작동할 수 있나요? 우리의 가장 기본적인 것은 편집과 검색을 지원하는 것입니다. 가능하다면 역방향 위치 지정도 가능합니다...
YY: 왜 미리 말하지 않았나요? 요구사항 문서에도 없는데...
PD: 누구 문서가 한 번에 적힌 것 같나요? 어떤 PD가 요구사항을 추가하지 않습니까?
YY: 그렇게 말하지만 일은 그렇지 않습니다...
PD: 아, 시간 낭비하지 말고 그냥 하세요!
YY: ...
위 이야기는 순전히 허구입니다. 유사점이 있으면 댓글란에 메시지를 남겨주세요...
트리 데이터는 폴더, 조직 등 개발에서 비교적 일반적입니다. 구조, 생물학적 분류, 국가, 지역 등 세상 모든 것의 대부분의 구조는 나무 구조입니다. 트리 컨트롤은 계층 관계를 완전히 표시할 수 있으며 확장 및 축소 선택과 같은 대화형 기능을 갖추고 있습니다.
프로젝트 저장소: https://github.com/peakice/ editable-tree
위의 기능을 실현할 수 있는 메소드 라이브러리와 구성요소가 많이 있습니다. 여기서는 Ant Design의 모든 구성요소인 그중 하나에 대해서만 설명합니다.
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>
오른쪽 클릭 메뉴에 대한 몇 가지 사항이 있습니다. 추가 설명:
.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
아직 늦지 않았습니다. 오늘은 여기까지입니다.
더 많은 프로그래밍 관련 지식을 보려면
프로그래밍 비디오위 내용은 Ant Design은 편집, 검색 및 위치 지정 기능을 구현하는 트리 구성 요소를 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!