Wie kann ich die Ant Design-Baumkomponente anpassen, um Bearbeitungs-, Such- und Umkehrpositionierungsfunktionen zu implementieren? Im folgenden Artikel erfahren Sie, wie Sie Baumkomponenten erstellen und diese Funktionen implementieren. Ich hoffe, er ist hilfreich für Sie!
Dieses Mal habe ich eine baumförmige Anzeigefunktion erstellt. Das Produkt ist unerwarteterweise noch unfertig:
PD: Was? Nur Funktion zum Erweitern und Reduzieren? Wie kann das funktionieren? Das Wichtigste ist, dass wir die Bearbeitung und Suche unterstützen. Wenn möglich, können wir auch eine umgekehrte Positionierung durchführen ...
YY: Warum hast du es mir nicht früher gesagt? Im Anforderungsdokument steht nichts …
PD: Wessen Dokument wurde Ihrer Meinung nach in einem Zug erstellt? Welche PD fügt keine Anforderungen hinzu?
YY: Das sagt man so, aber so funktionieren die Dinge nicht...
PD: Oh, verschwende keine Zeit, tu es einfach!
JJ: ...
Die oben genannten Geschichten sind rein fiktiv. Wenn es Ähnlichkeiten gibt, hinterlassen Sie bitte eine Nachricht im Kommentarbereich ...
Baumdaten sind in der Entwicklung relativ häufig, einschließlich Ordnern und Organisationen Strukturen, biologische Klassifikationen, Länder, Regionen usw., die meisten Strukturen auf der Welt sind Baumstrukturen. Das Baumsteuerelement kann die hierarchische Beziehung vollständig anzeigen und verfügt über interaktive Funktionen wie die Auswahl zum Erweitern und Reduzieren.
Projekt-Repository: https://github.com/ speakice/ editable-tree
Es gibt viele Methodenbibliotheken und Komponenten, die die oben genannten Funktionen realisieren können. Hier sprechen wir nur über eine davon, die alle Komponenten von Ant Design sind:
import { Tree, Dropdown, Menu, Tabs, Input, Switch } from 'antd';import shortid from 'shortid';复制代码Baumzeile bedienen Daten und schließlich Die wichtige Voraussetzung ist, eine praktische rekursive Methode zu haben:
/**
* 如果需要修改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;
});
};复制代码Das Rechtsklick-Menü wirkt auf den Titel und Dropdown muss in die Datenquelle des Baums geschrieben werden Komponente:
<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>Es gibt ein paar Punkte zum Rechtsklick-Menü. Zusätzliche Erklärung: Das Trigger-Attribut von
.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>
);复制代码
Die Löschfunktion trifft eine Beurteilung. Wenn die äußerste Ebene gelöscht wird, wird sie direkt durch den Filter gefiltert ,
andernfallslöschen Funktionen werden nach Kindern gefiltert, also seien Sie hier besonders aufmerksam. Suchfunktion
In der Implementierung erfolgt die Suche nur nach dem Klicken auf „Suchen“. Es gibt keine Echtzeit-Suchaufforderung und keine Suchwortunterscheidung Um dies durch Herunterladen einer Zeichenfolge zu implementieren, können Sie sich das
ansehen. Beachten Sie, dass das Attribut autoExpandParent standardmäßig den übergeordneten Knoten aktiviert, andernfalls kann die Rekursion nach oben etwas Aufwand erfordern.
Tab-Umkehrpositionierung
erreicht werden kann
Klicken Sie auf das Baumkomponentenelement, fügen Sie rechts eine Registerkarte hinzu oder aktivieren Sie die Registerkarte. Dies kann als Vorwärtspositionierung angesehen werden. Dies bedeutet, dass beim Umschalten der Registerkartenseite auf der rechten Seite die Baumkomponente auf der linken Seite das entsprechende Element auswählt , und der Kerncode besteht darin, selectedKeys anzugeben. Die Schwierigkeit besteht darin, den relevanten übergeordneten Knoten standardmäßig zu öffnen. Natürlich ist es gut, das Attribut autoExpandParent zu steuern.
Drag-and-Drop-Bewegung wird von der Baumkomponente selbst unterstützt, und zweitens hat der Beamte Drag-and-Drop-Bewegungsbeispiele bereitgestellt Beispiel, daher werde ich hier nicht auf Details eingehen :
Es ist noch nicht zu früh, wir sind heute hier.
Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
ProgrammiervideosDas obige ist der detaillierte Inhalt vonAnt Design erstellt eine Baumkomponente zur Implementierung von Bearbeitungs-, Such- und Positionierungsfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
