mxGraph绘制流程图

代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh_CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>

    <script src="../../js/lib/jquery.min.js" type="text/javascript" language="JavaScript" charset="utf-8"></script>        
    <script type="text/javascript">
        mxBasePath = '../../js/lib/mxgraph';
    </script>

    <script type="text/javascript" src="../../js/lib/mxgraph/js/mxClient.js"></script>
    
    <script type="text/javascript">
    var xml = null;
    var graph = null;

    function createGraph(container)
    {
        var graph = new mxGraph(container);
        graph.setTooltips(true);
        graph.setEnabled(true);
        
        // Disables folding
        graph.isCellFoldable = function(cell, collapse)
        {
            return false;
        };

        // Creates the stylesheet for the process display
        var style = graph.getStylesheet().getDefaultVertexStyle();
        style[mxConstants.STYLE_FONTSIZE] = '12';
        style[mxConstants.STYLE_STROKECOLOR] = 'black';
        style[mxConstants.STYLE_FONTCOLOR] = 'black';
        style[mxConstants.STYLE_FILLCOLOR] = 'white';
        //style[mxConstants.STYLE_GRADIENTCOLOR] = '#F0F0F0';
        style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST;
        style[mxConstants.STYLE_ROUNDED] = true;
        style[mxConstants.STYLE_SHADOW] = true;
        style[mxConstants.STYLE_FONTSTYLE] = 1;
        style[mxConstants.STYLE_WHITE_SPACE] = 'wrap';
        
        style = graph.getStylesheet().getDefaultEdgeStyle();
        style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
        style[mxConstants.STYLE_STROKECOLOR] = 'black';
        style[mxConstants.STYLE_ROUNDED] = true;
        
        return graph;
    };

    //加载数据
    function loadData() {
         location=location;//刷新页面
    }

    $(function () {

        var pid = $('#name').val();
         $.ajax({
                type:"POST",
                async:false,
                url:"../../index.php/?action=ticket&method=getProcess",
                data:{
                     pid:pid
                },
                success:function(data){
                    $('#txt').val(data);
                }
            });

        xml = $('#txt').val();

        //绘图
        var container = document.getElementById('graphContainer');
        graph = createGraph(container);
        var doc = mxUtils.parseXml(xml);
        var codec = new mxCodec(doc);
        codec.decode(doc.documentElement, graph.getModel());

        //定时刷新页面
        setTimeout(function () {
            setInterval(loadData, 10000);
        }, 1000); 
        
    });


    
    </script>
</head>

<!-- Page passes the container and control to the main function -->
<body>

    <!-- Acts as a container for the graph -->
    <div id="graphContainer" style="overflow:hidden;position:relative;cursor:default;">
    </div>
    
    <input type='hidden' id='name' value=" <?php echo $_REQUEST['uid']; ?> "></input>
    
    <input type='hidden' type='text' id='txt'></input>
    <br>
</body>
</html>
猜你喜欢
