jsPlumb流程图
来源：互联网 发布：php 数组元素相加 编辑：程序博客网 时间：2024/05/16 08:56
jsPlumb流程图
@{ ViewBag.Title = "Node"; Layout = "~/Views/Shared/_Index.cshtml";}<script src="~/Content/js/jquery-ui/jquery-ui.js"></script><link rel="stylesheet" href="~/Content/js/jquery-ui/jquery-ui.min.css" /><script src="~/Content/js/jquery-ui/jquery.jsPlumb-1.4.0-all.js"></script><script src="~/Content/js/Guid.js"></script><style> #node1 { left: 15px; top: 100px; } #node2 { left: 15px; top: 200px; } #node3 { left: 15px; top: 300px; } #node4 { left: 15px; top: 400px; } #left { border: 1px solid #00bfff; width: 200px; height: 750px; position: absolute; } #right { border: 1px solid #00bfff; width: 1024px; position: absolute; height: 750px; left: 215px; } .node { box-shadow: 2px 2px 19px #aaa; -o-box-shadow: 2px 2px 19px #aaa; -webkit-box-shadow: 2px 2px 19px #aaa; -moz-box-shadow: 2px 2px 19px #aaa; -moz-border-radius: 0.5em; border-radius: 0.5em; opacity: 0.8; filter: alpha(opacity=80); border: 1px solid #346789; width: 150px; /*line-height: 40px;*/ text-align: center; z-index: 20; position: absolute; background-color: #eeeeef; color: black; padding: 10px; font-size: 9pt; cursor: pointer; height: 50px; line-height: 50px; } .radius { border-radius: 25em; }</style><div class="flow-container"> <div id="left"> <div class="node radius" id="node1"><span>开始</span></div> <div class="node" id="node2"><span>流程</span></div> <div class="node radius" id="node3"><span>结束</span></div> </div> <div id="right"> <p>拖拉到此区域</p> </div></div><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">流程属性</h4> </div> <div class="modal-body"> <input type="hidden" id="state_flow_id" /> <table class="form"> <tr> <th class="formTitle">流程名称</th> <td class="formValue"> <input id="F_FullName" name="F_FullName" type="text" class="form-control required" placeholder="请输入流程名称" /> </td> </tr> <tr> <th class="formTitle" style="height: 35px;">通过类型</th> <td class="formValue" style="padding-top: 1px;"> <div class="ckbox"> <input id="F_EnabledMark" name="F_EnabledMark" value="2" type="checkbox"><label for="F_EnabledMark">全部通过则通过</label> </div> </td> </tr> <tr> <th class="formTitle" style="height: 35px;">审核角色</th> <td> <select id="F_RoleId" name="F_RoleId" style="padding:0px;" class="form-control required"> <option value="">==请选择==</option> </select> </td> </tr> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" id="btn_modal" class="btn btn-primary">确定</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div><script> //根蒂根基连接线样式 var connectorPaintStyle = { lineWidth: 4, strokeStyle: "#61B7CF", joinstyle: "round", outlineColor: "rgb(251,251,251)", outlineWidth: 2 }; // 鼠标悬浮在连接线上的样式 var connectorHoverStyle = { lineWidth: 4, strokeStyle: "#216477", outlineWidth: 2, outlineColor: "rgb(251,251,251)" }; var hollowCircle = { //暂无作用 endpoint: ["Dot", { radius: 40 }], //端点的外形 connectorStyle: connectorPaintStyle,//连接线的色彩,大小样式 connectorHoverStyle: connectorHoverStyle, paintStyle: { strokeStyle: "#1e8151", fillStyle: "transparent", radius: 2, lineWidth: 2 },//端点的色彩样式 //anchor: "AutoDefault", isSource: true, //是否可以拖动(作为连线出发点) connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ] isTarget: true, //是否可以放置(连线终点) maxConnections: 1, // 设置连接点最多可以连接几条线 connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]//叠加层 }; var hollowCircle_start = {//流程起始点 endpoint: ["Dot", { radius: 40 }], //端点的外形 connectorStyle: connectorPaintStyle,//连接线的色彩,大小样式 connectorHoverStyle: connectorHoverStyle, paintStyle: { strokeStyle: "#1e8151", fillStyle: "transparent", radius: 2, lineWidth: 2 },//端点的色彩样式 //anchor: "AutoDefault", isSource: true, //是否可以拖动(作为连线出发点) connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ] isTarget: true, //是否可以放置(连线终点) maxConnections: 1, // 设置连接点最多可以连接几条线 connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]] }; var hollowCircle_end = {//流程结束点 endpoint: ["Dot", { radius: 40 }], //端点的外形 connectorStyle: connectorPaintStyle,//连接线的色彩,大小样式 connectorHoverStyle: connectorHoverStyle, paintStyle: { strokeStyle: "#1e8151", fillStyle: "transparent", radius: 2, lineWidth: 2 },//端点的色彩样式 //anchor: "AutoDefault", isSource: true, //是否可以拖动(作为连线出发点) connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ] isTarget: true, //是否可以放置(连线终点) maxConnections: 1, // 设置连接点最多可以连接几条线 connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]] }; var i = 0; $(document).ready(function () { $("#F_RoleId").bindSelect({ url: "/SystemManage/Role/GetGridJson", id: "F_Id", text: "F_FullName" }); $("#left").children().draggable({ helper: "clone", scope: "ss", }); $("#right").droppable({ scope: "ss", drop: function (event, ui) { var left = parseInt(ui.offset.left - $(this).offset().left); var top = parseInt(ui.offset.top - $(this).offset().top); var name = ui.draggable[0].id; var id = ""; switch (name) { case "node1": if ($("#right .state_start").length > 0) { alert("开始标识只能唯一"); return; } i++; id = "state_start" + i; $(this).append('<div class="node state_start radius" id="' + id + '" >' + $(ui.helper).html() + '</div>'); $("#" + id).css("left", left).css("top", top); jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle_start); break; case "node2": i++; id = "state_flow" + i; $(this).append('<div class="node state_flow" id="' + id + '" > <span>点击设置流程</span></div>'); $("#" + id).css("left", left).css("top", top); jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle_start); jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle_end); break; case "node3": if ($("#right .state_end").length > 0) { alert("结束标识只能唯一"); return; } i++; id = "state_end" + i; $(this).append('<div class="node state_end radius" id="' + id + '" >' + $(ui.helper).html() + '</div>'); $("#" + id).css("left", left).css("top", top); jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle_end); break; } //1.2 添加连接点 //用jsPlumb添加锚点 jsPlumb.draggable(id); $("#" + id).draggable({ containment: "parent" });//保证拖动不跨界 //list = jsPlumb.getAllConnections();//获取所有的连接 } }); //删除连接线 jsPlumb.bind("click", function (conn, originalEvent) { if (confirm("确定删除吗?")) { jsPlumb.detach(conn); } }); jsPlumb.bind('beforeDrop', function (conn) { if (conn.sourceId === conn.targetId) { return false } else { return true } }) jsPlumb.bind("connection", function (info) { console.log(info); }); $("#right").on("mouseenter", ".node", function () { $(this).append('<img src="../../Resource/images/close2.png" class="" style="position: absolute;" />'); if ($(this).text() == "开始" || $(this).text() == "结束") { $("img").css("left", 158).css("top", 0); } else { $("img").css("left", 158).css("top", -10); } }); $("#right").on("mouseleave", ".node", function () { $("img").remove(); }); $("#right").on("click", "img", function () { if (confirm("确定要删除吗?")) { jsPlumb.removeAllEndpoints($(this).parent().attr("id")); $(this).parent().remove(); return false; } }); $("#right").on("click", ".state_flow", function () { var id = this.id; $("#state_flow_id").val(this.id); if (flowList[id] != undefined) { $("#F_FullName").val(flowList[id].F_Name); $("#F_RoleId").val(flowList[id].F_NodeRole); $("#F_EnabledMark").prop('checked', flowList[id].F_NodeType); } $("#myModal").modal("show"); }); $("#btn_modal").click(function () { if ($("#F_FullName").val() == "") { alert("请输入流程名称"); return; } if ($("#F_RoleId").val() == "") { alert("请选择审批角色"); return; } var a = { F_Name: $("#F_FullName").val(), F_NodeRole: $("#F_RoleId").val(), F_NodeType: $("#F_EnabledMark").prop('checked'), F_Id: newGuid(), F_FistNodeId: "", F_NextNodeId: "" } var id = $("#state_flow_id").val(); $("#" + id + " span").text(a.F_Name); flowList[id] = a; $("#myModal").modal("hide"); }); initView(); }); var flowList = {}; var keyValue = $.request("keyValue"); function submitForm() { var list = jsPlumb.getAllConnections().jsPlumb_DefaultScope; if (list == undefined || list.length < 2) { alert("请连接好流程"); return; } var saveList = {};//流程对象 for (i = 0; i < list.length; i++) { var sourceId = list[i].sourceId; var targetId = list[i].targetId; if (sourceId.indexOf("state_start") != -1 && targetId.indexOf("state_end") != -1) { alert("开始和结束不能直接连"); return; } var sourceO = null; var targetO = null; if (sourceId.indexOf("state_start") == -1) { if (flowList[sourceId] == undefined) { alert("有流程未设置"); return; } if (saveList[sourceId] == undefined) { sourceO = flowList[sourceId]; } else { sourceO = saveList[sourceId]; } } if (targetId.indexOf("state_end") == -1) { if (flowList[targetId] == undefined) { alert("有流程未设置"); return; } if (saveList[targetId] == undefined) { targetO = flowList[targetId]; } else { targetO = saveList[targetId]; } } if (sourceO != null) { sourceO.F_NextNodeId = targetO == null ? "" : targetO.F_Id; saveList[sourceId] = sourceO; } if (targetO != null) { targetO.F_FistNodeId = sourceO == null ? "" : sourceO.F_Id; saveList[targetId] = targetO; } } var sList = new Array(); for (var o in saveList) { sList.push(saveList[o]); } var s_i = 2; var e_i = 2; for (i = 0; i < sList.length; i++) { if (sList[i].F_FistNodeId == "") s_i--; if (sList[i].F_NextNodeId == "") e_i--; } if (s_i == 0 || e_i == 0) { alert("有流程未连接"); return; } if (sList.length == 0) { alert("请设置连接"); return; } $.submitForm({ url: "/WokFlow/WorkFlowNode/FormNode?keyValue=" + keyValue, param: { nodes: JSON.stringify(sList) }, success: function () { $.currentWindow().$("#gridList").trigger("reloadGrid"); } }) } function initView() {//初始化界面 if (!!keyValue) { $.ajax({ url: "/WokFlow/WorkFlowNode/getNodes", data: { keyValue: keyValue }, dataType: "json", async: false, success: function (data) { if (data.data.length == 0) return; var points = {};//所有的连接点 var sId = "state_start1"; $("#right").append('<div class="node state_start radius" id="' + sId + '" ><span>开始</span></div>'); $("#" + sId).css("left", 10).css("top", 10); points[sId] = jsPlumb.addEndpoint(sId, { anchors: "BottomCenter" }, hollowCircle_start); jsPlumb.draggable(sId); $("#" + sId).draggable({ containment: "parent" });//保证拖动不跨界 var eId = "state_end2"; $("#right").append('<div class="node state_end radius" id="' + eId + '" ><span>结束</span></div>'); $("#" + eId).css("left", 10).css("top", 100); points[eId] = jsPlumb.addEndpoint(eId, { anchors: "TopCenter" }, hollowCircle_end); jsPlumb.draggable(eId); $("#" + eId).draggable({ containment: "parent" });//保证拖动不跨界 for (i = 0; i < data.data.length; i++) { flowList[data.data[i].F_Id] = data.data[i]; $("#right").append('<div class="node state_flow" id="' + data.data[i].F_Id + '" > <span>' + data.data[i].F_Name + '</span></div>'); $("#" + data.data[i].F_Id).css("left", 190).css("top", (10 + i * 80)); points[data.data[i].F_Id + "1"] = jsPlumb.addEndpoint(data.data[i].F_Id, { anchors: "BottomCenter" }, hollowCircle_start); points[data.data[i].F_Id + "2"] = jsPlumb.addEndpoint(data.data[i].F_Id, { anchors: "TopCenter" }, hollowCircle_end); jsPlumb.draggable(data.data[i].F_Id); $("#" + data.data[i].F_Id).draggable({ containment: "parent" });//保证拖动不跨界 } for (i = 0; i < data.data.length; i++) { if (data.data[i].F_FistNodeId == "") { jsPlumb.connect({ source: sId, target: data.data[i].F_Id, sourceEndpoint: points[sId], targetEndpoint: points[data.data[i].F_Id + "2"] }); } else { jsPlumb.connect({ source: data.data[i].F_FistNodeId, target: data.data[i].F_Id, sourceEndpoint: points[data.data[i].F_FistNodeId + "1"], targetEndpoint: points[data.data[i].F_Id + "2"] }); } if (data.data[i].F_NextNodeId == "") { jsPlumb.connect({ source: data.data[i].F_Id, target: eId, sourceEndpoint: points[data.data[i].F_Id + "1"], targetEndpoint: points[eId] }); } else { jsPlumb.connect({ source: data.data[i].F_Id, target: data.data[i].F_NextNodeId, sourceEndpoint: points[data.data[i].F_Id + "1"], targetEndpoint: points[data.data[i].F_NextNodeId + "2"] }); } } } }); } ｝</script>代码说明
注意jsPlumb.connect()中如果没有设置sourceEndpoint与targetEndpoint那么连线的两点是新创建的，还可以继续拖拽连线。
阅读全文
0 0
- jsPlumb流程图
- 利用jsplumb画流程图
- 利用jsplumb画流程图
- jsPlumb流程图插件
- 使用jsPlumb制作流程图设计器
- 使用jsPlumb制作流程图设计器
- Javascript库之JsPlumb网络拓扑图流程图
- 详解js中构造流程图的核心技术JsPlumb
- jsPlumb插件做一个模仿viso的可拖拉流程图
- 使用jsPlumb做的一个可拖拉的流程图
- jsplumb笔记
- jsPlumb实例
- jsPlumb Toolkit
- 流程图
- 流程图
- 流程图
- 流程图
- 流程图
- Linux Ext文件系统
- SpringMVC 实现文件的上传与下载--较为原始
- Java设计模式--构建者模式（Builder）
- 至此，再没有宏伟壮志，但求安稳
- Set集合HashSet学习（Set集合学习一）
- jsPlumb流程图
- Faster RCNN minibatch.py解读
- 第九章 排序
- 从零开始搞懂Android网络请求——HttpURLConnection
- 51nod 1050 循环数组最大子段和
- 11.06 CSS的基础应用2
- 卡尔曼滤波学习心得（1）方程推导
- 我的Qt学习之路——标准对话框
- Node实现简单的表单+图片上传+路由
