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 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