Universal tree-shaped component implementation method with built-in real-time search

Abstract

The invention discloses a universal tree-shaped component implementation method with built-in real-time search. The implementation method comprises the following steps: extracting a data source with astandard data structure from tree nodes with complex HTML structures; designing an expansion key calculation method so as to control relevant tree nodes in search to be internally provided with expansion and closing functions; and modifying the expanded tree node through a DOM control method to realize search highlight explicit and implicit built-in. According to the universal tree-shaped component implementation method with the built-in real-time search function, a search box and tree-shaped components are packaged in a unified mode, on the basis that the height of tree nodes of an originaltree-shaped component is kept customizable, expansion keys are calculated through input content, and real-time expansion of built-in related tree nodes is achieved; Expanded tree nodes are modified incombination with a DOM control method, highlight of search content and hiding of noise nodes are achieved, and therefore built-in search and interaction styles are unified, the tree nodes can be customized, and the invention is suitable for search tree universal components in different scenes.

Description

technical field [0001] The invention relates to the technical field of computer front-end development, in particular to a method for realizing a universal tree component with built-in real-time search. Background technique [0002] In front-end development, tree-shaped components are often used as containers for directories, folders, tables, and models. The current mainstream front-end UI component library provides programmers with a wealth of tree-shaped component customization solutions, allowing tree nodes to be highly customized. In scenarios, search and tree components are often used together. However, the existing tree component search implementation solutions are difficult to support different and complex application scenarios, and it is difficult to implement search solutions for each scenario to ensure the consistency of interactive experience. Combining trees repeatedly The search brings additional R&D overhead, and there is an urgent need for a general tree compon...

AI Technical Summary

Problems solved by technology

[0005] The purpose of the present invention is to provide a method for implementing a general tree component with built-in real-time search, so as to solve the problem that the search tree on the market cannot be reused in multiple scenarios, which increases the time cost and labor cost of development, and is difficult to implement. The problem of supporting special tree nodes for custom development in each scene

Images