Twaver-HTML5基础学习(24)快速查找(QuickFinder)

快速查找(QuickFinder)

快速查找用于快速查找指定属性值的所有元素，如查找某个告警级别的所有告警，特定类型的所有网元等等。

• dataBox:数据容器,查找器查找的对象
• propertyName:属性名称,查找条件
• propertyType:属性类型,默认为’accessor’,表示可直接获取的属性,属性类型支持三种:accessor、client、style等
• valueFunction:值获取函数，默认根据上面三种方式获取数据，用户也可以指定值的获取方式，通过设置valueFunction实现
• filterFunction:过滤函数，用于控制哪些元素是否参与查找

twaver.QuickFinder = function(dataBox,propertyName,propertyType,valueFunction,filterFunction)

/**
 *filterFunction:传入data，返回true/false,表示这个元素是否参与查找
 */
filterFunction = function(data){}

//返回第一个查找到的元素
findFirst: function (value) 
//返回找到的所有元素的集合
find: function(value)

使用QuickFinder步骤,以查找指定名称元素为例:

(1).首先创建一个与name属性绑定的查找器

/**
 * databox:数据容器
 * 'name':查找条件
 */
var nameFinder = new waver.QuickFinder(box,'name');

(2).开始查找

/**
 * 返回值:返回查找到的元素集合
 */
var datas = nameFinder.find('group-1');

例子

react代码

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-27 09:39:30
 */
import React, { useEffect, useState } from 'react'
import {
    returnElementBoxAndNetworkFun,
    returnNodeFun,
    returnLineFun,
} from './utils'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
    	const [network, setnetwork] = useState({})
    	const init = () => {
        const [box, network] = returnElementBoxAndNetworkFun()
        setnetwork(_ => network)
        network.invalidateElementUIs();
        document.getElementById("testID").appendChild(network.getView());
        // 设置最初的大小
        network.adjustBounds({ x: 0, y: 0, width: 800, height: 800 });

        returnNodeFun(box, { name: "liuqing", location: { x: 200, y: 300 } })
        let liuqing2 = returnNodeFun(box, { name: "liuqing", location: { x: 400, y: 500 } })
        liuqing2.setClient('NO', 'NO')
        /**
         * dataBox:数据容器,查找器查找的对象
         * propertyName:属性名称,查找条件
         * propertyType:属性类型,默认为'accessor',表示可直接获取的属性,属性类型支持三种:accessor、client、style等
         * valueFunction:值获取函数，默认根据上面三种方式获取数据，用户也可以指定值的获取方式，通过设置valueFunction实现
         * filterFunction:过滤函数，用于控制哪些元素是否参与查找 
         */
        //  twaver.QuickFinder = function (dataBox, propertyName, propertyType, valueFunction, filterFunction)

        /**
         *filterFunction:传入data，返回true/false,表示这个元素是否参与查找
        */
        // filterFunction = function (data) { }

        //返回第一个查找到的元素 传入对应属性的属性值
        // findFirst: function (value) 
        // 返回找到的所有元素的集合
        // find: function(value)

        // (1).首先创建一个与name属性绑定的查找器
        /**
         * databox:数据容器
         * 'name':查找条件
         */
        var nameFinder = new twaver.QuickFinder(box, 'name');
        // name属性对应属性值 伟liuqing的第一个网元
        let node = nameFinder.findFirst('liuqing')
        // 一个元素
        console.log(node, 'liuqing')
        // 返回所以name属性值伟liuqing的网元
        let nodes = nameFinder.find('liuqing')
        // 元素集合
        console.log(nodes, 'nodes')

        var noFinder = new twaver.QuickFinder(box, 'NO', 'client');
        console.log(noFinder, 'noFinder')
    }
    useEffect(init, [])
    return (
        <>
            <p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={{ fontSize: "20px", paddingLeft: "50px" }}>
                <li>quickFinder快速查找</li>
            </ul>
            {/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
        </>
    )
}
export default Demo

学习参考：TWaver Documents