html实现流程设计器,Jquery+jsPlumb实现流程图设计器核⼼代码如下
/*
*  DragFlow初始化类，主要包括：
*  1、初始化流程默认显⽰样式；
*  2、解析流程步骤及步骤关系；
*  3、设置所有元素的可拖拽性、⽬标节点、源节点等
*  4、设置右键菜单；
*  Author:bruced
*  date:2013.04.22jquery parent
*/
DragFlowInit.js
(function () {
window.DragFlow = {
init: function () {
// jsplum默认样式
jsPlumb.importDefaults({
DragOptions: { cursor: "pointer", zIndex: 2000 },
HoverClass: "connector-hover",
HoverPaintStyle: { strokeStyle: "#7ec3d9" },
PaintStyle: {
lineWidth: 1,
strokeStyle: "black"
},
ConnectorZIndex: 10
});
//设置元素拖动
jsPlumb.Selector(".window"));
// 设置所有节点的右键菜单
//DragFlow.makecontextmenu("", true);
// 连线单击事件
jsPlumb.bind("click", function (connection, originalEvent) {
if (Overlay("label") != null) {
/
/ Overlay("label").setLabel("" + connection.sourceId); }
else {//不存在样式对象，则动态创建
//connection.overlays = overlay;
//Overlay("label"))
connection.addOverlay(DragFlow.overlay(""), "");
//Overlay("label").setLabel("" + connection.sourceId); }
var type = $("#" + connection.targetId).attr("itemtype");
// alert(type);
});
//连接元素事件
$(".ep").unbind("mouseover").bind("mouseover", function () {
/
/ 链接创建成功事件，在此事件中可以加⼊增加链接的逻辑，在此处加连线逻辑
jsPlumb.unbind("jsPlumbConnection").bind("jsPlumbConnection", function (conn) {
var $target = $("#" + conn.targetId);
var $source = $("#" + conn.sourceId);
if ($target.attr("parentId").indexOf(conn.sourceId) > -1) {
alert("已经设置了⽬标节点！");
//jsPlumb.detach(conn);
//清空连线
DragFlow.delConnect();
//创建连线
return false;
} else {
if ($target.attr("parentId") != "") {
$($target).attr("parentId", $target.attr("parentId") + "|" + conn.sourceId);
}
else {
$($target).attr("parentId", conn.sourceId);
}
var stepseq = parseInt($target.attr("stepSeq")) + 1;
$target.attr("stepSeq", stepseq);
}
/
/添加样式
if (Overlay("label") == null) {
}
}
});
}).unbind("mouseout").bind("mouseout", function () {
});
// 链接双击事件，在此事件中加⼊删除链接的逻辑
jsPlumb.bind("dblclick", function (c) {
//清空连线
jsPlumb.detach(c);
//更新逻辑关系
var sourceid = c.sourceId;
var targerid = c.targetId;
var parentid = $("#" + targerid).attr("parentId");
parentid = place("|" + sourceid, "").replace(sourceid + "|", ""); $("#" + targerid).attr("parentId", parentid);
});
//初始化端点，把所有带有ep样式元素的⽗节点设置为源节点
DragFlow.initEndpoints("");
// 设置所有节点为连接⽬标节点
jsPlumb.Selector("ponent"), { dropOptions: { hoverClass: "dragHover" },
anchor: "Continuous",
endpoint: "Blank"
//                maxConnections: 1,
//                onMaxConnections: function (info, e) {
//                alert("已经设置了⽬标节点！");
//            }
//定义样式数组⽅法，带参数
overlay: function (label) {
return ["Label", {
cssClass: "l1 component label",
label: label == "" ? "" : label, //线上显⽰信息
location: 0.7,
id: "label",
events: {
"click": function (label, evt) {
//debugger
//alert(labelponent.targetId);
//label.canvas.innerText = labelponent.targetId;
// alert("clicked on label for connection " + labelponent.id);
}
}
}];
},
//  初始化端点，把所有带有ep样式元素的⽗节点设置为源节点initEndpoints: function (nextColour) {
$(".ep").each(function (i, e) {
var p = $(e).parent();
jsPlumb.makeSource($(e),
{
parent: p,
//anchor:"BottomCenter",
anchor: "Continuous",
connector: ["Flowchart", { curviness: 20}],
endpoint: "Blank",
maxConnections: 100,
onMaxConnections: function (info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached"); }
},
// 设置元素为连接源节点
makeSourceById: function (newid) {
jsPlumb.makeSource($("#" + newid + "").children(".ep"), {
parent: newid,
anchor: "Continuous",
connector: ["Flowchart", { curviness: 20}], connectorStyle: { strokeStyle: "black", lineWidth: 1 }, endpoint: "Blank",
maxConnections: 100,
onMaxConnections: function (info, e) {
alert("最⼤连接数为 (" + info.maxConnections + ") ！"); }
});
},
//设置连接⽬标节点
makeTargetById: function (newid) {
jsPlumb.makeTarget(newid, {
dropOptions: { hoverClass: "dragHover" },
anchor: "Continuous",
endpoint: "Blank"
//            maxConnections: 1,
/
/            onMaxConnections: function (info, e) {
//                alert("已经设置了⽬标节点！");
//            }
});
},
//建⽴⽗⼦关系
createConnectionRef: function () {
//移除绑定事件
jsPlumb.unbind("jsPlumbConnection");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。