Twaver-HTML5基础学习(41)列表可视化视图组件(List)

简介: 本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。

列表可视化视图组件(List)

效果图:
在这里插入图片描述
可以生成一个列表,将box中的元素全部展示出来
添加组元素:
在这里插入图片描述
在这里插入图片描述
ctrl加点击 多选
在这里插入图片描述

twaver.controls.List

以列表的形式来展示数据容器中的数据
在这里插入图片描述
官方文档链接:http://doc.servasoft.com/uploads/twaver-html5-5.9.0-api/classes/twaver.controls.List.html

react代码

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-05-11 16:00:53
 */
import React, {
    useEffect, useState } from 'react'

const twaver = require('twaver');

// const demo = require('demo');
const Demo = () => {
   
    const [network, setnetwork] = useState({
   })
    const init = () => {
   
        var box = new twaver.ElementBox();
        var network = new twaver.vector.Network(box);
        var list = new twaver.controls.List(box);
        init()
        initNetwork()
        function init() {
    initTable(); initDataBox(); }
        function initTable() {
   
            var listPan = list.getView();
            listPan.style.width = "200px";
            listPan.style.height = "100%";
            document.getElementById("testID").appendChild(listPan);
            // 间隔宽度
            list.setRowLineWidth(10);
            // 行高
            list.setRowHeight(50);
            // 间隔颜色
            list.setRowLineColor(twaver.Colors.blue_dark);
            // 排序
            list.setSortFunction(function (node1, node2) {
   
                if (!node1) {
    return -1; }
                if (!node2) {
    return 1; }
                return node2.getId() - node1.getId();
            });
        }
        function initNetwork() {
   
            var view = network.getView();
            document.getElementById("testID").appendChild(view);
            network.adjustBounds({
    x: 0, y: 0, width: 1300, height: 600 });
        }
        function initDataBox() {
   
            var from = new twaver.Node({
    name: 'from', location: {
    x: 300, y: 300 } });
            box.add(from);
            var to = new twaver.Node({
    name: 'to', location: {
    x: 500, y: 500 } });
            box.add(to);
            var link = new twaver.Link(from, to);
            box.add(link);
            var i = 10; 
            let group = new twaver.Group({
   name:"group",location:{
   x:400,y:400}})
            box.add(group)
            while (i-- > 0) {
   
                var data = new twaver.Node();
                data.setName("TWaver-" + i);
                data.setParent(from);
                data.setLocation(i*40 + 200,i*40)
                data.s('inner.color', randomColor());
                group.addChild(data)
                box.add(data);
            }

        }

        function randomColor() {
   
            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;
        }
    }
    useEffect(init, [])


    return (
        <>
            <p style={
   {
    fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={
   {
    fontSize: "20px", paddingLeft: "50px" }}>
                <li>List</li>
            </ul>
            {
   /* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={
   {
    width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
        </>
    )
}
export default Demo

学习参考:TWaver Documents
https://www.docin.com/p-2142096700.html

目录
相关文章
|
17天前
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
17天前
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
|
27天前
HTML 列表3
HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
|
18天前
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
|
18天前
HTML 速查列表3
本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。
|
18天前
HTML 速查列表2
文本格式化包括多种标签
|
18天前
HTML 速查列表1
HTML速查列表包含基本文档结构、标题、文本、换行和水平线等常用标签,方便日常打印使用。例如:`&lt;html&gt;`, `&lt;head&gt;`, `&lt;title&gt;`, `&lt;body&gt;`, `&lt;h1&gt;`至`&lt;h6&gt;`,`&lt;p&gt;`,`&lt;br&gt;`和`&lt;hr&gt;`。
|
27天前
HTML 列表4
HTML 列表标签用于创建不同类型的列表。`&lt;ol&gt;` 和 `&lt;ul&gt;` 分别定义有序和无序列表,`&lt;li&gt;` 定义列表项。`&lt;dl&gt;` 用于定义描述列表,其中 `&lt;dt&gt;` 定义术语,`&lt;dd&gt;` 定义术语的描述。
|
27天前
HTML 列表2
HTML 有序列表使用数字标记列表项,以 `&lt;ol&gt;` 开始,每个项目用 `&lt;li&gt;` 标签表示。
|
27天前
HTML 列表1
HTML支持三种类型的列表:有序列表、无序列表和定义列表。无序列表使用 `&lt;ul&gt;` 标签表示,列表项使用 `&lt;li&gt;` 标签。