Twaver-HTML5基础学习(23)页管理容器(TabBox)、选中模型(SelectionModel)

简介: 本文介绍了Twaver HTML5中的页管理容器(TabBox)和选中模型(SelectionModel)。文章解释了如何使用TabBox来管理Tab页,并通过示例代码展示了SelectionModel的多种功能,包括追加选中元素、设置选中元素、选中所有元素、移除元素选中状态、清除所有选中状态等。此外,还介绍了如何监听选中状态的变化事件以及如何设置不同的选中模式,如多选、单选和不可选。

页管理容器(TabBox)

页管理容器主要用来管理Tab(twaver.Tab)页。

var tablePane = new twaver.controls.TablePane(table);
...
var tab = new twaver.Tab(name);
tab.setName(name);
tab.setView(view);
tabPane.getTabBox().add(tab);

tabBox还不太会用。…

选中模型(SelectionModel)

选中模型服务于DataBox,用于管理元素选中信息、元素的选中、清除选中都通过SelectionModel实现。那么如何操作SelectionModel呢?

(1).构建选中模型

默认情况下DataBox自带一个选中模型,获取方式:databox.getSelectionModel()。
视图对象中的默认就是data
box的选中模型,可通过view.getSelectionModel()获取,
如:network.getSelectionModel()或者tree.getSelectionModel();

如果用户想设置自己的选中模型,可通过下面方式设置。

//创建模型对象
var myselectionModel = new twaver.SelectionModel(databox);
//构造参数传入需要绑定的databox即可,设置到databox或者视图组件
databox.setSelectionModel(mySelectionModel);
network.setSelectionModel(mySelectionModel);
tree.setSelectionModel(mySelectionModel);
...

(2).使用SelectionModel功能

//追加选中元素,传入参数可以是单个元素,也可以是元素集合
appendSelection:function(datas)
//设置选中元素,与追加选中不同,此方法会清除原始选中状态
setSelection():function(datas)
//选中databox中所有元素
selectAll:function()
//取消元素选中状态,传入参数可以是单个元素,也可以是元素集合
removeSelection:function(datas)
//清除所有元素的选中状态
clearSelection:function()
//获取选中元素集合,注意此方法返回的是SelectionModel内部选中元素集合对象的引用,直接对这个集合操作会影响到选中模型,所以不要对这个集合做修改操作
getSelection:function()
/**获取当前选中元素集合,注意此方法与上个函数有区别,此方法返回的是新构建的集合类,而不是SelectionModel中原始的选中元素           
  *元素集合对象引用
  *matchFunction:匹配函数,传入IData,返回true或者false,false表示排除
  */
toSelection:function(matchFunction,scope)
//选中数量
size:function()
//元素是否选中
contains:function(data)
//选中集合中的最后一个元素
getLastData:function()
//选中集合中的第一个元素
getFirstData:function()
//是否允许选中
isSelectable:function(data)

选中模型管理元素的选中状态,当选中状态发生变化时,派发相应的选中变化事件,如调用追加元素选中函数会派发类型为”append”的选中变化事件。

selectionModel.addSelectionChangeListener(function(e){
   
    console.log("Kind:"+e.kind+',datas:'+e.datas.toString());
});

事件对象中包含两个属性’kind’,’datas’,分别代表选中事件类型,事件数据,其中选中变化事件有五种子类型:append、set、remove、all、clear,分别对应选中模型上的五种操作元素选中状态的函数:appendSelection、setSelection、removeSelection、selectAll、clearSelection

选中三种模式

另外TWaver还提供了三中选择模式:多选(mutipleSelection)、单选(‘singleSelection’)、不可选(‘noneSelection’),用于控制选中效果,也为视图组件选择模式提供了数据层支持,默认为多选模式。

//设置选择模式
selectionModel.setSelectionMode('singleSelection');
Note:当选择模式发生切换的时候,TWaber内部会首先调用清除所有元素的选中状态。

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

react代码

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-26 17:35:08
 */
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 });

        var selectionModel = box.getSelectionModel();


        initListener();
        initDataBox();
        function initDataBox() {
   

            for (var i = 0; i < 10; i++) {
   
                var node = new twaver.Node(i);
                node.setLocation((i + 1) * 50, (i + 1) * 50)
                node.setName('node-' + i);
                node.setClient('NO', i % 4);
                box.add(node);
            }
            selectionModel.appendSelection([box.getDataById(0)]);
            selectionModel.appendSelection(box.getDataById(1));
            selectionModel.removeSelection(box.getDataById(0));
            // 此方法会清除原始选中状态
            selectionModel.setSelection([box.getDataById(2), box.getDataById(6)]);
            // 不会清除之前选中
            selectionModel.appendSelection([box.getDataById(2), box.getDataById(3), box.getDataById(4)]);
            // return 


            //single selection mode 
            console.log('设置单选模式,首先清除当前的选中状态,以后每次只选择最多一个元素');
            selectionModel.setSelectionMode('singleSelection');
            // singleSelection  会选中最后一个网元
            selectionModel.appendSelection([box.getDataById(2),
            box.getDataById(3), box.getDataById(5)]);
            // return false


            // 当前选中的个数
            console.log('selection size:' + selectionModel.size()); //none selection mode 

            console.log('设置不可选模式,会清除当前的选中状态');
            selectionModel.setSelectionMode('noneSelection');
            selectionModel.appendSelection([box.getDataById(2), box.getDataById(3), box.getDataById(4)]); //multiple selection mode
            // return false

            console.log('默认是多选模式');
            selectionModel.setSelectionMode('multipleSelection');
            console.log('\n设置过滤器,所有id大于5的都不可选');
            selectionModel.setFilterFunction(function (data) {
   
                return data.getId() > 5;
            });
            // return false;


            // 选中全部元素
            selectionModel.selectAll();
        }

        function initListener() {
   
            selectionModel.addSelectionChangeListener(function (e) {
   
                console.log(e);
                //console.log('kind:' + e.kind + ',datas:' + e.datas.toString());
            });
        }
    }
    useEffect(init, [])
    return (
        <>
            <p style={
   {
    fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={
   {
    fontSize: "20px", paddingLeft: "50px" }}>
                <li>selectionModel</li>
            </ul>
            {
   /* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={
   {
    width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
        </>
    )
}
export default Demo

学习参考:TWaver Documents

目录
相关文章
|
2月前
|
人工智能
|
3月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
43 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
3月前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
39 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
3月前
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
37 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
40 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
3月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
35 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
3月前
Twaver-HTML5基础学习(36)是否显示滚动条
本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法,包括横向和纵向滚动条的控制,但遇到了设置不生效的问题,可能与软件版本有关。
37 2
Twaver-HTML5基础学习(36)是否显示滚动条
|
3月前
Twaver-HTML5基础学习(32)Network样式andTree样式
本文介绍了如何在Twaver-HTML5中自定义Network和Tree组件的样式,包括标签、提示、颜色、告警等。
40 2
Twaver-HTML5基础学习(32)Network样式andTree样式
|
2月前
|
Kubernetes Linux 持续交付
docker容器学习
【10月更文挑战第1天】
39 1
|
3月前
|
Kubernetes API Docker
跟着iLogtail学习容器运行时与K8s下日志采集方案
iLogtail 作为开源可观测数据采集器,对 Kubernetes 环境下日志采集有着非常好的支持,本文跟随 iLogtail 的脚步,了解容器运行时与 K8s 下日志数据采集原理。