Twaver-HTML5基础学习(23)页管理容器(TabBox)、选中模型(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 falseconsole.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

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

Linux基础学习之Day7-2-LVM管理
Linux基础学习之从入门到精通Day7-2 LVM管理在线扩容 online 数据迁移 online 创建LVM LVM叫逻辑卷管理 VG扩展/缩小 LV扩容文件系统扩容在线扩容及在生产中 3 ...
HTML5基础学习——列表标签表单标签
学习内容: 1.列表标签表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用场景不同,列表可以分为三大类:无序列表.有序列表和自 ...
【html5基础学习速成】
HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息.HTML5在从前HTML4.01的基础 ...
前端（HTML5基础学习笔记）
以下学习路线都是基于自己看的黑马程序员视频总结而来学习路线:HTML5 -> CSS3 -> H5C3 一.HTML简介 1. 网页 2. 常用游览器 3. Web标准(重点) 二.HT ...
Slim 4 PHP 框架零基础学习笔记－依赖容器
1.什么是依赖容器 Slim 框架使用依赖容器来预载.管理和注入应用依赖.支持 PSR-11 或 Container-Interop 标准接口形式,框架内置 Pimple 容器,也可以使用 Accli ...
Linux基础学习——用户权限管理
权限管理: 进程安全上下文: 进程对文件的访问权限应用模型: 进程的属主与文件的属主是否相同,如果相同,则应用属主权限,否则则检查进程的属主(发起者)是否属于文件的属组,如果是,则应用属组权限,否则, ...
HTML5基础学习（7）：登录表单制作、表单知识补充
一.登录表单制作有的时候用户需要填写信息,然后把填写完的信息交给服务器.把数据提交给服务器的动作就需要一个新的知识点:表单. (1)常见的表单控件大部分的表单控件都是<input>编写 ...
HTML5基础学习（5）：百度云盘制作、简单表格制作
一.百度云盘制作 (1)绝对地址与相对地址绝对地址:在任何情况下,都可以找得到的地址.网页中下面图片所在的路径叫做绝对路径: <img src="http://1000phone.c ...
HTML html5基础详细笔记第一个模块
第01章-前端核心技术-HTML5基础学习目标了解什么是HTML 掌握HTML标签.元素的概念重点掌握HTML常用头部元素的使用重点掌握HTML标题.段落.文本.图片等排版重点难点掌 ...