快速查找(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