Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to achieve editing, search and positioning functions in Ant Design". In daily operation, I believe many people have doubts about how to achieve editing, search and positioning functions in Ant Design. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to achieve editing, search and positioning functions in Ant Design". Next, please follow the editor to study!

This time I made a tree-shaped display function, who knows that the product is still full of meaning, talk to me:

PD: what? Can you only unfold the function? How can we do this? the most basic thing is to support editing, search, and reverse positioning if you can.

YY: why didn't you say so earlier? It's not on the requirements document either.

PD: whose documents do you think are written all at once? Which PD does not add demand?

YY: that's what you say, but that's not how it works.

PD: Oh, don't waste your time standing there and do it!

YY:...

The above story is pure fiction, if there are any similarities, please leave a message in the comments section.

Tree data is quite common in development, such as folders, organizational structure, biological classification, countries and regions, and so on. Most of the structures of everything in the world are tree structures. The hierarchical relationship can be fully displayed by using the tree control, and it has interactive functions such as expanding and folding selection.

Demand analysis

Diting: add / modify / delete / move

Search function: name / creator / owner filtering

Positioning: tab reverse positioning

Project warehouse: https://github.com/speakice/editable-tree

Function realization

There are many kinds of method libraries and components that can achieve the above functions. Only one of them is mentioned here, all of which are components of Ant Design:

Tree.DirectoryTree directory tree

Dropdown right-click menu container

Menu menu content

Tab page to the right of Tabs

Input.Search search box

Switch toggles association statu

Shortid generates a unique id

Import {Tree, Dropdown, Menu, Tabs, Input, Switch} from 'antd';import shortid from' shortid'; copy Code Recursive method

The most important premise for manipulating tree row data is to have a handy recursive method:

/ * if you need to modify tree,action, you will return the modified item. If you do not modify it, you will not return * / 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;});} Copy code right mouse button menu

When the right-click menu works on title, you need to write Dropdown to the data source of the tree component:

SetRightClickKey (node.key)} onSelect= {onSelect} selectedKeys= {rightConnect? [activeTabKey]: selectedKeys} onExpand= {onExpand} treeData= {[... deepTree (treeData, (item) = > {return {... item, titleWord: item.title Title: (setRightClickKey ()} overlayStyle= {{width: 80}} overlay= {menu (item)} > {item.title}) } }),]} / > copy the code

There are a few additional points to add to the right-click menu:

The trigger property of Dropdown needs to be set to contextMenu

The position displayed by Dropdown is relative to title, so you need to set the width of the outer container to fill the remaining space:

.ant-tree-node-content-wrapper {display: flex;} .ant-tree-title {flex: 1;} copy the code

The display of Dropdown is judged by right-clicking the recorded key.

The menu of Dropdown needs to pass the current item

Const menu = (node) = > ({domEvent.stopPropagation (); console.log ('menuClick', node, key)) / / if you want to add an action top-level folder, you can directly manipulate 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 Add delete edit); copy code add / modify / delete function

The add function can only be added to the folder by default, and it can be added by judging and adding the key value. It is relatively simple to deal with here, and only the core function is demonstrated. See the previous section for the code.

The modification feature also provides a simple example. In a formal project, you usually need to edit a pop-up window or embed an input box in the title of the tree component. You can use variables to record the item being edited, and finally save it by recursively inserting it into the tree data:

The deletion function is judged. If the outermost layer is deleted, it will be filtered directly through filter. Otherwise, the deletion function will be filtered through children. Special attention should be paid here.

Search function

The search function is prompted by titile turning red:

In implementation, only click search is done, and there is no real-time search prompt and no distinction between search terms. Here, you can intercept the string to achieve it. You can see the official example. Note that the attribute autoExpandParent of the parent node is turned on by default, otherwise it may take some effort to recurse upward.

Another requirement is to filter the data source, which can be implemented after a simple modification of the official instance.

Tab reverse positioning

Click the Tree component item, add Tab on the right, or activate Tab, which can be regarded as forward positioning; the reverse positioning is that when the right Tab page is switched, the left Tree component selects the corresponding item, and the core code is to specify selectedKeys, which is not difficult, the difficulty is to open the relevant parent node by default, of course, it is good to control the attribute of autoExpandParent.

Drag and move

Drag-and-drop mobile is supported by the Tree component itself, and the official drag-and-drop mobile instance has been given by the government. I have only made a slight modification to the official instance, and I will not elaborate on it here:

At this point, the study on "how to achieve editing, search and location functions in Ant Design" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.