AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断

2024-09-25 48
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了Twaver HTML5中的数据容器（DataBox），包括如何进行增删查改操作、遍历数据容器以及判断网元是否存在于数据容器中。DataBox用于管理所有的网元对象，如ElementBox、LayerBox、AlarmBox等，并通过示例代码展示了其常用方法的使用。

数据容器

概述：

在TWaver中,所有的网元对象均可以加入到DataBox中进行管理。
DataBox是一个数据管理容器，用于管理所有的预定义网元对象，当添加、删除、移动网元或者更改网元属性的时候，DataBox均可以监听到。
TWaver DataBox和后台数据也有很好的接口,它可以通过数据流的方式和后台相连，也就是说可以通过XML文件或者Json文件更改DataBox中的网元。
DataBox在数据承载上也有一个很好的设计，它的优势在于可以很方便的管理Network上庞大的数据而仅占用少量内存和加载时间。
twaver.DataBox是TWaver中所有Box的父类，即所有的Box均继承于DataBox。主要包括ElementBox、LayerBox、AlarmBox、ColumnBox、PropertyBox、TabBox等。
在这里插入图片描述
所有的数据都继承于DataBox；

数据容器(DataBox)

DataBox是用户经常操作的一个类

增删查改API方法
/**
 *功能:往数据容器中添加一个数据
 *data:数据对象
 *index:添加的数据次序,为空时，就将这个数据添加在最后的位置
 */
add:function(data,index)

/**
 *功能:从数据容器中删除某个数据
 *data:删除的数据对象
 */
remove:function(data)

/**
 *功能:根据Id删除网元数据
 */
removeById: function (id)

/**
 *功能:清空DataBox
 */
clear: function ()

/**
 *功能:获取数据容器中某个序号上的数据
 *index:Number,数据的序号
 *Returns:twaver.Data,数据对象
 */
getDataAt:function(index)

/**
 *功能:根据网元ID值获取数据
 */
getDataById:function (id)


/**
 *功能:获取指定数据的所有兄弟数据
 *data：指定网元
 */
getSiblings: function (data)

/**
 *功能:获取指定数据在兄弟数据中的序号
 *data:指定网元
 */
getSiblingIndex: function (data)

/**
 *功能:获取数据容器中所有根下的数据。根下的数据指的是没有父亲的数据
 *returns:twaver.List
 */
getRoots: function ()

/**
 *功能:获取DataBox中所有网元
 *returns:twaver.List
 */
 getDatas: function ()

/**
 *功能:获取DataBox中随机一个网元
 *type:可以设置随机网元的类型,如:twaver.Node,twaver.Link等
 */
getRandomData: function(type)

实现：

     let node1 = returnNodeFun(box, {
    name: "第一个node", location: {
    x: 100, y: 100 } })
        let node2 = returnNodeFun(box, {
    name: "第二个node", location: {
    x: 200, y: 200 } })
        let link1 = returnLineFun(node1, node2)
        // 添加数据对象
        box.add(link1)
        // 删除数据对象
        box.remove(link1)
        // 通过id删除网元
        box.removeById(node1.getId())
        // 清空dataBox
        box.clear()
        let node3 = returnNodeFun(box, {
    name: "第三个node", location: {
    x: 100, y: 100 } })

        // 获取指定下标的网元 下标从0 开始
        let node3Index = box.getDataAt(0)
        console.log(node3Index, 'node3Index')
        // 通过id获取网元
        let node3ById = box.getDataById(node3.getId())
        console.log(node3ById, 'node3ById')
        let node4 = returnNodeFun(box, {
    name: "第四个node", location: {
    x: 300, y: 300 } })
        // 获取指定数据的所有兄弟数据 返回值是个数组
        let sibingsList = box.getSiblings(node3)
        // 获取到node3 node4
        console.log(sibingsList, 'sibingsList')

        // 获取指定网元在兄弟数据中的序号
        let sibingsIndex3 = box.getSiblingIndex(node3)
        console.log(sibingsIndex3, 'sibingsIndex3') //0
        let sibingsIndex4 = box.getSiblingIndex(node4)
        console.log(sibingsIndex4, 'sibingsIndex4') //1

        // 获取数据容器中所有根下的数据。根下的数据指的是没有父亲的数据
        let rootData = box.getRoots()
        console.log(rootData, 'rootData') //list数组

        // 获取DataBox中所有网元
        let getDatasList = box.getDatas()
        console.log(getDatasList, 'getDatasList') //list数组


        let link2 = returnLineFun(node3, node4)
        link2.setName("第二条线")
        // 添加数据对象
        box.add(link2)

        // 获取DataBox中随机一个网元
        // type:可以设置随机网元的类型,如:twaver.Node,twaver.Link等
        let RandomData = box.getRandomData(twaver.Node)
        console.log(RandomData, 'RandomData')
遍历数据容器
/**
 *功能:遍历数据容器中的所有数据
 *callback:回调函数
 *scope:作用于范围,默认为window
 */
forEach: function (callback, scope)

/**
 *功能:反序遍历数据容器中的所有数据
 *callback:回调函数
 *scope:作用于范围,默认为window
 */
forEachReverse: function (f, scope)

实现：


        // 遍历数据容器
        box.forEach((item) => {
   
            console.log(item.getName())
        })
        box.forEachReverse((item) => {
   
            console.log(item.getName())
        })

包含网元判断

/**
 *功能:根据Id判断当前数据是否存在于数据容器中
 *returns：Boolean
 */
containsById: function (id) 

/**
 *功能:判断当前数据是否存在于数据容器中
 *returns：Boolean
 */
contains: function (data)

实现：

// 包含网元判断
        // containsById Boolean
        console.log(box.containsById(node1.getId()))//false
        console.log(box.containsById(node3.getId()))//true
        console.log(box.containsById(link1.getId()))//false
        // 功能:判断当前数据是否存在于数据容器中
        console.log(box.contains(node1))//false
        console.log(box.contains(node3))//true
        console.log(box.contains(link1))//false

全部代码

react页面
/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-24 19:02:45
 */
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 });

        let node1 = returnNodeFun(box, {
    name: "第一个node", location: {
    x: 100, y: 100 } })
        let node2 = returnNodeFun(box, {
    name: "第二个node", location: {
    x: 200, y: 200 } })
        let link1 = returnLineFun(node1, node2)
        // 添加数据对象
        box.add(link1)
        // 删除数据对象
        box.remove(link1)
        // 通过id删除网元
        box.removeById(node1.getId())
        // 清空dataBox
        box.clear()
        let node3 = returnNodeFun(box, {
    name: "第三个node", location: {
    x: 100, y: 100 } })

        // 获取指定下标的网元 下标从0 开始
        let node3Index = box.getDataAt(0)
        console.log(node3Index, 'node3Index')
        // 通过id获取网元
        let node3ById = box.getDataById(node3.getId())
        console.log(node3ById, 'node3ById')
        let node4 = returnNodeFun(box, {
    name: "第四个node", location: {
    x: 300, y: 300 } })
        // 获取指定数据的所有兄弟数据 返回值是个数组
        let sibingsList = box.getSiblings(node3)
        // 获取到node3 node4
        console.log(sibingsList, 'sibingsList')

        // 获取指定网元在兄弟数据中的序号
        let sibingsIndex3 = box.getSiblingIndex(node3)
        console.log(sibingsIndex3, 'sibingsIndex3') //0
        let sibingsIndex4 = box.getSiblingIndex(node4)
        console.log(sibingsIndex4, 'sibingsIndex4') //1

        // 获取数据容器中所有根下的数据。根下的数据指的是没有父亲的数据
        let rootData = box.getRoots()
        console.log(rootData, 'rootData') //list数组

        // 获取DataBox中所有网元
        let getDatasList = box.getDatas()
        console.log(getDatasList, 'getDatasList') //list数组


        let link2 = returnLineFun(node3, node4)
        link2.setName("第二条线")
        // 添加数据对象
        box.add(link2)

        // 获取DataBox中随机一个网元
        // type:可以设置随机网元的类型,如:twaver.Node,twaver.Link等
        let RandomData = box.getRandomData(twaver.Node)
        console.log(RandomData, 'RandomData')



        // 遍历数据容器
        box.forEach((item) => {
   
            console.log(item.getName())
        })
        box.forEachReverse((item) => {
   
            console.log(item.getName())
        })


        // 包含网元判断
        // containsById Boolean
        console.log(box.containsById(node1.getId()))//false
        console.log(box.containsById(node3.getId()))//true
        console.log(box.containsById(link1.getId()))//false
        // 功能:判断当前数据是否存在于数据容器中
        console.log(box.contains(node1))//false
        console.log(box.contains(node3))//true
        console.log(box.contains(link1))//false
    }
    useEffect(init, [])
    return (
        <>
            <p style={
   {
    fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={
   {
    fontSize: "20px", paddingLeft: "50px" }}>
                <li>数据容器(1)_增删查改、遍历数据容器、包含网元判断</li>
            </ul>
            {
   /* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={
   {
    width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
        </>
    )
}
export default Demo
js工具类
const twaver = require('twaver');
// 设置每个图元name的颜色
twaver.Styles.setStyle('label.color', '#ec6c00');
// 设置每个图元name2的颜色
twaver.Styles.setStyle('label2.color', '#57ab9a');
twaver.Styles.setStyle('select.color', '#ef8200');
//TWaver内部预定义六中告警级别
twaver.AlarmSeverity.CRITICAL = twaver.AlarmSeverity.add(500, 'Critical', 'C', "#FF0000");
twaver.AlarmSeverity.MAJOR = twaver.AlarmSeverity.add(400, 'Major', 'M', "#FFA000");
twaver.AlarmSeverity.MINOR = twaver.AlarmSeverity.add(300, 'Minor', 'm', "#FFFF00");
twaver.AlarmSeverity.WARNING = twaver.AlarmSeverity.add(200, 'Warning', 'W', "#00FFFF");
twaver.AlarmSeverity.INDETERMINATE = twaver.AlarmSeverity.add(100, 'Indeterminate', 'N', "#C800FF");
twaver.AlarmSeverity.CLEARED = twaver.AlarmSeverity.add(0, 'Cleared', 'R', "#00FF00");

const {
    CRITICAL, MAJOR, WARNING, MINOR, INDETERMINATE, CLEARED } = twaver.AlarmSeverity
export const ALARM1 = CLEARED
export const ALARM2 = INDETERMINATE
export const ALARM3 = MINOR
export const ALARM4 = MAJOR
export const ALARM5 = CRITICAL

/**
 * 创建一个dataBox容器
 * 容器中可以add图元
 */
export const returnElementBoxFun = () => new twaver.ElementBox()


/**
 * 创建一个画布 network对象
 * @param {ElementBox} box  创建一个画布 network对象
 */
export const returnNetworkFun = (box) => new twaver.vector.Network(box)

/**
 * 创建一个Group
 * 用于包裹图元
 */
export const returnGroupFun = (box, obj = {
   }) => {
   
    let group = new twaver.Group(obj)
    box.add(group)
    return group
}



/**
 * 创建一个容器dataBox和一个画布
 * 并将容器实例化画布
 * @returns [box,network] box network
 */
export const returnElementBoxAndNetworkFun = () => {
   
    let box = returnElementBoxFun();
    let network = returnNetworkFun(box);
    return [box, network]
}

/**
 * 用于创建一个节点
 * @param {ElementBox} box dataBox 
 * @param {String} name 当前节点的name
 * @param {Number} x   当前节点的x坐标
 * @param {Number} y 当前节点的y坐标
 * @returns {Node} Node
 */
export const returnNodeFun = (box, Obj = {
   }) => {
   
    let node = new twaver.Node(Obj);
    // node.setName(name);
    // node.setLocation(x, y);
    box.add(node);
    return node
}

/**
 * 
 * @param {Node} node1 节点1
 * @param {Node} node2 节点2
 */
export const returnLineFun = (node1, node2) => new twaver.Link(node1, node2)

/**
 * 注册图片 用于设置图元的img setImage
 * @param {String} url 图片 url
 * @param {NetWork} svg  NetWork对象
 */
export function returnRegisterImage(url, svg) {
   
    var image = new Image();
    image.src = url;
    var views = arguments;
    image.onload = function () {
   
        // getImageName 获取到的图片name用做 node节点的显示img
        twaver.Util.registerImage(getImageName(url), image, image.width, image.height, svg === true);
        image.onload = null;
        for (var i = 1; i < views.length; i++) {
   
            var view = views[i];
            if (view.invalidateElementUIs) {
   
                view.invalidateElementUIs();
            }
            if (view.invalidateDisplay) {
   
                view.invalidateDisplay();
            }
        }
    };
    // getImageName 获取到的图片name用做 node节点的显示img
    const getImageName = (url) => {
   
        var index = url.lastIndexOf('/');
        var name = url;
        if (index >= 0) {
   
            name = url.substring(index + 1);
        }
        index = name.lastIndexOf('.');
        if (index >= 0) {
   
            name = name.substring(0, index);
        }
        return name;
    }
}


/*
 * @param {*} 告警的Id 
 * @param {*} 告警网元的Id 
  * @param {*} 告警级别 
 * @param {*} alarmBox 网元容器.getAlarmBox()
 */
export const returnAlarmFun = (alarmID, elementID, alarmSeverity, alarmBox) => {
   
    var alarm = new twaver.Alarm(alarmID, elementID, alarmSeverity);
    alarmBox.add(alarm);
}

/**
 * 
 * @param {*} box 容器dataBox
 * @param {*} layer layer对象
 * @param {*} shape 图层的形状
 * @param {*} x node点的坐标
 * @param {*} y node点的坐标
 * @param {*} width 图层的宽高
 * @param {*} height 图层的宽高
 * @param {*} fillColor  图层填充颜色
 */
/**
 * 
 * shape 
 * circle 圆形
 * diamond 菱形
 * rectangle 长方形
 */
export const createNode = (box, layer, shape, x, y, width, height, fillColor, ) => {
   
    var node = new twaver.Node();
    node.setLayerId(layer.getId());
    node.setName('layer-' + layer.getId());
    node.setStyle('body.type', 'vector');
    node.setStyle('vector.fill.alpha', 0.7);
    node.setStyle('vector.shape', shape);
    node.setSize(width, height);
    node.setLocation(x, y);
    node.setStyle('vector.fill.color', fillColor);
    box.add(node); return node;
}
/**
 * 
 * @param {*} table 
 * @param {*} name 
 * @param {*} propetyName 
 * @param {*} propertyType 
 * @param {*} valueType 
 */
export const returnCreateColumn = (table, name, propetyName, propertyType, valueType) => {
   
    var column = new twaver.Column(name);
    column.setName(name);
    column.setPropertyName(propetyName);
    column.setPropertyType(propertyType);
    if (valueType) {
   
        column.setValueType(valueType);
    }
    table.getColumnBox().add(column);
    return column;
}

export const returnRandomColor = () => {
   
    var r = randomInt(255);
    var g = randomInt(255);
    var b = randomInt(255);
    return '#' + formatNumber((r << 16) | (g << 8) | b);
}
function randomInt(n) {
   
    return Math.floor(Math.random() * n);
}

function formatNumber(value) {
   
    var result = value.toString(16);
    while (result.length < 6) {
    result = '0' + result; } return result;
}

学习参考：TWaver Documents

文章标签：
容器
数据格式
移动开发
JSON
XML
关键词：
HTML数据
HTML学习
学习容器
学习数据容器
容器增删查改
六卿
目录
相关文章
游客x4uejvahonufa
|
2月前
|
人工智能
通过AI学习一些HTML的布局方式
学习到了很多
游客x4uejvahonufa
51 3
warmhearted
|
2月前
|
Kubernetes Linux 持续交付
docker容器学习
【10月更文挑战第1天】
warmhearted
40 1
爱吃龙利鱼
|
2月前
|
Kubernetes 应用服务中间件 nginx
k8s学习--k8s集群使用容器镜像仓库Harbor
本文介绍了在CentOS 7.9环境下部署Harbor容器镜像仓库，并将其集成到Kubernetes集群的过程。环境中包含一台Master节点和两台Node节点，均已部署好K8s集群。首先详细讲述了在Harbor节点上安装Docker和docker-compose，接着通过下载Harbor离线安装包并配置相关参数完成Harbor的部署。随后介绍了如何通过secret和serviceaccount两种方式让Kubernetes集群使用Harbor作为镜像仓库，包括创建secret、配置节点、上传镜像以及创建Pod等步骤。最后验证了Pod能否成功从Harbor拉取镜像运行。
爱吃龙利鱼
137 0
阿里云开发者
|
3月前
|
Kubernetes API Docker
跟着iLogtail学习容器运行时与K8s下日志采集方案
iLogtail 作为开源可观测数据采集器，对 Kubernetes 环境下日志采集有着非常好的支持，本文跟随 iLogtail 的脚步，了解容器运行时与 K8s 下日志数据采集原理。
阿里云开发者
119 7
游客rcxtdbgrolahs
|
3月前
|
存储 索引 Python
python中的数据容器
python中的数据容器
游客rcxtdbgrolahs
43 2
神明木佑
|
2月前
html基础知识学习
html基础知识学习
神明木佑
37 0
爱吃龙利鱼
|
2月前
|
Linux 应用服务中间件 Shell
docker学习--docker容器镜像常用命令大全（简）
本文档详细介绍了Docker中的镜像命令与容器管理命令。镜像命令部分涵盖了镜像搜索、下载、上传等操作；容器管理命令则包括了容器的创建、启动、停止、删除及日志查看等功能。通过具体示例，帮助用户更好地理解和使用Docker相关命令。
爱吃龙利鱼
177 0
落雨_
|
前端开发
bat遍历生成文件夹下所有文件生成html连接
---------------------------------------------------------本行不复制----------------------1.bat----------------------------------------------------------...
落雨_
1229 0
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
62 1
东方睿赢
|
19天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
35 7

热门文章

最新文章

  • 1
    docker容器里安装ssh
  • 2
    Docker容器使用问题：Failed to get D-Bus connection: Operation not permitted
  • 3
    美国国家标准技术局发布应用容器安全指南  
  • 4
    ElasticSearch容器化从0到1实践（一）
  • 5
    Ioc容器概述
  • 6
    如何利用Docker进行PHP应用程序的容器化部署？
  • 7
    匠心打造多tab自动吸顶下的多滚动容器（详细）
  • 8
    Spring Aware容器感知技术
  • 9
    STL各种容器的使用时机详解
  • 10
    Kubernetes容器运行时接口-CRI
  • 1
    使用 XPath 定位 HTML 中的 img 标签
    73
  • 2
    2024较火的软件宣传单页HTML源码
    107
  • 3
    Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强。
    139
  • 4
    Sphinx是一个Python文档生成工具，它可以解析reStructuredText或Markdown格式的源代码注释，并生成多种输出格式，如HTML、LaTeX、PDF、ePub等。
    111
  • 5
    【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
    635
  • 6
    提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
    192
  • 7
    动态粒子发射404网站HTML源码
    64
  • 8
    【Python】已解决：bs4.FeatureNotFound: Couldn’t find a tree builder with the features you requested: html5
    456
  • 9
    HTML 【实用教程】（2024最新版）
    51
  • 10
    HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
    279

    • 相关课程

    更多
  • Serverless 容器从入门到精通: - Serverless Kubernetes
  • 容器安全与Palo Alto Networks解决方案
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 阿里云文件存储 NAS 在容器场景的最佳实践
  • 何种数据存储才能助力容器计算
  • 《容器网络文件系统CNFS》

    • 相关实验场景

    更多
  • 容器中的volume卷
  • 容器的文件系统挂载
  • 容器的配置和存储
  • 容器DevSecOps全链路体验
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解