EasyUI + Qunee 组件同步示例

HTML第三方组件种类繁多，小到按钮，工具栏，大到树图，表格，布局框架，以及各种图表，每种组件都有其优势，比如EasyUI的树和表格，Bootstrap的表单，Qunee的拓扑图等，一个应用需要整合多种组件，本文将以一个示例来介绍EasyUI与Qunee组件的同步使用

引入相关js和css文件

本例用到jquery, bootstrap, easyui和qunee，分别引入相关文件

使用EasyUI布局框架

EasyUI支持东南西北中区域布局，类似Java Swing中的BorderLayout，本例中，左侧放置树图，中间为拓扑图

拓扑视图


Qunee + EasyUI 同步示例









JSON


Copyright © 2014 Qunee.com

配置风格样式

本人喜欢简洁风格，故而删除了大部分的边框和背景，并采用了灰色模板

界面效果

添加数据

这里采用了模拟数据，使用json格式，数据如下：
节点数据包含编号、名称以及父节点编号等属性，而连线数据则需要起始结束节点的编号

{
    "nodes": [
        {
            "id": 1,
            "name": "001"
        },
        {
            "id": 2,
            "name": "R1",
            "parent": 1
        },
        ...
    ],
    "relations": [
        {
            "from": 1,
            "to": 2
        },
        {
            "from": 1,
            "to": 3
        },
        ...
    ]
}

加载数据

根据json数据，创建对应的图元数据和树节点数据

function initDatas(){
    Q.loadJSON("testData.json", function(json){
        var topoNodes = json.nodes;
        var relations = json.relations;
        initTopology(topoNodes,relations);

        graph.callLater(function(){
            var layouter = new Q.TreeLayouter(graph);
            layouter.doLayout();
            graph.moveToCenter();
        })

        var datas = [];
        var map = {};
        graph.graphModel.forEachByBreadthFirst(function(d){
            var name = d.name || d.type;
            var data = {text: name, id: d.id, iconCls: getTreeIcon(d)};
            map[d.id] = data;
            var parent = d.parent;
            if(!parent){
                datas.push(data);
                return;
            }
            parent = map[parent.id];
            var children = parent.children;
            if(!children){
                children = parent.children = [];
            }
            children.push(data);
        });
        $('#tree').tree({
            data: datas
        });

        syncSelectionTreeAndGraph("tree", graph);
        syncDataTreeAndGraph("tree", graph);
    });
}

function initTopology(topoNodes,topoRelations)
{
    var map = {};
    for(var i=0;i 
 
到此时，界面已初步呈现了
 
 
组件状态同步
 
 
然后初始化工具栏，对树图和拓扑图填充数据，最后实现两组件的状态同步，包括选中同步和数据同步
 
 
首先数据同步
 
 
因为树图上不可编辑，所以这里只需要监听Graph组件图元的变化事件，在增加和删除图元时，分别对Tree组件进行处理
 
 
function syncDataTreeAndGraph(treeId, graph){
    treeId = "#" + treeId;
    graph.listChangeDispatcher.addListener(function(evt){
        var data = evt.data;
        switch (evt.kind) {
            case Q.ListEvent.KIND_ADD :
                var treeData = {data:[{id: data.id, text: data.name, iconCls: getTreeIcon(data)}]};
                $(treeId).tree('append', treeData);
                break;
            case Q.ListEvent.KIND_REMOVE :
                Q.forEach(data, function(node){
                    var node = $(treeId).tree('find', node.id);
                    if(node){
                        $(treeId).tree('remove', node.target);
                    }
                });
                break;
            case Q.ListEvent.KIND_CLEAR :
                break;
        }
    });
}
 
 
选中状态同步
 
 
需要分别监听Tree的"onSelect"事件，以及graph的selectionChangeDispatcher事件派发器，实现双向同步，有了监听器，一切变得容易
 
 
function syncSelectionTreeAndGraph(treeId, graph){
    treeId = "#" + treeId;
    var selectionAjdusting;
    graph.selectionChangeDispatcher.addListener(function(evt){
        if(selectionAjdusting){
            return;
        }
        selectionAjdusting = true;
        var selection = [];
        graph.selectionModel.forEach(function(node){
            var node = $(treeId).tree('find', node.id);
            if(node){
                selection.push(node.target);
            }
        });
        $(treeId).tree('select', selection);
        selectionAjdusting = false;
    });
    $(treeId).tree({onSelect: function(){
        if(selectionAjdusting){
            return;
        }
        selectionAjdusting = true;
        var selected = $(treeId).tree("getSelected");
        if(selected){
            var node = graph.getElement(selected.id);
            graph.selectionModel.set(node);
            if(node){
                ensureVisible(node);
            }
        }
        selectionAjdusting = false;
    }});
}
 
 
代码下载:
 
 
treeAndGraph.zip
 
 
在线示例:
 
 
 http://demo.qunee.com/14-4-25/treeAndGraph.htmlX27X