GraphView与TreeView等本质关系区别；左侧tree树形列表点击，右侧区域动态加载图纸分割布局动态可拖动中间分隔线

本文链接：https://blog.csdn.net/IOTOS/article/details/127082148

GraphView跟TreeView是平级的组件！不是基类、派生关系！一个是拓扑图元组件、一个是树形组件，所有View类型的组件都是视图，用来设置数据模型DataModel的，数据都是由dm提供！

同样的数据模型，是可以同时给不同的视图组件，比如给TreeView和GraphView，一样的数据会有不同风格的展现方式，代码和界面截图如下：

HTML
<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
        }

        .main {
            margin: 0px;
            padding: 0px;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }
    </style>

    <script src="core/htiotos.js"></script>
    <script>
        function init() {
            //同一个数据模型实例，给到不同的视图组件
            var dataModel = new ht.DataModel();
            var treeView = new ht.widget.TreeView(dataModel);
            var graphView = new ht.graph.GraphView(dataModel);

            var splitView = new ht.widget.SplitView(treeView, graphView, 'horizontal', .3);

            //数据模型设置内容
            // Add Group
            var group = new ht.Group();
            group.setExpanded(true);
            group.setName('Group');
            dataModel.add(group);

            var urlList = [{
                id: 'ae6e463b-5e0d-4184-9e5b-360d8f154d48',
                url: 'displays/admin/AiotOS/adApps/MQTT客户端.json'
            }, {
                id: 'c5a1b69b-12a9-40bb-9531-75120155c3c3',
                url: "displays/admin/AiotOS/adApps/__syspages/401.json"
            }, {
                id: '306215ef-a00f-4d4c-a77d-9824c931abe7',
                url: "displays/admin/AiotOS/adApps/__syspages/403.json"
            }, {
                id: '7cd16906-aa34-412e-a24e-8b5bbb1ee95b',
                url: "displays/admin/AiotOS/adApps/__syspages/404.json"
            }, ]

            var x = -50,
                y = 100;
            for (var i = 0; i < urlList.length; i++) {
                var node = new ht.Node();

                /*注意，不同的视图对同样的数据模型，显示是不一样的，对于树形tree设置
                位置没用，但是对于拓扑图graph，一定要有位置区别，否则都重叠在一起了*/
                node.setPosition(x += 100, y += 100);

                node.setName(urlList[i].url);
                group.addChild(node);
                dataModel.add(node);
            }
            treeView.expandAll()

            // Add spliteView to document body
            splitView.addToDOM();
        }
    </script>
</head>

<body οnlοad='setTimeout(init,0)'>
</body>

</html>

如下图所示，左右分割布局，项目及代码如下：

注意，需要tomcat发布，存在异步加载json文件，直接点击html不行！

[treePages.rar]

HTML
<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
        }

        .main {
            margin: 0px;
            padding: 0px;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }
    </style>

    <script src="core/htiotos.js"></script>
    <script>
        function init() {
            //树形组件及独立的数据模型
            var dataModel = new ht.DataModel();
            var treeView = new ht.widget.TreeView(dataModel);

            //拓扑图形组件及独立的数据模型
            /*注意，因为拓扑图组件，用来加载图纸json，所以数据模型只需要传入实例
            即可，并不需要手动为其赋值，graphView.deserialize反序列化的时候会自
            动把图纸的数据给到数据模型实例*/
            var graphView = new ht.graph.GraphView(new ht.DataModel());

            //分割栏组件，并且对以上树组件和拓扑图组件做左右水平分割布局
            var splitView = new ht.widget.SplitView(treeView, graphView, 'horizontal', .3);

            //对树形组件的数据模型赋值
            var urlList = [{
                id: 'ae6e463b-5e0d-4184-9e5b-360d8f154d48',
                url: 'displays/admin/AiotOS/adApps/MQTT客户端.json'
            }, {
                id: 'c5a1b69b-12a9-40bb-9531-75120155c3c3',
                url: "displays/admin/AiotOS/adApps/__syspages/401.json"
            }, {
                id: '306215ef-a00f-4d4c-a77d-9824c931abe7',
                url: "displays/admin/AiotOS/adApps/__syspages/403.json"
            }, {
                id: '7cd16906-aa34-412e-a24e-8b5bbb1ee95b',
                url: "displays/admin/AiotOS/adApps/__syspages/404.json"
            }, ]

            //1. 创建一个Group组图元
            var group = new ht.Group();
            group.setExpanded(true);
            group.setName('Group');
            dataModel.add(group);
            var x = -50,
                y = 100;
            //2. 根据数据来创建多拓扑图元
            for (var i = 0; i < urlList.length; i++) {
                var node = new ht.Node();
                node.setName(urlList[i].url);
                group.addChild(node);
            }
            treeView.expandAll();

            /*HT API，回调接口来做事件响应！注意，不能这样传入回调：
            treeView.onDataClicked((data,e)=>{
                //TODO
            })*/
            treeView.onDataClicked = (data, e) => {    //回调函数需要这样设定！
                loadDisplay(graphView, data.getName())
            }

            // Add spliteView to document body
            splitView.addToDOM();
        }

        function loadDisplay(view, url) {
            const loadCb = (json) => {
                if (json) {
                    view.dm().clear()    //清空上次的数据模型内容
                    view.deserialize(
                        url,
                        function(json, dm, gv, datas) {
                            //完成加载预览，初始化
                        }
                    );
                } else {
                    console.log('资源加载失败');
                }
            };
            ht.Default.xhrLoad(url, loadCb);
        }
    </script>
</head>

<body οnlοad='setTimeout(init,0)'>
</body>

</html>