工作流之流程跟踪图绘制

最近看到其它系统使用jquery.jsPlumb绘制流程图，效果还不错，于是也就动手学做一个！先看效果：

需要引用的js

        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery.tooltip.min.js"></script>
        <!-- support lib for bezier stuff -->
  <script type="text/javascript" src="js/jsBezier-0.2-min.js"></script>
  <!-- main jsplumb engine -->
  <script type="text/javascript" src="js/jsPlumb-1.3.2-RC1.js"></script>
  <!-- connectors, endpoint and overlays  -->
  <script type="text/javascript" src="js/jsPlumb-defaults-1.3.2-RC1.js"></script>
  <!-- SVG renderer -->
  <script type="text/javascript" src="js/jsPlumb-renderers-svg-1.3.2-RC1.js"></script>
  <!-- canvas renderer -->
  <script type="text/javascript" src="js/jsPlumb-renderers-canvas-1.3.2-RC1.js"></script>
  <!-- vml renderer -->
  <script type="text/javascript" src="js/jsPlumb-renderers-vml-1.3.2-RC1.js"></script>
  <!-- jquery jsPlumb adapter -->
  <script type="text/javascript" src="js/jquery.jsPlumb-1.3.2-RC1.js"></script>

下以是绘制的js:

$(document).ready(function () {
                $.getJSON('WFProcess.ashx?BillCode=<%=Request["BillCode"]%>&BuDataID=<%=Request["BuDataID"]%>', function (json) {
                    var fillColor = "gray";
                    //jsPlumb.setRenderMode(jsPlumb.VML);
                    jsPlumb.Defaults.Connector = ["Straight", { curviness: 50}];
                    jsPlumb.Defaults.DragOptions = { cursor: "pointer", zIndex: 2000 };
                    jsPlumb.Defaults.PaintStyle = { strokeStyle: fillColor, lineWidth: 2 };
                    jsPlumb.Defaults.EndpointStyle = { radius: 4, fillStyle: fillColor };

                    var anchors = [[0.5, 0, 0, -1], [1, 0.5, 1, 0], [0.5, 1, 0, 1], [0, 0.5, -1, 0]];
                    var arrowCommon = { foldback: 0.7, fillStyle: fillColor, width: 14 };
                    var aConnection = {
                        dynamicAnchors: anchors,
                        overlays: [
                        ["Arrow", { location: 0.7 }, arrowCommon]
                    ]
                    };

                    if (json.total > 0) {
                        $.each(json.list, function (i, row) {

                            var nodeDiv = document.createElement('div');
                            var nodeId = "window" + row.prcs_id;
                            $(nodeDiv)
                            .attr("id", nodeId)
                            .attr("to", row.to)
                            .addClass("window " + row.prcs_class)
                            .css({ "left": parseInt(row.left)/2.5, "top": (parseInt(row.top) + 60)/2.5 })
                            .attr("title", row.title)
                            .html('<table class="window-content"><tr><td>' + row.prcs_content + '</td></tr></table>');
                            $("#prcsList").append(nodeDiv);

                        });

                        //遍历节点并连线
                        $(".window").each(function () {
                            toArr = $(this).attr("to").split(",");
                            for (var i in toArr) {
                                if (toArr[i] != "" && $("#window" + toArr[i]).size() > 0 && this.id != "window" + toArr[i]) {
                                    jsPlumb.connect({ source: this.id, target: "window" + toArr[i] }, aConnection);
                                }
                            }
                        });

                        $("[title]").tooltip();
                    }
                });
                
            });

 

 

 

转载于:https://www.cnblogs.com/magicnet/p/3392697.html